この記事は Google I/O '19 のセッションの視聴メモです。
想定読者は自分なので正確性や網羅率には問題があるかもしれません。
References
Speaker(s): Andrey Lushnikov, Joel Einbinder
Abstract
PuppeteerはChrome DevToolsチームによって開発されたChromeをテストし自動化するためのNodeライブラリです。このセッションでは、Puppeteerの簡単なセットアップの方法とHeadless Chromeを用いた興味深いユースケースの紹介を行います。
Contents
- PuppeteerをセットアップしてECサイト(発表者が発表者のグッズを売っている)の商品の値段を監視するスクリプトを書いている
- 6行で書けてとても簡単
-
PuppeteerでFirefoxも制御できるようになった
npm i puppeteer-firefox
- Puppeteer APIの90%をカバーしている実験的プロジェクト
- クロスブラウザテストが簡単に書ける!
- テストが遅くなるのはなぜか
- 各テストのたびに新しくブラウザを立ち上げているから
- それぞれのテストが独立するのは良いことなんだけど…
- PuppeteerはChromeのincognitoモードをベースに使っているのでブラウザを立ち上げ直さなくてもテストが独立になる
- いちいち立ち上げ直すより100倍速い
- 各テストのたびに新しくブラウザを立ち上げているから
const browser = await puppeteer.launch();
const context = await browser.createIncognitoBrowserContext();
// -> contextごとに操作する
- WebテストはFlaky(同じテストでもpass/fail両方起きてしまう)
- テストをリトライするというのがよくある解決策だが、もっと良い方法もある
- ボタンが非同期的にレンダリングされる場合など、表示されているときとされていないときで結果が変わる
- レンダリングを1秒待ってみたりする解決策がある → それでもFlakyだし時間がかかる
-
waitForX
API -
page.waitForSelector
でボタンが表示されるのを待てる
-
page.waitForResponse
でネットワークリクエストのレスポンスも待てる
- Puppeteer is fast, reliabble, and simple
-
page.emulate(puppeteer.devices['iPhone 8'])
でモバイルのエミュレートもできる!- 画面サイズ、User Agent、DPI、タッチ、ランドスケープモードなどが制御できる
- 100個以上のデバイスをサポートしている
- オフラインモードもテストできる
- Service Worker もテストしていこう
- SWオブジェクトを生成して処理をevalできる
- デモではキャッシュがヒットするかどうかのテストをしていた
- Geolocation
- devtoolでロケーションは設定できるけどめんどくさいよね
- もちろんPuppeteerでも制御できます
- request interception
-
page.setRequestInterception
でネットワークリクエストの監視と変更ができる
-
- マウスイベント
- そもそも素のJSでマウスイベントを発行できるが本当にマウスを動かしているのとは挙動が違うことが多い
- Purformance testing
-
page.metrics
で基本的な情報は取れる- JSのヒープサイズなどが取れる
-
page.tracing
でChrome DevtoolのPerformanceと同じことができる
-
- Accessibility
-
page.accessibbility.snapshot
でDOM要素のアクセシビリティを確認したりできる - Accessibility Visualizer
-
-
Size Limit
-
https://github.com/ai/size-limit
- Puppeteerを利用してコードサイズや実行時間を図るツール
- Puppeteerを使っているので様々なネットワーク環境&デバイスを再現できる
- Puppeteerを利用してコードサイズや実行時間を図るツール
-
https://github.com/pocketjoso/penthouse
- 上記のCSSバージョン
-
https://github.com/ai/size-limit
詳しくは pptr.dev
Memo
- 発表者もPuppeteerの発音が難しそうな感じだった
- 自分のグッズを売るためのECサイトを作りたくなった
- Firefoxサポートすごい
- Accessibilityの確認はすごく難しいのでPuppeteerがもっと便利になってAccessibilityに気を使うサービスが増えていけばいいと思った