Puppeteer とは
Puppeteer は、Chrome を Node から操作できるライブラリです。要はブラウザ操作の自動化ライブラリです。
Playwright とは
Puppeteer をクロスブラウザ対応（Chromium, WebKit and Firefox に対応）させたのが Playwright です*1。
この Playwright をさっそく使ってみました。
Playwright を試す
以下の順序で試しました。
1. Playwright のインストール
適当なディレクトリを作り、そこに移動します。
$ mkdir playwright_test $ cd playwright_test
npm か yarn で Playwright をインストールします。
$ npm install playwright
または
$ yarn add playwright
2. コードを書く
公式ドキュメントの Examples の Page screenshot にあるコード を改変したサンプルコードを書いてみます。改変した部分はアクセスする URL の部分です*2。https://diana-adrianne.com/purecss-lace/ というアドレスに変更しています。
const playwright = require('playwright'); (async () => { for (const browserType of ['chromium', 'firefox', 'webkit']) { const browser = await playwright[browserType].launch(); const context = await browser.newContext(); const page = await context.newPage( 'https://diana-adrianne.com/purecss-lace/' ); await page.screenshot({ path: `example-${browserType}.png`, fullPage: true, }); await browser.close(); } })();
https://diana-adrianne.com/purecss-lace/ というページは、ブラウザエンジンによって見え方が異なるページ です。Playwright の動作サンプルとしてもってこいです。
3. 実行する
書いたコードを実行し、スクリーンショットを取得します。書いたコードのファイル名は samplePlaywright.js とします。
$ node samplePlaywright.js
4. スクリーンショットのファイルが生成されているかを確認する
コードを実行した結果、コードと同じディレクトリに以下の 3つ のスクリーンショットファイルが生成されていると思います。
example-chromium.pngexample-firefox.pngexample-webkit.png
5. 各スクリーンショットファイルの中身を確認する
生成されたスクリーンショットのファイルの中身を実際に見てみましょう。エンジンごとに見え方が異なっているのが確認できます。
example-chromium.png
example-firefox.png
example-webkit.png
備考
いくつか気がついたことを書きます。
実行結果は Playwright で用いられるブラウザエンジンのバージョンに依存する
当たり前の話なのですが、実行結果は用いられるブラウザエンジンのバージョンに依存します。Playwright で用いられるブラウザエンジンが古い場合には、現実との違いが生まれる可能性があります。
ブラウザエンジンについての詳細は、公式APIドキュメントの項目に書いてあります。
Cypress などでは現時点で未対応
これも当たり前の話なのですが、Cypress では現時点では Chromium のみの対応です。つまり、Puppeteer を用いている・Puppetter が用いられていると思われるプロダクトについては、プロダクト側が Playwright を用いなければクロスブラウザに対応できません*3。
したがって例えば E2Eテストを Playwright で実施するためにはいくらか壁がありそうです。Jest についてはすでに Issue が立っていますね。
ライブラリの容量が巨大
Puppeteer も巨大でしたが、Playwright はそれ以上に巨大です。Playwright のみをインストールした場合の node_modules の容量は、約 620 MB です。この容量は、CIサービス で回すときにネックになりそうな予感がします*4。
API は Puppeteer とほぼ共通
Playwright の API は Puppeteer とほぼ共通です。README の FAQ の項目 にも以下のように書かれています。
Q: How does Playwright relate to Puppeteer?
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer project is active and is maintained by Google.
We are the same team that built Puppeteer. Puppeteer proved that there is a lot of interest in the new generation of ever-green, capable and reliable automation drivers. With Playwright, we'd like to take it one step further and offer the same functionality for all the popular rendering engines. We'd like to see Playwright vendor-neutral and shared governed.
（以下省略）
