Playwrightで遷移先ページのタイトルを評価しようとしたら成功したり失敗したりした

node TypeScript PlayWright

起こったこと

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");
});

安定するようになった。気がする。たまたまフレイキーなテストが成功し続けているだけかもしれない。