TL;DR
Playwrightの思想として、URL遷移や描画は waitForXXX 系を使ってwaitする（timeout系は使わない）
具体的には
- 👎 page.waitForTimeout は使わない
- 👍 page.waitForURL や locator('#hoge').waitFor を使う
※今回試したWebアプリがSPAだったから特にハマったのかも(´・ω・｀)
URL遷移は await page.waitForURL('/hoge') でwaitする
以下の場合には注意が必要
- redirectする場合
- clickなどでページ遷移する場合
redirectする場合
未ログイン状態で / にアクセスすると、/login にリダイレクトする
await page.goto('/')
// 👎 timeoutで待つとflakyになりやすく、時間がかかる
await page.waitForTimeout(3000)
// 👎 redirectを待たずにassertしてfailする
await expect(page).toHaveURL('/login')
// 👍 redirectを待ってくれる
await page.waitForURL('/login')
clickなどでページ遷移する場合
await page.click('button')
// 👎 timeoutで待つとflakyになりやすく、時間がかかる
await page.waitForTimeout(3000)
// 👎 ページ遷移を待たずにassertしてfailする
await expect(page).toHaveURL('/completed')
// 👍 ページ遷移を待ってくれる
await page.waitForURL('/completed')
要素は await page.locator('table').waitFor() でwaitする
await page.waitForURL('/users') // ユーザー一覧画面を表示する
// 👎 timeoutで待つとflakyになりやすく、時間がかかる
await page.waitForTimeout(3000)
// 👍 tableの描画を待ってくれる（※これ無しだと次のassertがfailする）
// tableをSPAで描画する場合にtheadは静的に描画されるケースが多いので、tbodyのtrの要素1件目の描画を待つ
await page.locator('table > tbody > tr').first().waitFor()
// tableのrow数をassertする（1件以上データがあること）
await expect(
await page.locator('table > tbody > tr').count(),
).toBeGreaterThan(0)
おまけ
ちなみに、localで動いてもCIでなぜかflakyになる（passしたりfailしたり）ので、もっと良い方法あるのかも知れないです。やっぱりSPAをe2eテストするのは難しいのかも？(´・ω・｀)（なんもわからん）
Discussion