Puppeteer Recorder でテスト用スクリプトを生成する

Puppeteer を使うと Web 画面の E2E テストが手軽に書けます。

github.com

ただ最近の Web UI は DOM 要素に ID が振られていないことが多く、Selector 書くのに Chrome DevTools などで要素をインスペクトしてパスをコードに貼り付けるという作業が多くなります。そうやって作ったスクリプトもサイトデザインの変更で動かなくなったりします。

Puppeteer Recorder はブラウザの操作を記録して、Puppeteer のスクリプトを生成してくれる Chrome 拡張です。

chrome.google.com

インストールすると拡張のアイコンから操作を記録可能になります。

Record ボタンをクリックして記録を開始します。kondoumh を検索して、僕のホームページを開くという操作をしてみました。イベントが記録されています。

ストップボタンを押すと Puppeteer のコードが表示され、クリップボードにコピーできるようになります。

生成されたコード

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  
  const navigationPromise = page.waitForNavigation()
  
  await navigationPromise
  
  await page.goto('https://www.google.com/search?q=kondoumh&oq=kondoumh&aqs=chrome.0.69i59j69i60l5.2485j0j7&sourceid=chrome&ie=UTF-8')
  
  await page.setViewport({ width: 1280, height: 689 })
  
  await page.waitForSelector('.g:nth-child(1) > .rc > .r > a > .LC20lb')
  await page.click('.g:nth-child(1) > .rc > .r > a > .LC20lb')
  
  await navigationPromise
  
  await browser.close()
})()

HTML 要素による判定とかは無理ですが、大枠の操作は手早く作れて便利だと思います。