概要

PlaywrightはWebテストのためのフレームワークでChrome、Firefoxなどのブラウザに対応している。
こちらのテストをCodeBuildとGitHub Actionsで実行する。

事始め

公式に全て書いてあるがディレクトリを作成し以下のコマンドを実行することで必要なファイルが作成される。
構築時に気になったポイントだけメモしておく。

npm init playwright

playwright.config.js

タイムアウト値やリトライ、画面サイズなどの設定を記述するファイル。

ポイント

npm init playwrightで自動作成されるファイルを修正していくだけ
outputDirはテスト実施時に削除してから実行されるのでスクリーンショットを置く場所としても利用できる
process.env.CIでCI環境での実行か判別している。Github ActionsではデフォルトでCIがtrueに設定される
- https://docs.github.com/ja/actions/learn-github-actions/environment-variables
trace機能がとても便利、1度目のリトライ時にtraceを実行している

playwright.config.js

const { devices } = require("@playwright/test");

const config = {
  testDir: "./tests",
  timeout: 30 * 1000,
  expect: {
    timeout: 5000,
  },
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: [["html", { open: "never" }]],
  use: {
    actionTimeout: 0,
    trace: "on-first-retry",
  },

  projects: [
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],
        viewport: { width: 1600, height: 900 },
      },
    }
  ],

  outputDir: "test-results/",
};

module.exports = config;

GitHub Actions

ポイント

公式ドキュメントがある
- https://playwright.dev/docs/ci
npm init playwrightで自動生成されるファイルが利用できる
chromiumでのテストのみ実施し時間短縮するためフォントインストールとchromiumインストールを別々に実施した
- 日本語フォントを予めインストールしなければ日本語が全て「□」になる
- Ubuntuではnpx playwright install-depsで依存するファイルを全てインストールできる
  - ここでフォントのインストールも自動で実施してくれる
定期実行やSlackをこの設定ファイルで設定できるのですべてを1ファイルに集約できる
retension-daysを7にして一週間で削除するようにする

name: Playwright Tests
on:
  push:
    branches: [main, master]
  pull_request:
    branches: [main, master]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: "14.x"
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright
        run: npx playwright install chromium
      - name: Install Fonts
        run: sudo apt install fonts-ipafont-gothic
      - name: Run Playwright tests
        run: npx playwright test --project chromium
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: |
            playwright-report/
            test-results/
          retention-days: 7

CodeBuild

ポイント

レポートをJUnitで出力してCodeBuildから確認できるようにする
test-resultsに失敗時の記録が残るのでartifactsに指定する
テストに失敗してもレポートが残るようにon-failureをCONTINUEにする
GitHub Actions同様にCIをtrueにする

version: 0.2

env:
  variables:
    PLAYWRIGHT_JUNIT_OUTPUT_NAME: playwright-report/results.xml
    CI: true

phases:
  install:
    runtime-versions:
      nodejs: 14
    commands:
      - npm ci
  pre_build:
    on-failure: ABORT
    commands:
      - npx playwright install chromium
      - apt update && apt install -y fonts-ipafont-gothic
  build:
    on-failure: CONTINUE
    commands:
      - npx playwright test --reporter=junit --project=chromium
      - ls
reports:
  report-group-name-or-arn:
    files:
      - ${PLAYWRIGHT_JUNIT_OUTPUT_NAME}
    file-format: JUNITXML
artifacts:
  files:
    - playwright-report/**/*
    - test-results/**/*
  name: artifact-$(date +%Y-%m-%d)
  enable-symlinks: no
cache:
  paths:
    - node_modules/*

感想

GitHub Actionsのほうが自動生成してくれることとスケジュール設定、Slack通知などもyamlに記述できる分で楽に感じた。
AWSのVPC内からしかアクセスできない等の制約がある場合はCodeBuildを使う。CodeBuildのほうがレポート機能が充実していた。
しかし、Playwrightが吐き出してくれるHTMLのレポートもとても見やすい。