Add: VRTを追加

.github/workflows/test.yml

@@ -84,16 +84,34 @@ jobs:
           sed -i -e 's|"executionArgs": \[\],|"executionArgs": ["--port=50021"],|' .env.test
           cp .env.test .env
 
+      - name: Check if commit message includes [update snapshots]
+        id: check-whether-to-update-snapshots
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          script: |
+            const commits = ${{ toJson(github.event.commits) }};
+            if (!commits) {
+              // pull_request などでコミットがない場合はスキップ
+              core.setOutput("shouldUpdateSnapshots", false);
+              process.exit(0);
+            }
+            const shouldUpdateSnapshots = commits.some((commit) =>
+              commit.message.toLowerCase().includes("[update snapshots]")
+            );
+            core.setOutput("shouldUpdateSnapshots", shouldUpdateSnapshots);
+            console.log(`shouldUpdateSnapshots: ${shouldUpdateSnapshots}`);
+
       - name: Run npm run test:browser-e2e
         run: |
           if [ -n "${{ runner.debug }}" ]; then
             export DEBUG="pw:browser*"
           fi
-          if [[ ${{ matrix.os }} == ubuntu-* ]]; then
-            xvfb-run --auto-servernum npm run test:browser-e2e
-          else
-            npm run test:browser-e2e
+          ARGS=""
+          if [[ ${{ steps.check-whether-to-update-snapshots.outputs.shouldUpdateSnapshots }} == 'true' ]]; then
+            ARGS="--update-snapshots"
           fi
+          npm run test:browser-e2e -- $ARGS
 
       - name: Run npm run test:electron-e2e
         run: |
@@ -110,9 +128,44 @@ jobs:
         if: failure()
         uses: actions/upload-artifact@v3
         with:
-          name: playwright-report
+          name: playwright-report-${{ matrix.os }}
           path: playwright-report
 
+      - name: Upload updated snapshots to artifact
+        if: steps.check-whether-to-update-snapshots.outputs.shouldUpdateSnapshots == 'true'
+        uses: actions/upload-artifact@v4
+        with:
+          name: updated-snapshots-${{ matrix.os }}
+          path: tests/e2e/browser/*-snapshots/*
+
+  commit-snapshots:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    needs:
+      - e2e-test
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Download artifacts
+        uses: actions/download-artifact@v4
+        with:
+          pattern: updated-snapshots-*
+          path: tests/e2e/browser
+          merge-multiple: true
+
+      - name: Commit updated snapshots
+        run: |
+          git config --global user.name "github-actions[bot]"
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          if [ -n "$(git status --porcelain)" ]; then
+            git add tests/e2e/browser
+            git commit -m "（スナップショットを更新）"
+            git push
+          else
+            echo "No changes to commit"
+          fi
+
   lint:
     runs-on: ubuntu-latest
     steps:

README.md

@@ -113,6 +113,21 @@ npx playwright codegen http://localhost:5173/#/home  --viewport-size=800,600
 
 詳細は [Playwright ドキュメントの Test generator](https://playwright.dev/docs/codegen-intro) を参照してください。
 
+#### スクリーンショットの更新
+
+ブラウザ End to End テストでは Visual Regression Testing を行っています。
+以下の手順でスクリーンショットを更新できます：
+
+1. フォークしたリポジトリの設定で GitHub Actions を有効にします。
+2. リポジトリの設定の Actions > General > Workflow permissions で Read and write permissions を選択します。
+3. `[update snapshots]` という文字列をコミットメッセージに含めてコミットします。
+
+   ```bash
+   git commit -m "UIを変更 [update snapshots]"
+   ```
+
+4. Github Workflow が完了すると、更新されたスクリーンショットがコミットされます。
+
 ### Electron End to End テスト
 
 Electron の機能が必要な、エンジン起動・終了などを含めた End to End テストを実行します。

package.json

@@ -70,7 +70,7 @@
   },
   "devDependencies": {
     "@openapitools/openapi-generator-cli": "2.7.0",
-    "@playwright/test": "1.39.0",
+    "@playwright/test": "1.40.1",
     "@quasar/vite-plugin": "1.3.0",
     "@types/async-lock": "1.4.0",
     "@types/clone-deep": "4.0.1",

playwright.config.ts

@@ -60,6 +60,9 @@ const config: PlaywrightTestConfig = {
      * For example in `await expect(locator).toHaveText();`
      */
     timeout: 5 * 1000,
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.001,
+    },
   },
   // ファイルシステムが関連してくるので、Electronテストでは並列化しない
   fullyParallel: !isElectron,

