refactor(test): playwrightテストの共通部分を少しリファクタリング、歌詞編集テストの移動 (#2562)

VOICEVOX · Mar 1, 2025 · 2674530 · 2674530
1 parent 191abb6
commit 2674530
Show file tree

Hide file tree

Showing 3 changed files with 100 additions and 94 deletions.
diff --git a/tests/e2e/browser/song/ソング.spec.ts b/tests/e2e/browser/song/ソング.spec.ts
@@ -1,15 +1,9 @@
 import { test, expect, Page } from "@playwright/test";
 
-import { gotoHome, navigateToMain } from "../../navigators";
+import { gotoHome, navigateToSong } from "../../navigators";
 
 test.beforeEach(gotoHome);
 
-async function navigateToSong(page: Page) {
-  await navigateToMain(page);
-  await expect(page.getByText("ソング")).toBeVisible();
-  await page.getByText("ソング").click();
-}
-
 async function getCurrentPlayhead(page: Page) {
   const boundingBox = await page
     .getByTestId("sequencer-playhead")
@@ -58,40 +52,3 @@ test("ノートを追加・削除できる", async ({ page }) => {
   await page.keyboard.press("Delete");
   expect(await getCurrentNoteCount()).toBe(0);
 });
-
-test("ダブルクリックで歌詞を編集できる", async ({ page }) => {
-  await navigateToSong(page);
-
-  const sequencer = page.getByLabel("シーケンサ");
-
-  const getCurrentNoteLyric = async () =>
-    await sequencer.locator(".note-lyric").first().textContent();
-
-  // ノートを追加し、表示されるまで待つ
-  await sequencer.click({ position: { x: 107, y: 171 } });
-  await page.waitForSelector(".note");
-
-  // ノートの歌詞を取得
-  const note = sequencer.locator(".note").first();
-  const beforeLyric = await getCurrentNoteLyric();
-
-  // ノートをダブルクリックし、入力フィールドが表示されるまで待つ
-  await note.dblclick();
-  await page.waitForSelector(".lyric-input");
-
-  // 歌詞を入力し、Enterキーを押す
-  const lyricInput = sequencer.locator(".lyric-input");
-  await lyricInput.fill("あ");
-  await lyricInput.press("Enter");
-
-  // 変更が反映されるまで待つ
-  await page.waitForFunction(() => {
-    const lyricElement = document.querySelector(".note-lyric");
-    return lyricElement && lyricElement.textContent === "あ";
-  });
-
-  // 歌詞が変更されたことを確認
-  const afterLyric = await getCurrentNoteLyric();
-  expect(afterLyric).not.toEqual(beforeLyric);
-  expect(afterLyric).toEqual("あ");
-});
diff --git a/tests/e2e/browser/song/歌詞.spec.ts b/tests/e2e/browser/song/歌詞.spec.ts
@@ -0,0 +1,42 @@
+import { test, expect } from "@playwright/test";
+
+import { gotoHome, navigateToSong } from "../../navigators";
+
+test.beforeEach(gotoHome);
+
+test("ダブルクリックで歌詞を編集できる", async ({ page }) => {
+  await navigateToSong(page);
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  const getCurrentNoteLyric = async () =>
+    await sequencer.locator(".note-lyric").first().textContent();
+
+  // ノートを追加し、表示されるまで待つ
+  await sequencer.click({ position: { x: 107, y: 171 } });
+  await page.waitForSelector(".note");
+
+  // ノートの歌詞を取得
+  const note = sequencer.locator(".note").first();
+  const beforeLyric = await getCurrentNoteLyric();
+
+  // ノートをダブルクリックし、入力フィールドが表示されるまで待つ
+  await note.dblclick();
+  await page.waitForSelector(".lyric-input");
+
+  // 歌詞を入力し、Enterキーを押す
+  const lyricInput = sequencer.locator(".lyric-input");
+  await lyricInput.fill("あ");
+  await lyricInput.press("Enter");
+
+  // 変更が反映されるまで待つ
+  await page.waitForFunction(() => {
+    const lyricElement = document.querySelector(".note-lyric");
+    return lyricElement && lyricElement.textContent === "あ";
+  });
+
+  // 歌詞が変更されたことを確認
+  const afterLyric = await getCurrentNoteLyric();
+  expect(afterLyric).not.toEqual(beforeLyric);
+  expect(afterLyric).toEqual("あ");
+});
diff --git a/tests/e2e/navigators.ts b/tests/e2e/navigators.ts
@@ -1,66 +1,73 @@
-import { expect, Page } from "@playwright/test";
+import { expect, Locator, Page, test } from "@playwright/test";
 import { getNewestQuasarDialog, getQuasarMenu } from "./locators";
 
-/**
- * 最初の画面に移動
- */
 export async function gotoHome({ page }: { page: Page }) {
-  const BASE_URL = "http://localhost:7357/";
-  await page.setViewportSize({ width: 1024, height: 630 });
-  await page.goto(BASE_URL);
+  await test.step("最初の画面に移動", async () => {
+    const BASE_URL = "http://localhost:7357/";
+    await page.setViewportSize({ width: 1024, height: 630 });
+    await page.goto(BASE_URL);
+  });
 }
 
-/**
- * 初回起動時の確認を完了してメイン画面に移動
- */
 export async function navigateToMain(page: Page) {
-  await expect(page.getByText("利用規約に関するお知らせ")).toBeVisible({
-    timeout: 90 * 1000,
+  await test.step("初回起動時の確認を完了してメイン画面に移動", async () => {
+    await expect(page.getByText("利用規約に関するお知らせ")).toBeVisible({
+      timeout: 90 * 1000,
+    });
+    await page.waitForTimeout(100);
+    await page.getByRole("button", { name: "同意して使用開始" }).click();
+    await page.waitForTimeout(100);
+    await page.getByRole("button", { name: "完了" }).click();
+    await page.waitForTimeout(100);
+    await page.getByRole("button", { name: "許可" }).click();
+    await page.waitForTimeout(100);
   });
-  await page.waitForTimeout(100);
-  await page.getByRole("button", { name: "同意して使用開始" }).click();
-  await page.waitForTimeout(100);
-  await page.getByRole("button", { name: "完了" }).click();
-  await page.waitForTimeout(100);
-  await page.getByRole("button", { name: "許可" }).click();
-  await page.waitForTimeout(100);
 }
 
-/**
- * 特定の設定をトグルする
- */
 export async function toggleSetting(page: Page, settingName: string) {
-  await page.getByRole("button", { name: "設定" }).click();
-  await page.waitForTimeout(100);
-  await page.getByText("オプション").click();
-  await page.waitForTimeout(100);
-  await page
-    .locator(".row-card", {
-      has: page.getByText(settingName),
-    })
-    .click();
-  await page.waitForTimeout(100);
-  await page.getByRole("button", { name: "設定を閉じる" }).click();
+  await test.step(`設定 ${settingName} をトグルする`, async () => {
+    await page.getByRole("button", { name: "設定" }).click();
+    await page.waitForTimeout(100);
+    await page.getByText("オプション").click();
+    await page.waitForTimeout(100);
+    await page
+      .locator(".row-card", {
+        has: page.getByText(settingName),
+      })
+      .click();
+    await page.waitForTimeout(100);
+    await page.getByRole("button", { name: "設定を閉じる" }).click();
+  });
   await page.waitForTimeout(500);
 }
 
-/**
- * ヘルプダイアログの表示まで移動
- */
-export async function navigateToHelpDialog(page: Page) {
-  await navigateToMain(page);
-  await page.waitForTimeout(100);
-  await page.getByRole("button", { name: "ヘルプ" }).click();
-  return getNewestQuasarDialog(page);
+export async function navigateToHelpDialog(page: Page): Promise<Locator> {
+  return await test.step("ヘルプダイアログの表示まで移動", async () => {
+    await navigateToMain(page);
+    await page.waitForTimeout(100);
+    await page.getByRole("button", { name: "ヘルプ" }).click();
+    return getNewestQuasarDialog(page);
+  });
+}
+
+export async function navigateToSettingDialog(page: Page): Promise<Locator> {
+  return await test.step("設定ダイアログの表示まで移動", async () => {
+    await navigateToMain(page);
+    await page.waitForTimeout(100);
+    await page.getByRole("button", { name: "設定" }).click();
+    await getQuasarMenu(page, "オプション").click();
+    return getNewestQuasarDialog(page);
+  });
 }
 
-/**
- * 設定ダイアログの表示まで移動
- */
-export async function navigateToSettingDialog(page: Page) {
-  await navigateToMain(page);
-  await page.waitForTimeout(100);
-  await page.getByRole("button", { name: "設定" }).click();
-  await getQuasarMenu(page, "オプション").click();
-  return getNewestQuasarDialog(page);
+export async function navigateToSong(page: Page) {
+  await test.step("ソング画面に移動", async () => {
+    await navigateToMain(page);
+    await expect(page.getByText("ソング")).toBeVisible();
+    await page.getByText("ソング").click();
+
+    // 見やすいようにスナップを1/8に変更
+    await page.getByLabel("スナップ").click();
+    await page.getByRole("option", { name: "1/8", exact: true }).click();
+  });
 }