2021-01-05

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

年末はVim Vixenで使っていた CircleCI を GitHub Actions に移行しました。それに伴い、ブラウザテスト自動化のカスタム GitHub Actions を作っていました。

Vim Vixen の対象ブラウザは、Mozilla がサポートする最も古い Firefox のバージョン（ESR）です。それを保証するためにWebExtensions の E2E テストを自動化しています。

GitHub Actions の標準イメージにも Firefox と Geckodriver はありますが、Ubuntu ディストリビューションやインストールスクリプトによってバージョンが固定されています。そこで任意バージョンの Firefox と Geckodriver をセットアップするカスタムアクションを作成しました。

使い方

setup-firefox

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

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

  - run: firefox --version

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

steps:
  - uses: ueokande/setup-firefox@latest
    with:
      firefox-version: latest-esr # 最新のESR

  - run: firefox --version

firefox-version を指定しない場合は最新の安定版をインストールします。

steps:
  - uses: ueokande/setup-firefox@latest

setup-geckodriver

アクション名 ueokande/setup-geckodriver@latest で利用できます。 geckodriver-version パラメータでインストールするバージョンを指定します。

steps:
  - uses: ueokande/setup-geckodriver@latest
    with:
      geckodriver-version: "0.26.0"

  - run: geckodriver --version

geckodriver-version を指定しない場合は最新の安定版をインストールします。

steps:
  - uses: ueokande/setup-geckodriver@latest

Vim Vixen での利用例

Vim Vixen ではサポートされている一番古い ESR 上で E2E テストを実行します。 GitHub Actions で明示的に Firefox のバージョンを指定してインストールしています。

E2E テスト（WebDriver）でテストを実行する前に、Xvfb で仮想ディスプレイを :99 に作成します。

steps:
  - uses: actions/checkout@v2
  - uses: actions/setup-node@v2
    with:
      node-version: "14.15.1"
  - uses: ueokande/setup-firefox@latest
    with:
      firefox-version: "78.3.0esr"
  - uses: ueokande/setup-geckodriver@latest
    with:
      geckodriver-version: "0.28.0"

  # 依存ライブラリのダウンロード
  - name: Install dependencies
    run: yarn install

  # E2Eテストの実行
  - name: Run test
    run: |
      export DISPLAY=:99

      # geckodriverの起動
      geckodriver &
      # 仮想ディスプレイの起動
      Xvfb -ac :99 -screen 0 1280x1024x24 >/dev/null 2>&1 &

      # テストの実行
      yarn test:e2e

おわりに

（´-`）.｡oO（Chromium/ChromeDriver をセットアップするカスタムアクションも作ろうかなぁ）