【Github actions】CypressのUIテストを実行するためのセットアップ

概要

Githubで管理しているrepoの特定ブランチにpushをすると、CypressでUIテストが実行されるようになる。

説明しないこと

Cypressのインストールなどは割愛させていただきます。

Cypressのセットアップ

Setupに記載があるように進めます。

$ yarn cypress open

1. Cypressダッシュボードにアカウントを作成

Loginをして、Cypressのダッシュボードにアカウントを作成もしくはログインします。

2. Set up Project to Record

Runsタブから、Set up Project to Recordボタンを押して、プロジェクトを作成します。

3. cypress.jsonを確認

Cypresss.jsonを確認すると、以下のようにprojectIdが自動で追記されているかを確認します。

{
  "projectId": "プロジェクトIDが入る"
}

4. レコードキーを確認 & github secretsを設定

レコードキーを確認したら、githunのgithub actionsを設定したいrepoのsettingsページに移動します。

Add a new secretをクリックして CYPRESS_RECORD_KEYを設定します。

github actionsのワークフローを作成

cypressのgithub actionsを作成したいrepoに以下のファイルを追加します

.github/workflows/cypress.yml

cypress.ymlの中身は以下のようにします。

name: Cypress

on:
  push:
    branches:
      - browser-test

jobs:
  cypress:
    name: cypress
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v1

      - name: Cypress run
        uses: cypress-io/github-action@v1
        with:
          record: true
          build: yarn build
          start: yarn start # github actionsのVM内でlocalhostを立ち上げ
          wait-on: 'http://localhost:3000' # localhostが立ち上がるまでwaitさせる
          spec: cypress/integration/sample/hoge_spec.js # テスト対象のファイル
        env:
          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

今回はbrowser-testというブランチにpushを行うと、cypressのアクションが実行されるようにしました。
上記のポイントとしては、github actionsのVMの中でyarn startして、localhostを立ち上げてそこに対してUIテストを実行させるようにしています。

UIテストが終わると、Cypressのダッシュボードにテスト結果とビデオを保存するようにしているので、どのような動作がされたかを確認することが出来ます。