Q. Playwrightのテスト改善をしてほしい

2023-12-07

Tech

Playwright

状況#

Playwright を Webkit/Chrome の Desktop/Mobile デバイスに対して実行し、Github Actions の Ubuntu latest 上で計 160 個のテストが 30 分以上かけて実行されていた。

実行ステータスが Failed になっており、ログを確認するとエラーが大量に出ている。

ただしローカルで実行しても失敗することはあるが、8 割方成功する。

対応#

Playwright report を確認する#

Github Actions 上で Playwright report が Artifact にアップロードされていたので、それを確認した。

1
- run: yarn playwright install --with-deps
2
- run: yarn playwright test
3
- uses: actions/upload-artifact@v3
4
  if: always()
5
  with:
6
    name: playwright-report
7
    path: playwright-report/
8
    retention-days: 30

次のような状態になっていた。

Faile：7 個以上
- ほとんどは Webkit、特に Mobile Webkit
Flaky：10 個以上

Failed しているテストに加えて Flaky なテストが多いことや、テストによっては実行する必要がない環境で実行されているテストが複数あることで、実行時間がとても長くなっていた。

実行されるデバイスを制限する#

Mobile でのみ、Chrome でのみ実行されることが前提のコードのテストコードがいくつかあったため、適切にスキップされるようにした。

1
test.beforeEach(async ({ browserName, isMobile }) => {
2
  test.skip(browserName === "webkit");
3
  test.skip(isMobile);
4
});

Flaky テストを改善する#

テストコードで前提となる状態を待たずに、次の操作を行っている箇所が多くあった。

ページ遷移などにかかる時間も DOM の操作に掛かってしまうため落ちやすくなっていた。

1
await page.getByRole("button", { name: "次へ" }).click();
2
await page.getByText("パスポートをアップロード").click();
3

4
await page.waitForURL(`${BASE_URL}/guests/**/identification-image`);
5
const button = page.getByRole("button", { name: "次へ" });
6
await expect(button).not.toBeDisabled();
7
await button.click();
8
await page.waitForURL(`${BASE_URL}/complete`);

この対応で、Flaky テストはほぼ発生しなくなり、Chrome ではテストが落ちなくなった。

Webkit 環境が異様に遅い#

ページ遷移でのタイムアウトがどうしても改善しない箇所がある。

Github Actions（Ubuntu latest）で発生、ローカルでは発生しない。
Webkit でのみ発生する。

Webkit 環境のテストは MacOS でのみ実行する#

Linux 及び Webkit での組み合わせのバグを踏んでいると考え、Webkit のみ MacOS でのみ実行するように変更すると、テストが安定するようになった。

1
{
2
  projects: [
3
    {
4
      name: "Mobile Chrome",
5
      use: { ...devices["Pixel 5"], permissions: ["microphone", "camera"] },
6
    },
7
    process.platform === "darwin"
8
      ? {
9
          name: "Mobile Safari",
10
          use: { ...devices["iPhone 12"] },
11
        }
12
      : {},
13
  ];
14
}

1
name: Playwright tests on release pull requests
2
on:
3
  pull_request:
4
    branches: [deploy]
5

6
jobs:
7
  test:
8
    timeout-minutes: 60
9
    runs-on: macos-latest

比較#

	今まで	→ Flaky テストの改善	→ デバイス制限後	→ リリース PR
OS	Ubuntu	Ubuntu	Ubuntu	MacOS
ブラウザ	Safari/Chrome	Safari/Chrome	Chrome のみ	Safari/Chrome
実行時間	25~30m	17m	7m	15m
Flaky テスト	10 個以上	1~3 個	0 個	0 個
Failed テスト	7 個以上	6 個	0 個	0 個