kazu22002の技術覚書

PHPerでありGo使いでありAWS好きの、うさぎ年のエンジニアの日々

Puppeteerを使ってみた

github.com

https://pptr.dev/

Puppeteer は ChromeChromiumで動作するUIテストツールです。

ブラウザで操作する内容を、コードベースで確認することができます。ヘッダーレスも可能なツールです。

Nodeのライブラリになります。

今回はe2eテストとしてやってみたくて、色々とやって使えるところまできたと思うので、書いてみます。

やってみると変なテクニックが多かったです。理解してみるとよくわかる現象ですが、解決するのに時間がかかってしまいましたね。

インストール

公式をなぞって書いてみます。Nodeのライブラリのため、NodeJsが必要になります。

現在バージョンが、1.18.0ですが、Nodeはv6.4.0以上が必須です。また「async / await」を使用するためNodeをv7.6.0以降でインストールしておくのがいいみたいです。(現在の推奨版がv10だから問題ないと思います)

インストール

npm i puppeteer
# or "yarn add puppeteer"
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

画面キャプチャのサンプルです。

これでサンプルを動かしいて、理解できる方はそのままドキュメントを読んでみるといいと思います。

example

github.com

puppeteerにあるexamplesを簡単に動かしてみたソースです。

実際に動くところをみると試してみたりできて楽しくなりますね。

pupeteerはフォーム入力やスクリーンショット保存、PDF保存もできたり色々と便利です。

e2eテストをやってみると、いままでのテストの見え方も変わってきますね。

パターンが多い場合は特に有効だと感じています。

ただUIテストは変更に弱いということがよく言われているので、注意して取り組んでみたいです。

まずインストールから試せるところまで書いてみました。

Puppeteerに関しては、ある程度かけるところまでコードを書いて実際のプロジェクトで動作するところまでやったので色々と書いてみたいと思います。

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング

Puppeteer入門 スクレイピング+Web操作自動処理プログラミング