この記事は 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
  - https://github.com/GoogleChromeLabs/html-a11y-renderer
Size Limit
- https://github.com/ai/size-limit
  - Puppeteerを利用してコードサイズや実行時間を図るツール
    - Puppeteerを使っているので様々なネットワーク環境&デバイスを再現できる
- https://github.com/pocketjoso/penthouse
  - 上記のCSSバージョン
詳しくは pptr.dev

Memo

発表者もPuppeteerの発音が難しそうな感じだった
自分のグッズを売るためのECサイトを作りたくなった
Firefoxサポートすごい
Accessibilityの確認はすごく難しいのでPuppeteerがもっと便利になってAccessibilityに気を使うサービスが増えていけばいいと思った