動的なページをpage.$でDOMを取ろうとするとうまくいったりいかなかったりした

version情報

Ubuntu: 20.04
"@playwright/test": "1.22.2"
node: v16.15.1

起こったこと

動的なHTML要素をpage.$(QUERY)でとろうとしたら、Chromiumだけエラーになったりした。

<!--HTML-->
<div id="add">
</div>

const add = document.querySelector("#add") as HTMLDivElement;
setTimeout(() => {
  add.innerHTML = `<div><span data-name="momo">ももたろう</span><span data-name="kin">きんたろう</span></div>`;
}, 100);

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

test("should show $ case1", async ({ page }) => {
  await page.goto("/");
  const momotarou = await page.$(`[data-name="momo"]`);
  expect(await momotarou?.innerText()).toBe("ももたろう");
  const kintarou = await page.$(`[data-name="kin"]`);
  expect(await kintarou?.innerText()).toBe("きんたろう");
});

Error: expect(received).toBe(expected) // Object.is equality

Expected: "ももたろう"
Received: undefined

  4 |   await page.goto("/");
  5 |   const momotarou = await page.$(`[data-name="momo"]`);
> 6 |   expect(await momotarou?.innerText()).toBe("ももたろう");
    |                                        ^
  7 |   const kintarou = await page.$(`[data-name="kin"]`);
  8 |   expect(await kintarou?.innerText()).toBe("きんたろう");
  9 | });

    at /home/kuzunoha/project/playwright_test/tests/index.spec.ts:6:40

$だと動的な要素を取るの大変みたい

よくわからんけどpage.$だと動的なのを取るのがうまくいかないケースがありそう。

chromiumだけエラーになるパターンや、firefox,webkitもダメなパターンがあった。

page.locatorを使ったら安定した

page.locatorを使ったら安定した。

test("should show $ case2", async ({ page }) => {
  await page.goto("/");
  const momotarou = page.locator(`[data-name="momo"]`);
  expect(await momotarou?.innerText()).toBe("ももたろう");
  const kintarou = page.locator(`[data-name="kin"]`);
  expect(await kintarou?.innerText()).toBe("きんたろう");
});