669文字
3分
編集

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

#Playwright

#状況

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

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

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

#対応

#Playwright report を確認する

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

yaml
- run: yarn playwright install --with-deps
- run: yarn playwright test
- uses: actions/upload-artifact@v3
  if: always()
  with:
    name: playwright-report
    path: playwright-report/
    retention-days: 30

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

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

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

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

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

jsx
test.beforeEach(async ({ browserName, isMobile }) => {
  test.skip(browserName === "webkit");
  test.skip(isMobile);
});

#Flaky テストを改善する

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

  • ページ遷移などにかかる時間も DOM の操作に掛かってしまうため落ちやすくなっていた。
diff
  await page.getByRole("button", { name: "次へ" }).click();
  await page.getByText("パスポートをアップロード").click();

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

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

#Webkit 環境が異様に遅い

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

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

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

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

jsx
// playwright.config.js
{
  projects: [
    {
      name: "Mobile Chrome",
      use: { ...devices["Pixel 5"], permissions: ["microphone", "camera"] },
    },
    process.platform === "darwin"
      ? {
          name: "Mobile Safari",
          use: { ...devices["iPhone 12"] },
        }
      : {},
  ];
}
yaml
name: Playwright tests on release pull requests
on:
  pull_request:
    branches: [deploy]

jobs:
  test:
    timeout-minutes: 60
    runs-on: macos-latest

#比較

今まで→ Flaky テストの改善→ デバイス制限後→ リリース PR
OSUbuntuUbuntuUbuntuMacOS
ブラウザSafari/ChromeSafari/ChromeChrome のみSafari/Chrome
実行時間25~30m17m7m15m
Flaky テスト10 個以上1~3 個0 個0 個
Failed テスト7 個以上6 個0 個0 個
編集