tests/e2e/browser/スクリーンショット.spec.ts

@@ -0,0 +1,142 @@
+import path from "path";
+import fs from "fs/promises";
+import { test, expect } from "@playwright/test";
+import { gotoHome, navigateToMain } from "../navigators";
+import {
+  Speaker,
+  SpeakerFromJSON,
+  SpeakerInfo,
+  SpeakerInfoFromJSON,
+  SpeakerInfoToJSON,
+  SpeakerToJSON,
+} from "@/openapi";
+
+let speakerImages: {
+  portrait: string;
+  icon: string;
+}[];
+
+/**
+ * 差し替え用の立ち絵・アイコンを取得する。
+ */
+async function getSpeakerImages(): Promise<
+  {
+    portrait: string;
+    icon: string;
+  }[]
+> {
+  if (!speakerImages) {
+    const assetsPath = path.resolve(__dirname, "assets");
+    const images = await fs.readdir(assetsPath);
+    const icons = images.filter((image) => image.startsWith("icon"));
+    icons.sort(
+      (a, b) =>
+        parseInt(a.split(".")[0].split("_")[1]) -
+        parseInt(b.split(".")[0].split("_")[1])
+    );
+    speakerImages = await Promise.all(
+      icons.map(async (iconPath) => {
+        const portraitPath = iconPath.replace("icon_", "portrait_");
+        const portrait = await fs.readFile(
+          path.join(assetsPath, portraitPath),
+          "base64"
+        );
+        const icon = await fs.readFile(
+          path.join(assetsPath, iconPath),
+          "base64"
+        );
+
+        return { portrait, icon };
+      })
+    );
+  }
+  return speakerImages;
+}
+
+test.beforeEach(async ({ page }) => {
+  let speakers: Speaker[];
+  const speakerImages = await getSpeakerImages();
+  // Voicevox Nemo EngineでもVoicevox Engineでも同じ結果が選られるように、
+  // GET /speakers、GET /speaker_infoの話者名、スタイル名、画像を差し替える。
+  await page.route(/\/speakers$/, async (route) => {
+    const response = await route.fetch();
+    const json: Speaker[] = await response
+      .json()
+      .then((json) => json.map(SpeakerFromJSON));
+    let i = 0;
+    for (const speaker of json) {
+      i++;
+      speaker.name = `Speaker ${i}`;
+      let j = 0;
+      for (const style of speaker.styles) {
+        j++;
+        style.name = `Style ${i}-${j}`;
+      }
+    }
+    speakers = json;
+    await route.fulfill({
+      status: 200,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(json.map(SpeakerToJSON)),
+    });
+  });
+  await page.route(/\/speaker_info\?/, async (route) => {
+    if (!speakers) {
+      // Unreachableのはず
+      throw new Error("speakers is not initialized");
+    }
+    const url = new URL(route.request().url());
+    const speakerUuid = url.searchParams.get("speaker_uuid");
+    if (!speakerUuid) {
+      throw new Error("speaker_uuid is not set");
+    }
+    const response = await route.fetch();
+    const json: SpeakerInfo = await response.json().then(SpeakerInfoFromJSON);
+    const speakerIndex = speakers.findIndex(
+      (speaker) => speaker.speakerUuid === speakerUuid
+    );
+    if (speakerIndex === -1) {
+      throw new Error(`speaker_uuid=${speakerUuid} is not found`);
+    }
+    const image = speakerImages[speakerIndex % speakerImages.length];
+    json.portrait = image.portrait;
+    for (const style of json.styleInfos) {
+      style.icon = image.icon;
+      if ("portrait" in style) {
+        delete style.portrait;
+      }
+    }
+    await route.fulfill({
+      status: 200,
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(SpeakerInfoToJSON(json)),
+    });
+  });
+});
+test.beforeEach(gotoHome);
+
+test("メイン画面の表示", async ({ page }) => {
+  test.skip(process.platform !== "win32", "Windows以外のためスキップします");
+  await navigateToMain(page);
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    await page.locator(".audio-cell:nth-child(1) .q-field").click();
+    await page.waitForTimeout(100);
+    if (
+      (await page
+        .locator(".character-portrait-wrapper .character-name")
+        .innerText()) !== "（表示エラー）" &&
+      (await page.locator(".character-portrait-wrapper .loading").count()) === 0
+    ) {
+      break;
+    }
+  }
+  await expect(page).toHaveScreenshot("メイン画面.png");
+});