Create React Appで作成したアプリケーションに対してTestCafeでのE2EテストをGitHub Actionsから動かす

Create React Appで作成したアプリケーションに対して、E2EテストをTestCafeで実装した。

ローカルでE2Eテストを動かす分にはさほど難しくはなかったが、GitHub Actions で動かす際にはハマったりすることが多かったので、一旦このように書けば動く、というコードをこちらに載せることにした。

将来、自分がサクッとTestCafeによるE2EテストをGitHub Actionsで動かすためのメモ的なニュアンスとなる。

なお、GitHub Actionsで動かす際にハマったあれこれについては、後日備忘録にまとめてこちらに別途残しておこうと思う。

TestCafeによるテストコードについて

TestCafeによるテストコードの内容だが、別途 yarn start で立ち上げたローカルアプリに対してテストを実施するという構成となる。

yarn start でローカルサーバを立ち上げた状態から下記のように localhost:3000 にアクセスしてテストを行う。

import 'testcafe';
import { Selector } from 'testcafe';

fixture('Getting Started').page('http://localhost:3000');

test('Test', async (t: TestController) => {
  ・
  ・
  ・
});

GitHub Actionsのymlファイル

下記がGitHub Actionsのためのymlファイルとなる。

ubuntu-latest環境、かつNode.jsのversionが　12 , 14 で動く形となる。

name: Target Multiple Node.js Versions
on: [push]

jobs:
  build:
    name: Run Tests Across Node.js Versions
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12, 14]
    steps:
      - uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - uses: actions/checkout@v2
      - name: Server start
        run: |
          yarn
          yarn start &
      - name: Run TestCafe Tests
        uses: DevExpress/testcafe-action@latest
        with:
          args: "chrome:headless e2e/test.ts"

ここで軽くコードについて書いておくと、ローカルで立ち上げたサーバにアクセスするために yarn start &しているが、ここが yarn start の場合、次に進まない状態となってしまっていた。 yarn start & としてバックグラウンド実行することにより、後続のテストコマンドを実行させている。

このやり方が正しいのかは分からないが他に動かし方が分からなかったのでこうしている。
(もしもっとこうしたほうが良いよ、という方がいましたらコメントお待ちしています)

UbunutとWindows環境でテストを行いたい場合

Windows環境のテストなども試みたりしたのだが、windows側でのテストはまだうまく動かせていない。

ただ、下記のように書くことでOS環境ごとの実行を振り分けることができたので、こちらもメモとして残しておくことにする。

name: Target Multiple Node.js Versions and Operating Systems
on: [push]

jobs:
  build:
    name: Run Tests Across Node.js Versions and Operating Systems
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
        os: [ubuntu-latest, windows-latest]
        node-version: [12, 14]
    steps:
      - uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
      - uses: actions/checkout@v2
      - name: Server start(ubuntu-latest)
        if: ${{ matrix.os == 'ubuntu-latest' }}
        run: |
          # osが ubuntu-latestの場合にのみ実行される処理
          yarn
          yarn start &
      - name: Server start(windows-latest)
        if: ${{ matrix.os == 'windows-latest' }}
        run: |
          # osが windows-latestの場合にのみ実行される処理
          # ただし、まだうまく動かせていないのでrun以下の処理は割愛
      - name: Run TestCafe Tests - os:${{ matrix.os }}, node-version:${{ matrix.node-version }}"
        uses: DevExpress/testcafe-action@latest
        with:
          args: "chrome:headless e2e/test.ts"

macOS環境でのテストについて

GitHub Actions でmacOS環境でのテストを動かしたい場合、より手間がかかりそうな印象。

自分は試していないが、下記の公式ドキュメントに記載があり、参考のコードも載っているのでmacOSでテストをしてみたい方は要チェック。

testcafe.io

Github Actionsでは、macos-latestとして「System Integrity Protection」を有効にしたmacOS Catalina 10.15の仮想環境を使用しています。この設定が有効な場合、TestCafeでは必須となる画面録画の許可が必要になります。そのためTestCafe では、macos-latest での GitHub Actions を使ったテストをローカルで実行することができません。ただし、ブラウザをリモートで接続すれば、macOSの仮想マシンでもテストを実行できます。