● コンテキストのクローズ

context.close() は、ベストプラクティスとして明示的に呼ぶことが推奨されています。 page.close() は自動的に呼ばれるのでわざわざ呼ばなくてもOKです

// 省略していい await page.close();
await context.close();

● 純粋に 20秒待ちたい

const context = await browser.newContext();
const page = await context.newPage();
await page.goto('/foo/bar');
await page.waitForTimeout(20000);

● reactなど非同期に描画されるボタンを確実に押す

Reactなどで非同期に描画されるボタンは、タイミングによってクリックに失敗することがあります。 そんなときは expect().toPass() が便利です。

await expect(async () => {
  await page.getByRole("button", { name: "保存" }).click();
}).toPass();

toPass() は、コールバック内の処理が成功するまで一定時間（1回目:100sec, 2回目:250sec, 3回目:500sec, 4回目以降:1000sec 間隔）リトライしてくれます。

そのため、

• Reactでボタンが少し遅れて表示される
• API完了後にクリック可能になる
• アニメーション終了後に操作したい

といったケースで、waitForTimeout() を書かずに安定したテストを書けます。

● 取得した要素のHTMLを確認する

const h1 = page.locator('h1');
console.log(await h1.evaluate(el => el.outerHTML));

● ブラウザの種類

https://github.com/microsoft/playwright/blob/d3d436d3/packages/playwright-core/src/server/deviceDescriptorsSource.json#L1188-L1202