ソング関連のe2eテストを追加

src/components/Sing/ScoreSequencer.vue

@@ -18,6 +18,7 @@
     <div
       ref="sequencerBody"
       class="sequencer-body"
+      aria-label="シーケンサ"
       @mousedown="onMouseDown"
       @mousemove="onMouseMove"
       @mouseup="onMouseUp"
@@ -147,6 +148,7 @@
       />
       <div
         class="sequencer-playhead"
+        data-testid="sequencer-playhead"
         :style="{
           transform: `translateX(${playheadX - scrollX}px)`,
         }"

src/components/Sing/SequencerNote.vue

@@ -16,7 +16,11 @@
       <div class="note-right-edge" @mousedown="onRightEdgeMouseDown"></div>
       <context-menu ref="contextMenu" :menudata="contextMenuData" />
     </div>
-    <div class="note-lyric" @mousedown="onLyricMouseDown">
+    <div
+      class="note-lyric"
+      data-testid="note-lyric"
+      @mousedown="onLyricMouseDown"
+    >
       {{ lyric }}
     </div>
     <input

tests/e2e/browser/song/ソング.spec.ts

@@ -0,0 +1,81 @@
+import { test, expect, Page, Locator } from "@playwright/test";
+
+import { gotoHome, navigateToMain } from "../../navigators";
+
+test.beforeEach(gotoHome);
+
+async function navigateToSong(page: Page) {
+  await navigateToMain(page);
+  expect(page.getByText("ソング")).toBeVisible();
+  await page.getByText("ソング").click();
+}
+
+async function getCurrentPlayhead(page: Page) {
+  const boundingBox = await page
+    .getByTestId("sequencer-playhead")
+    .boundingBox();
+  if (boundingBox == null) throw new Error("再生バーが見つかりません");
+  return boundingBox;
+}
+
+test("再生ボタンを押して再生できる", async ({ page }) => {
+  await navigateToSong(page);
+  // TODO: ページ内のオーディオを検出するテストを追加する
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  await sequencer.click({ position: { x: 107, y: 171 } }); // ノートを追加
+  const beforePosition = await getCurrentPlayhead(page); // 再生ヘッドの初期位置
+  await page.getByText("play_arrow").click(); // 再生ボタンを押す
+  await page.waitForTimeout(3000);
+  await page.getByText("stop").click(); // 停止ボタンを押す
+  const afterPosition = await getCurrentPlayhead(page); // 再生ヘッドの再生後の位置
+  expect(afterPosition.x).not.toEqual(beforePosition.x);
+  expect(afterPosition.y).toEqual(beforePosition.y);
+});
+
+test("ノートを追加・削除できる", async ({ page }) => {
+  await navigateToSong(page);
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  const getCurrentNoteCount = async () =>
+    await sequencer.locator(".note").count();
+
+  // ノートの追加
+  expect(await getCurrentNoteCount()).toBe(0);
+  await sequencer.click({ position: { x: 107, y: 171 } });
+  expect(await getCurrentNoteCount()).toBe(1);
+  await sequencer.click({ position: { x: 200, y: 171 } });
+  expect(await getCurrentNoteCount()).toBe(2);
+
+  // ノートの削除
+  expect(await getCurrentNoteCount()).toBe(2);
+  await sequencer.click({ position: { x: 107, y: 171 } });
+  await page.keyboard.press("Delete");
+  expect(await getCurrentNoteCount()).toBe(1);
+  await sequencer.click({ position: { x: 200, y: 171 } });
+  await page.keyboard.press("Delete");
+  expect(await getCurrentNoteCount()).toBe(0);
+});
+
+test("ダブルクリックで歌詞を編集できる", async ({ page }) => {
+  await navigateToSong(page);
+
+  const sequencer = page.getByLabel("シーケンサ");
+
+  const getCurrentNoteLyric = async (note: Locator) =>
+    await note.getByTestId("note-lyric").textContent();
+
+  await sequencer.click({ position: { x: 107, y: 171 } });
+
+  const note = sequencer.locator(".note");
+  const beforeLyric = await getCurrentNoteLyric(note);
+
+  await sequencer.click({ position: { x: 107, y: 171 }, clickCount: 2 }); // ダブルクリック
+
+  await note.getByRole("textbox").fill("あ");
+  await page.keyboard.press("Enter");
+  const afterLyric = await getCurrentNoteLyric(note);
+  expect(afterLyric).not.toEqual(beforeLyric);
+});