JSのモーダル(prompt)に入力したい

Version情報

"typescript": "^4.7.4"
"@playwright/test": "^1.22.2"

起こったこと

特定のものを削除する際によく出る「deleteと入力してください」のあれをE2Eテストしようとしたらなんかうまくいかなかった。

こんな感じ

  <main>
    <div>
      <p id="test-text">この文字が邪魔なので消したい</p>
      <button id="delete">削除</button>
    </div>
  </main>

const deleteButton = document.getElementById("delete");

deleteButton?.addEventListener("click", async () => {
  const result = prompt("削除したければdeleteと入力してください", "");
  if (result && /delete/.test(result)) {
    deleteSome();
    alert("成功");
  } else {
    alert("失敗");
  }
});

const deleteSome = () => {
  const test = document.getElementById("test-text") as HTMLParagraphElement;
  test.innerText = "-";
};

テストコードはこんな感じ

test("delete test", async ({ page }) => {
  await page.goto("/");
  await page.click('text="削除"');
  await expect(page.locator("#test-text")).toHaveText("-");
});

公式にあった

playwright.dev

こんな感じにした

test("delete test", async ({ page }) => {
  await page.goto("/");
  page.on("dialog", async (dialog) => {
    await dialog.accept("delete");
  });
  await page.click('text="削除"');
  await expect(page.locator("#test-text")).toHaveText("-");
});

page.on("dialog", callback)がpage.click()より手前に記述されているところに注目。