ブラウザ操作のキャプチャができる Puppeteer recorder を試してみる

Chromeの自動操作ツール Puppeteer

みなさん、 Puppeteer はご存知でしょうか？Googleが開発している、Chromeの自動操作ツールです。

ブラウザの自動化ツールと言えば Selenium ですが、それと比べると ヘッドレス であるという大きな特徴があります。

「ヘッドレス」とは、画面を立ち上げることなしにブラウザを実行することを言います。Seleniumは多くのドライバーはヘッドレスではないため、GUIが描画できないコンソール環境で実行するには、仮想グラフィックドライバを導入するなど、かなりノウハウが必要でした。また、実際の描画処理を行うため動作速度も遅い、という特徴がありました。

Puppeteer はChromeのヘッドレスモードを利用するため、GUIを必要とせずテストを実行することができます。そのため、コンソール環境などでも比較的簡単にテストを実行することが可能です。また動作速度も描画処理が走らない分、非常に高速です。

Puppeteer 用の操作キャプチャツール Puppeteer recorder

このようにSeleniumにはない特徴を持つ優れたツールである Puppeteer なのですが、Seleniumには一つ大きなアドバンテージがありました。それは Selenium IDE という、ブラウザ上の操作をコードに変換するツールを持っていることです。

ブラウザ上での操作を記録するだけで簡易的なテストが書けてしまうのは非常に魅力的で、自動テストの導入に便利に使うことができます。

そしてとうとう、 Puppeteer にもそれに類するものがでてきました。それが Puppeteer recorder です。

実際にどのようなものか使ってみましょう。

Puppeteer recorder を試してみる

使用するためには、Chromeのアドオンとして追加する必要があります。以下からインストール可能です。

• https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda

インストールして、アイコンをクリックすると以下のような画面が出てきます。

そこで、 Record ボタンを押すと、実際にレコードが開始されます。

その後に Stop を押すと、レコードされたイベントが Puppeteer のコードの変換されます。

実際に出力されるコードはこのようなものになります。async/await を活用した、かなりモダンなJavascriptコードとして出力されているのがわかります。実際に Puppeteer が利用できる環境であれば、このコードはそのまま実行させることは可能です。

まとめ

というわけで、 Puppeteer recorder を簡単に試してみました。Selenium IDE と非常に似たようなワークフローが Puppeteer でも可能なことが分かりました。システムテストを素早く効率的に実行するために、活用していけるのではないでしょうか。

[お知らせ]Puppeteer / Selenium だけでなく、ギルドワークスでは状況に応じて最適なツールを利用し、開発を進めています。こういったツールの導入についてのご相談に付きましても、お気軽にお問い合わせください。 お問い合わせ窓口

また、開発ツールだけでなく、プロセスを含めて開発組織自体をアップデートしたいというご要望も受け付けておりますお気軽にお問い合わせください。 開発組織2.0 -古くなってしまった開発組織を、 自分たちに最適な状態へアップデート-