From 2674530cda3b320f3dc5e4451d86f6c9f67bbb7b Mon Sep 17 00:00:00 2001 From: Hiroshiba Date: Sat, 1 Mar 2025 22:17:14 +0900 Subject: [PATCH] =?UTF-8?q?refactor(test):=20playwright=E3=83=86=E3=82=B9?= =?UTF-8?q?=E3=83=88=E3=81=AE=E5=85=B1=E9=80=9A=E9=83=A8=E5=88=86=E3=82=92?= =?UTF-8?q?=E5=B0=91=E3=81=97=E3=83=AA=E3=83=95=E3=82=A1=E3=82=AF=E3=82=BF?= =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0=E3=80=81=E6=AD=8C=E8=A9=9E=E7=B7=A8?= =?UTF-8?q?=E9=9B=86=E3=83=86=E3=82=B9=E3=83=88=E3=81=AE=E7=A7=BB=E5=8B=95?= =?UTF-8?q?=20(#2562)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...3\202\275\343\203\263\343\202\260.spec.ts" | 45 +------- .../song/\346\255\214\350\251\236.spec.ts" | 42 +++++++ tests/e2e/navigators.ts | 107 ++++++++++-------- 3 files changed, 100 insertions(+), 94 deletions(-) create mode 100644 "tests/e2e/browser/song/\346\255\214\350\251\236.spec.ts" diff --git "a/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts" "b/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts" index 06f346400b..2ccf4d0442 100644 --- "a/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.spec.ts" +++ "b/tests/e2e/browser/song/\343\202\275\343\203\263\343\202\260.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/\346\255\214\350\251\236.spec.ts" "b/tests/e2e/browser/song/\346\255\214\350\251\236.spec.ts" new file mode 100644 index 0000000000..2bf8486f1c --- /dev/null +++ "b/tests/e2e/browser/song/\346\255\214\350\251\236.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 index 614a16e612..20a0fbbe1a 100644 --- 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 { + 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 { + 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(); + }); }