📷

@playwright/testでビジュアルリグレッションテストを導入する

2022/08/02に公開

ビジュアルリグレッションテストとは

ピクセルマッチで差分がないか検証してくれる
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を使用する理由

  1. 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となる
  2. 実行環境のフォントによって表示が異なる
    • 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

実装サンプル

https://github.com/aokiken/playwright-vrt-example

関連記事

https://playwright.dev/docs/test-snapshots
https://playwright.dev/docs/docker
https://docs.github.com/ja/actions/using-github-hosted-runners/about-github-hosted-runners
https://playwright.dev/docs/ci

Discussion