起こったこと

Playwrightで遷移先ページのタイトルを評価しようとしたら成功したり失敗したりとフレイキーなテストになってしまった。

Version

    "@playwright/test": "^1.28.1"

コード

対象HTML

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>test</title>
</head>

<body>
  <main>
    <a href="https://ja.wikipedia.org/wiki/%E5%8F%8D%E5%B0%84%E6%98%9F%E9%9B%B2" target="_blank">反射星雲</a>
  </main>
</body>

</html>

Playwrightでは

import { test, expect } from "@playwright/test";

// baseUrlはlocalhostが設定されている
test("Wikipediaへ別タブで遷移する", async ({ page }) => {
  await page.goto("/link.html");
  const [page1] = await Promise.all([
    page.waitForEvent("popup"),
    page.getByRole("link", { name: "反射星雲" }).click(),
  ]);
  expect(await page1.title()).toBe("反射星雲 - Wikipedia");
});

たまにfailする

こうした

DOMがロードされるのを待つようにした

import { test, expect } from "@playwright/test";

// baseUrlはlocalhostが設定されている
test("Wikipediaへ別タブで遷移する", async ({ page }) => {
  await page.goto("/link.html");
  const [page1] = await Promise.all([
    page.waitForEvent("popup"),
    page.getByRole("link", { name: "反射星雲" }).click(),
  ]);
  await page.waitForLoadState("domcontentloaded"); // ここを追加
  expect(await page1.title()).toBe("反射星雲 - Wikipedia");
});