Puppeteer recorder - Puppeteer用の操作スクリプトを生成するGoogle Chrome機能拡張
Selenium IDEが使えなくなり、Webブラウザを使ったテスト自動化をどう作るかは問題になっています。次期バージョンも作られていますが、開発者の関心はPuppeteerに移りつつあります。Google Chromeを開発で使っている人も多く、ヘッドレスブラウザであるPuppeteerが使えるのは効率的です。 そこで必要になるのがPuppeteer用のスクリプトです。普段使っているGoogle Chromeでそのままレコーディングできて、操作用のスクリプトを生成できるのがPuppeteer recorderです。
Puppeteer recorderの使い方
インストールしました。Recordボタンを押すと記録が開始します。
レコーディング中。
レコーディングされた内容です。アクションが並んでいて分かりやすいです。
コードに変換しました。クリップボードにコピーできます。
オプションです。asyncではない（Promiseベース）のコードも出力できます。
生成したコードです。CSSセレクタだけなので理解しやすく、カスタマイズもできるでしょう。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch()
const page = await browser.newPage()
await page.click(':nth-child(2) > .list > :nth-child(1) > a')
await page.click('.search-query')
await browser.close()
})()
Puppeteer recorderを使ってPuppeteer用のコードを生成すれば、後はちょっとしたスクリプトでテストや操作の自動化が実現できるでしょう。ユニットテストで使うとなると他のライブラリと組み合わせる必要がありそうですが、ログインして情報を集めて…といった自動操作であれば十分使えそうです。
Puppeteer recorderはGoogle Chrome用のオープンソース・ソフトウェア（MIT License）です。