Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること
技術書典5 で本記事をさらにパワーアップさせた本を書いたのでよかったらどうぞ Chromeデベロッパーツールを使いこなそう Console編 Chrome デベロッパーツールの Console には Web 画面を解析するための便利な機能が備わっています。 この便利機能を覚えておくと Web 画面からの情報抽出 や、 Chrome Extension 開発 がとても捗ります。 ※ 筆者はこの機能を利用して、 ウェブスクレイピング時のDOMセレクタを調べたり、 Q Accelerator などの Chrome 拡張機能を開発しています。 本記事では、次の３つを解説します。 Console の便利機能 実際に Qiita の画面を解析する手順 リアルタイムで評価結果を返す Eager Evaluation （Google IO 2018 で発表されました） 便利機能（コマンドライン API）
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
Helpfeelがアクセシビリティにどのように取り組み始めて、どこまで来れたのか/Helpfeel Accessibility 2025-07
昨日書いたんだけど、Kafkaを触ろうと思ってるんだよ？でも、触ろう触ろうと思ってると、違うものが目に入ってくるのであった。ということで Headless Chromeで遊んでみた Kafka一切関係なく、この記事を見かけたから。 Getting Started with Headless Chrome | Web | Google Developers この辺のこともあるので、ちょっと見とこうかなって。 Phantom.jsのメンテナー、プロジェクトの将来に疑問を呈し、その座を降りる ただ、今手元にある環境でごにょごにょするのもなんか嫌だなぁ・・・って思ったので、無駄にDockerに詰め込んでGebで遊んでみた。そして、そのせいで疲れた(ヽ´ω`) できあがったものは これ。 https://github.com/bufferings/sandbox-gebheadlesschr
英語読解が捗る拡張機能「カラフル英語品詞分類」 英語読解が捗るGoogle Chrome拡張「カラフル英語品詞分類」を作りました。Chromeウェブストアからダウンロードすることができます。 カラフル英語品詞分類 - Chrome ウェブストア この拡張機能はWebページの英語の品詞タグ付け(part of speech tagging)を行い、品詞ごとに色分けをしてページを読みやすくします。 以下は実行の様子です。 アイコンを一度クリックするとウェブページに色がつき、もう一度アイコンをクリックすると元に戻ります。 またオプションから品詞の色を設定することができます。 色がうるさい場合は、色分けする必要のない品詞を黒に設定するといいと思います。 ソースコードはGitHubに公開しています。 GitHub - drilldripper/ColorPosTagge 他のアプリとの違い 英語の構
Acer Chromebook C720P の一番の特徴はお値段。32GB SSDモデルで$299。これでHaswell Celeron積んで、タッチ対応までしてる。これまで、Chromebookでタッチ対応の機種はGoogle純正Chromebook Pixelだけだったが、$1000以上も値差がある。米国では教育向けを初めとして、ボチボチ売れ始めているChromebook、C720Pの仕様で売れないはずはない。 ▼Acer C720P外箱。まあ値段なりのおもてなし。 ▼ご開帳。やっぱりお値段なり ry) ▼Acer Chromebook C720P内容物全部。ACケーブルはちと残念なミッキーケーブル。アダプタはタバコの箱ぐらいの大きさ。 ▼パネルを開くと、『タッチ対応！』と分かりやすいステッカーが。PCの店頭売りは結構これ重要。 書いてないと他の機種に埋もれてタッチパネルがついてるのが
jsScheme - Scheme interpreter in JavaScriptというサイトがある。 このページではSchemeをブラウザ上で実行できる。 どういうことかというと、つまりはScheme処理系がJavaScriptで実装されてる。 GPLライセンスで自由に使って良いとのことだったので、一部だけ手を加えて、Chrome拡張に移植した。 授業でちょうど今、『計算機プログラムの構造と解釈』（Structure and Interpretation of Computer Programs）を読んでて、英語版はリンク先で全部公開されてるから、これを読んでるとSICPにサンプルコードを見つけると、自分の場合はそれをコピーしてVimに貼り付けて実行するとか、大体の人なら授業指定の処理系Jakldに貼り付けたりして実行している。 学習的には丁寧に写経したりするんだろうけど、どう動くか
まとめトクは長期利用割引サービスです。契約期間が長いほど割引率がアップし、よりおトクにConoHa VPSをご利用いただけます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
