github actionでE2Eテストを行う

2023-12-04

Article

Test

github actionでE2Eのテストを実装する

repository: https://github.com/mr-ijij/e2e-github-action

概要

Cypressを使用して、github actionのJobでE2Eを行う。 失敗した場合Slackに通知を飛ばす。

Cypressについて

Webアプリの自動テストツール。

あらゆるテストが可能

1. ./github/workflow/e2e.ymlについて

https://github.com/mr-ijij/e2e-github-action/blob/main/.github/workflows/e2e.yml

ジョブの実行について

on:
  push: # ブランチをpushしたタイミングで実行
  workflow_dispatch: # 手動で実行できるようにする

workflow_dispatchを入れると下記から実行可能

定期実行するには下記のように書き換える

on:
  schedule:
    - cron: '0 * * * *'  # 毎時0分に実行（UTC）

job部分の説明

jobs:
  # ここでは "e2e" という名前のジョブを定義している。
  e2e:
    # このジョブが実行される環境を指定。"ubuntu-latest" は最新版のUbuntuを意味する。
    runs-on: ubuntu-latest
    steps:
      # ステップ1: GitHubリポジトリのコードをチェックアウト（ダウンロード）する.
      - name: Checkout
        uses: actions/checkout@v3

      # ステップ2: jq（コマンドラインJSONプロセッサ）をインストールする。Slackへの通知するメッセージの作成で使用する。
      - name: Install jq
        run: sudo apt-get install jq

      # ステップ3: Cypressテストを実行。
      - name: Cypress run
        # 公式がactionを用意している。https://github.com/cypress-io/github-action
        uses: cypress-io/github-action@v3
        with:
          # プロジェクトのcypress.config.jsファイルが存在するディレクトリを指定。
          project: ./
          # 使用するブラウザを指定。ここではChromeを使用。
          browser: chrome
          # テスト対象のURLを指定。
          wait-on: "https://e2e-github-action.vercel.app/"
          # 上記URLの応答を待つ最大時間（秒）。
          wait-on-timeout: 60
        env:
          # 環境変数を設定。これらはGitHub Secretsから取得される。
          CYPRESS_USER_NAME: ${{ secrets.USER_NAME }}
          CYPRESS_PASSWORD: ${{ secrets.PASSWORD }}

      # ステップ4: テスト失敗時にSlackへ通知するメッセージを準備。
      - name: Prepare Slack Message
        if: failure()  # このステップはテストが失敗した場合のみ実行される。
        id: prepare_slack_message
        run: |
          # Cypressのテスト結果をJSON形式で取得。
          JSON_RESULT=$(cat cypress/results/mochawesome.json)
          # 失敗したテストの詳細を抽出。
          FAILED_TESTS=$(echo "$JSON_RESULT" | jq '.results[].suites[].tests[]' | jq -c .)
          # 抽出した失敗テストの情報を環境変数に設定。
          echo "SLACK_MESSAGE=$FAILED_TESTS" >> $GITHUB_ENV

      # ステップ5: Slackに失敗通知を送信。
      - name: Notify failure on Slack
        if: failure()  # テストが失敗した場合のみ実行される。
        uses: slackapi/slack-github-action@v1.23.0
        with:
          # 通知先のSlackチャンネルID。
          channel-id: ${{ secrets.SLACK_CHANNEL }}
          # 送信するSlackメッセージの内容。カスタマイズ可能。
          slack-message: "${{ secrets.SLACK_MENTION }}\n\nCypress E2E Test Failure\n:x:\n\n```\n${{ env.SLACK_MESSAGE }}\n```\nhttps://github.com/${{ github.repository }}/actions/runs/${{ github.run_id }}"
        env:
          # Slackボットトークン。これもGitHub Secretsから取得される。
          SLACK_BOT_TOKEN: ${{ secrets.SLACK_BOT_TOKEN }}
github actionのsecretを設定する

テスト対象のアプリケーション自体の設定

ログイン時のユーザー名とパスワードを設定している。

SLACKに通知を飛ばす設定
Slack Bot Tokenの作成方法
  1. https://api.slack.com/ へアクセス
  2. 「Your Apps」のクリック
  3. 「Create New App」のクリック
  4. 「From scratch」を選択
  5. 「App Name」と「workspaceの選択」
    • App Nameはなんでも良い
  6. 作成したアプリの設定ページに移動。
  7. サイドバーから「OAuth & Permissions」をクリック
  8. 「Bot Token Scopes」セクションで、ボットに必要な権限を追加
    • chat:writを追加する。
  9. ページ上部の「Install to Workspace」ボタンをクリック
    • プロンプトに従ってインストールを完了します。
    • インストール後、「OAuth & Permissions」ページに「Bot User OAuth Access Token」が表示される。これを SLACK_BOT_TOKEN で設定する。

cypress.config.jsの設定

詳しくは: https://docs.cypress.io/guides/references/configuration

specPattern: "cypress/e2e/**/*.cy.{js,jsx,ts,tsx}", に、テストスイートを記述していく。

おわりに

E2Eテストは、しばしば後回しにされがちです。
体感ですが、E2Eテストを持たないプロダクトも多いと思います。
その理由は主に、コストが高いことや実装が面倒であることにあるでしょう。
しかし、ユーザーよりも先にプロダクトの異常を検知しなくてならないというのは、共通認識として存在しています。

GitHub Actionsを利用することで、比較的低コストで簡単にE2Eテストを実装できます。
これにより、開発者者やプロダクトオーナー・ユーザーはより幸せになると思います。

是非、最も重要なドメインぐらいは、E2Eテストを実装していただきたいです。（テストピラミットが屈強なアスリートのような逆三角形にならないように！）