概要

Playwright + reg-suitを使ってビジュアルリグレッションテストをやってみます。

E2Eテストでスクリーンショットを撮って前回との比較をします。

インストール

今回の実行環境はUbuntuですが、MacやWindowsでも多少やり方が違いますができますので公式ドキュメントにまず目を通しましょう。

に従ってインストールします。

事前にnodeはインストールしておくこと。

npm init playwright@latest

実行中にいくつか選択肢がでますがほぼデフォルト値で決定しました。

github actionsだけ今回は使う気がなかったのでNoを選択。

依存ライブラリをインストールします。

一旦chromiumで実行するためのものだけにしておきます。

--with-depsオプションをつけなければfirefoxとwebkitで実行するためのものもインストールされます。

npx playwright install --with-deps chromium

実行

npx playwright test

とするとtestsディレクトリ以下のテストが実行されます。

デフォルトでexample.spec.tsができているのでそれが実行されます。

実行が終わるとサーバーが起動して

http://localhost:9323

で結果が見られます。

テストが2つ x ブラウザ3種類の6つのテスト結果が表示されます。

chroniumの依存ライブラリしかインストールしていないのでwebkitとfirefoxのテストが失敗しています。

また起動したサーバーをCtrl + Cで止めたあとでも

npx playwright show-report

で最後の結果を表示できます。

実行時にUI表示

デフォルトだとheadlessで動作しますが目に見えるブラウザを起動したいときは

npx playwright test --ui

実行ブラウザを変える

https://playwright.dev/docs/browsers#configure-browsers

chromiumだけにする

playwright.config.ts を編集してfirefoxとwebkitの部分をコメントアウトすればOK

モバイル表示

iPhone表示にはwebkitが必要です(iPhoneのシミュレーターではなく)

npx playwright install --with-deps webkit

したあとに

playwright.config.ts

のiphoneの部分のコメントアウトを外せばOK

特定のデバイスのみで実行

npx playwright test --project chromium

--projectオプションを使う

reg-suit install

npm install --save reg-suit

npx reg-suit init

どのプラグイン使うか聞かれるので一旦は全部外す

スクリーンショットを撮る

test/example.spec.ts

test('Take photo', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: './ss/example.png', fullPage: true });
});

実行ごとにスクリーンショットのディレクトリを変える

スクリーンショット撮ることはできましたが毎回出力先が同じだと毎回上書きされて残らないので、実行日時 + ブラウザのディレクトリに残るようにします。

npm install --save dayjs

test/config.ts

import { test as base } from '@playwright/test';
import dayjs from 'dayjs';

export type TestOptions = {
  ssDir: string;
};

export const test = base.extend<TestOptions>({
  ssDir: './ss/' + dayjs().format("YYYYMMDDhhmmss") + "/",
});

test/example.spec.ts

import { expect } from '@playwright/test';
import { test } from './config';

test('Take photo', async ({ page, ssDir }, info) => {
  const fileName = "top.png"
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: ssDir + info.project.name + "/" + fileName , fullPage: true });
});

差分検出

2回実行してssディレクトリの下に2つディレクトリができているとすると

npx reg-cli ./ss/20240222022952/ ./ss/20240222022438/ .diff -R ./report.html

みたいにすると差分が検出されます。

CLIに変化があったファイルが表示されますがレポートもreport.htmlに出力されます。

差分表示例(赤く見える場所が差分)

スクリプト

DIR1=`ls -A ./ss | sort | tail -2 | head -1`
DIR2=`ls -A ./ss | sort | tail -1`

npx reg-cli ./ss/${DIR1} ./ss/${DIR2} .diff -R ./report.html
open ./report.html

毎回ディレクトリ指定するのは面倒なので最後の2つを比較しましょう。

やってない

github actionsを使ってgithubで特定のブランチに変更されたときにheadlessでテスト走らせて検知、みたいなこともできますが、今回は任意のタイミングで実行したかったのでやってません。

画像ファイルをS3にアップロードできますが今回はやっていません。(やる場合はreg-publish-s3-pluginを使えばよさそう)

なんじゃくにっき

プログラミングの話題中心。

Playwright + reg-suitでビジュアルリグレッションテスト

概要