【視聴メモ】Modern Web Testing and Automation with Puppeteer (Google I/O ’19)

この記事は 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に気を使うサービスが増えていけばいいと思った