Closed4

新しいPlaywrightテストランナーを試す

Yusuke IwakiYusuke Iwaki

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 にする必要がある!

sample_e2e.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をつけ忘れると、なんかうまくアサーションしてくれなくてハマる

Yusuke IwakiYusuke Iwaki

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 にあるように、スクショやビデオはデフォルトでオフなので、

playwright.config.ts
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でやってくれるのはとてもありがたい。

Yusuke IwakiYusuke Iwaki

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になっている。

このスクラップは2021/08/25にクローズされました