新しいPlaywrightテストランナーを試す
リリースノートに書いてあること
-
https://playwright.dev/docs/release-notes/#version-112
- 1.12でplaywrightテストランナーをフルスクラッチで作り直したらしい
-
https://playwright.dev/docs/release-notes/#version-113
- 1.13でAllute report対応
-
https://playwright.dev/docs/release-notes/#version-114
- 1.14で「Web first」ということで、便利なマッチャーが多数追加された
playwrightテストランナーの始め方
https://playwright.dev/docs/intro#first-test はnpmを使っているが、当然yarnでもおk
$ yarn add @playwright/test
$ yarn run playwright install
playwright.devでのサンプルはTypeScriptが使われているが、JavaScriptでも十分に補完が効いてめっちゃ書きやすいぞ。
↑のスクショはまちがってるんだけど、ファイル名は **_test.js
ではだめで、 **.test.js
にする必要がある!
const { test, expect } = require('@playwright/test')
test('playwright.dev', async ({ page }) => {
await page.goto('https://playwright.dev/')
await expect(page.locator('h1 >> nth=0')).toHaveText(/Playwright/)
})
$ yarn run playwright test
yarn run v1.22.10
warning package.json: No license field
$ /Users/yusuke-iwaki/Desktop/pl-test/node_modules/.bin/playwright test
Running 1 test using 1 worker
✓ sample_e2e.test.js:3:1 › playwright.dev (2s)
1 passed (2s)
✨ Done in 3.15s.
ちなみに、awaitをつけ忘れると、なんかうまくアサーションしてくれなくてハマる
Allureレポート対応
allure-playwrightをインストール
$ yarn add allure-playwright
テスト実行時に --report
指定をする
$ yarn run playwright test --reporter=line,allure-playwright
レポートの閲覧は allure serve
$ allure serve allure-results/
わざと落ちるようにテストコードを書き換えてみると、↓こんな見た目になる。
スクショやビデオなどを付ける
https://playwright.dev/docs/test-configuration/#automatic-screenshots にあるように、スクショやビデオはデフォルトでオフなので、
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
use: {
screenshot: 'on',
video: 'retain-on-failure',
trace: 'on',
},
}
export default config
こんなかんじのconfigを置いて、再度 yarn run playwright test --reporter=line,allure-playwright
すると、Allure report上にテスト過程やスクショなどが貼られる。playwright-pytestだとこのあたりが手動で結構めんどうだったので、configでやってくれるのはとてもありがたい。
HTMLレポート(開発中の機能?)
Playwright 1.14.1現在、ビルトインされていないHtmlReporterというのがあって、失敗時のスクリーンショットやビデオを保存する機能などが入っている。今後はおそらくこれがメインになっていきそうな雰囲気。
./node_modules/@playwright/test/lib/test/runner.js
を
var _json = _interopRequireDefault(require("./reporters/json"));
var _html = _interopRequireDefault(require("./reporters/html"));
などなど、3箇所くらいゴニョゴニョするとHtmlReporterが使える。きっとPlaywright 1.15くらいで正式リリースされるのだろう。
テスト実行と同時にTracingが走っているようで、どこでどのくらいの時間をかけているか見るレポートUIになっている。