📷
@playwright/testでビジュアルリグレッションテストを導入する
ビジュアルリグレッションテストとは
ピクセルマッチで差分がないか検証してくれる
playwrightのドキュメントタイトルはVisual comparisonsとある
シンプルなサンプルコード
example.spec.ts
import { test, expect } from '@playwright/test'
test('こんにちは世界', async ({ page }) => {
await page.goto('http://localhost:3000/')
await expect(page).toHaveScreenshot({fullPage: true, scale: 'device', animations: 'disabled'})
})
差分が発生した場合のレポートスクショ
Dockerでupdate-snapshotsを実行する
$ docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.24.0-focal /bin/bash
$ yarn install --frozen-lockfile
$ npx playwright test --update-snapshots
Dockerを使用する理由
- darwin.pngのように実行環境によって名称が変わるようになっている
- 今回のサンプルコードを仮にmacOSで実行すると、初回であればテストが失敗し、
tests/example.spec.ts-snapshots/こんにちは世界-1-chromium-darwin.pngというファイルが生成される - 今回使用する
mcr.microsoft.com/playwright:v1.24.0-focalはUbuntu 20.04.4 LTSで、実行するとtests/example.spec.ts-snapshots/こんにちは世界-1-chromium-linux.pngとなる
- 今回のサンプルコードを仮にmacOSで実行すると、初回であればテストが失敗し、
- 実行環境のフォントによって表示が異なる
- GitHub Actionsでubuntuを選択した場合に、自分が試したときにはフォントの表示がTofuになっていた
GitHub Actionsで実行する
playwright.yml
name: Playwright Tests
on:
push:
branches: [ main ]
jobs:
e2e:
runs-on: ubuntu-latest
container:
image: mcr.microsoft.com/playwright:v1.24.0-focal
steps:
- uses: actions/checkout@v3
- run: yarn install --frozen-lockfile
- run: npx playwright test
- uses: actions/upload-artifact@v2
if: success() || failure()
with:
name: playwright-report
path: playwright-report/
retention-days: 30
実装サンプル
関連記事
Discussion