PlaywrightでVisualRegressionTest

とりあえず使ってみたかったので適当なプロジェクトで使ってみた

yarn create playwright

いくつか質問されて答える

依存入れるか?とかはYにした

ひな型が作られる

npx playwright test

サンプルのテストが動く

Visual comparisons | Playwright

playwright.dev

npx playwright show-report

レポートが9323ポートでサーブして表示される

割と簡素

VRT実行してみる

snapshotイメージを取って過去分と比較するメソッドがあるのでそれを使う

Visual comparisons | Playwright

playwright.dev

今回はswfz/deno-terminal-imageでVRTのテストコードを書いた

内容としては、URLのパラメータによってCanvasに描画する内容を変えるというものなのでアクセス時のパラメータをいくつか用意して見た目が変化してないかをチェックするのが目的

http://localhost:8080にあらかじめテスト対象のサーバを立ち上げておく必要がある

サンプル(一部抜粋)

import { test, expect } from '@playwright/test';

test('Empty Parameter', async ({ page }) => {
  await page.goto('http://localhost:8080');
  await expect(page).toHaveScreenshot();
});

test('Top StatusLine', async ({ page }) => {
  await page.goto('http://localhost:8080?title=Terminal%20Image%20URL%20Generatorのテスト中&top_line_texts=ブログ,Author,他,test');
  await expect(page).toHaveScreenshot();
});

yarn playwright test

初回実行ではエラーで怒られる

Error: A snapshot doesn't exist at /home/user/gh/til-ogp/e2e/tests/example.spec.ts-snapshots/example-test-1-chromium-linux.png, writing actual.

--update-snapshotsオプションを渡して更新する

画像度の保存先ディレクトリはドキュメントにも書いてあるように${filename}-snapshots/ 以下に格納される

${test name}-${n}-${browser}-${os}.png

playwrightのテストで失敗するとレポートを生成してサーブしてブラウザで開くところまでやってくれる(playwright show-reportを実行してくれる)

Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

これは良い

失敗したとき

差分を表示してくれる

これはわかりやすい！

CI

Continuous Integration | Playwright

playwright.dev

初期設定でplaywright用のCI設定が追加されている

master, mainにマージされたときのみって感じらしい、まぁそれ以外も対象にするとリソース消費それなりにあるからだろう

今回いれたプロジェクトではまだそんなに時間取らないだろうということで、PullRequest、Push時でブランチ指定なしで実行にした

denoのプロジェクトだったのでサブディレクトリ切ってplaywrightのためだけに色々やっている

deno-terminal-image/.github/workflows/vrt.yml at main · swfz/deno-terminal-image

github.com

レポート

CIでは、レポートをartifactに入れておけばGitHubのCLIからDLして確認できる

インタラクティブにrunを指定する

$ gh run download
? Select artifacts to download:  [Use arrows to move, space to select, <right> to all, <left> to none, type to filter]
> [ ]  playwright-report
artifacts to download: playwright-report

実行時にrun idを指定する

$ gh run download ${run_id}

蛇足だが、run idの取得はzshのフックを使ってCtrl+g+rでrunのidとリストを表示してpecoでフィルタリングするようにしている

# gh run のリストからIDを選択
function peco-gh-run () {
  local runs="$(gh run list | peco | awk -F'[ ]' 'BEGIN{FS="\t"}{print $7}')"
  peco-p ${runs}
}
zle -N peco-gh-run
bindkey '^gr' peco-gh-run