2021-01-31

ブラウザテスト自動化のカスタムGitHub Actionsを作った (その2)

Firefox をセットアップする GitHub Actionsを先日作りました。これに加えて、Chromium と Microsoft Edge をセットアップする GitHub Actions も作りました。

Firefox

setup-firefoxは Firefox をセットアップする Action です。 firefox-version パラメータでインストールするバージョンを指定します。インストール後、PATH に Firefox のインストールディレクトリが追加され、指定したバージョンを利用できます。

steps:
  - uses: ueokande/setup-firefox@latest
    with:
      firefox-version: "78.3.0esr"

  - run: firefox --version

Firefox のバージョンは、特定のバージョンだけでなく latest-esr や latest-beta も利用できます。

Chromium

setup-chromiumは Chromium をセットアップする Action です。 chromium-version パラメータでインストールするバージョンを、コミットポジション（ソースコードの履歴の位置）で指定します。インストール後、PATH に Chromium のインストールディレクトリが追加され、指定したバージョンを利用できます。

steps:
  - uses: browser-actions/setup-chromium@latest
    with:
      chromium-version: 827102

  - run: chrome --version

指定がない場合は最新ビルドをダウンロードします。

Microsoft Edge

setup-edgeは Microsoft Edge をセットアップする Action です。 edge-version パラメータでインストールするバージョンを、チャンネル名 stable、beta、dev で指定します。インストール後、PATH に Edge のインストールディレクトリが追加され、指定したバージョンを利用できます。

steps:
  - uses: browser-actions/setup-chromium@latest
    with:
      edge-version: stable

  - name: Print Edge version
    run: (Get-Item (Get-Command msedge).Source).VersionInfo.ProductVersion

指定がない場合は最新の stable をダウンロードします。

設定例

紹介した GitHub Actions を使ってクロスブラウザのテストを実行する例を紹介します。 GitHub Actions のテストマトリックスを使って、Chromium、Firefox、Microsoft Edge でテストを実行します。

Chromium および Microsoft Edge は、Karma のミドルウェアとインストールされるファイル名が異なるため、それぞれ CHROMIUM_BIN と EDGE_BIN をテスト実行前に上書きします。

jobs:
  build:
    strategy:
      matrix:
        browser: [chromium, firefox, edge]
    runs-on: windows-latest

    steps:
      # ブラウザのインストール
      - uses: browser-actions/setup-firefox@latest
        if: matrix.browser == 'firefox'
        with:
          firefox-version: "84.0"
      - uses: browser-actions/setup-chromium@latest
        if: matrix.browser == 'chromium'
      - uses: browser-actions/setup-edge@latest
        if: matrix.browser == 'edge'

      # テストの実行
      - name: Run tests on Firefox
        if: matrix.browser == 'firefox'
        run: |
          yarn test --browsers=Firefox
      - name: Run test on Chromium
        if: matrix.browser == 'chromium'
        run: |
          $Env:CHROMIUM_BIN = "chrome"
          yarn test --browsers=Chromium
      - name: Run test on Microsoft Edge
        if: matrix.browser == 'edge'
        run: |
          $Env:EDGE_BIN = "msedge.exe"
          yarn test --browsers=Edge

テストの全貌はbrowser-actions/examples/で確認できます。