Playwrightとは
Playwrightとは2020年1月31日にリリースされた、テスト自動化ツール。
以前はPuppeteerというテスト自動化ツールが人気だったが、Playwrightの登場以降はこちらを使用する人が増えてきています。
ちなみにPlaywrightとは「脚本家」という意味です。
Puppeteerとの違い
Puppeteerとの違いは以下の通りです。
Playwrightは後発ということもあり、Puppeteerより高機能です。
| 特徴 | Playwright | Puppeteer |
|---|---|---|
| ブラウザ | Chromium, Firefox, WebKit | ChromiumとChrome（Firefox版もある） |
| API設計 | ブラウザ、コンテキスト、ページの3つの階層を持つ | ブラウザとページの2つの階層を持つ |
| セレクタエンジン | CSS, XPath, およびテキストセレクタをサポート | CSS および XPathセレクタをサポート |
| 使用言語 | JavaScript, TypeScript, Python | JavaScript および TypeScript |
| サポート | Microsoft |
Playwrightの使い方
まず以下のコマンドでフォルダを作成して移動します。
mkdir my-test; cd my-test
次に以下のコマンドでPlaywrightをインストールします。
npm init playwright@latest
インストールコマンドを実行すると色々聞かれますので、すべてEnterキーを押してデフォルト設定でインストールしてください。
Initializing project in '.' ✔ Do you want to use TypeScript or JavaScript? · TypeScript ✔ Where to put your end-to-end tests? · tests ✔ Add a GitHub Actions workflow? (y/N) · false ✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
インストール完了後は以下のコマンドでend-to-endテストを実行できます。
npx playwright test
実行結果のレポートを見るには「show-report」を実行します。
npx playwright show-report
インストール完了後、testsディレクトリにexample.spec.jsが入っているので、実行例をすぐに確認できます。
すでにあるプロジェクトフォルダ内にインストールする場合は以下のコマンドを実行します。
npm i -D playwright
Node.jsで実行するJavaScriptの書き方
Node.jsで実行するJavaScriptのコードを作成する場合は、以下のように書きます。
import { chromium, devices } from 'playwright'
import assert from 'node:assert'
;(async () => {
const browser = await chromium.launch()
const context = await browser.newContext(devices['iPhone 11'])
const page = await context.newPage()
await context.route('**.jpg', (route) => route.abort())
await page.goto('https://example.com/')
// 「Example Domain」が表示されます
console.log(await page.title())
// trueなので何も発生しない
assert((await page.title()) === 'Example Domain')
// スクリーンショットを取得
await page.screenshot({ path: 'screenshot.png' })
await context.close()
await browser.close()
})()
sample.mjsのようなファイル名で保存したら、以下のコマンドで実行できます。
node sample.mjs
iPhone 11で起動してWebページのタイトルのチェックとスクリーンショットの保存をしています。
iPhone 11以外のデバイスはdeviceDescriptorsSource.jsonに記載されています。
iPhone 5などの古すぎるデバイスはPuppeteerと違って存在しません。
Puppeteerのコードに似ていますが、Puppeteerと互換性はありません。
ブラウザの切り替え方法
前述のコードはChromiumを使用していますが、FirefoxやWebKit (Safari) も以下のようにインポートすれば使用可能です。
import { firefox } from 'playwright'
;(async () => {
const browser = await firefox.launch()
// 中略
await browser.close()
})()
import { webkit } from 'playwright'
;(async () => {
const browser = await webkit.launch()
// 中略
await browser.close()
})()
3ブラウザで実行する場合は以下のようになります。
import { chromium, firefox, webkit } from 'playwright'
;(async () => {
const browsers = [chromium, firefox, webkit]
await Promise.all(
browsers.map(async (browser) => {
const launchBrowser = await browser.launch()
const context = await launchBrowser.newContext()
const page = await context.newPage()
await page.goto('https://example.com/')
console.log(await page.title())
await launchBrowser.close()
})
)
})()
ちなみにChromiumはChrome or Microsoft Edgeですが、明確に分ける場合はchannelオプションを使って「chrome」または「msedge」を指定して下さい。
※ Chrome および Microsoft Edge のブラウザがインストールされている必要があります。
const browser = await chromium.launch({
channel: 'chrome'
})
const browser = await chromium.launch({
channel: 'msedge'
})
