Puppeteerを使ってみた - kazu22002の技術覚書

github.com

https://pptr.dev/

Puppeteer は Chrome や Chromiumで動作する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();
})();

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

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