Cypressを使ったE2EテストをGithubActionsで回して結果をHTMLレポートでまとめる

この記事はちゅらデータアドベントカレンダーの25日目の記事でござる

やったこと

Cypressを使ったE2EテストをGithubActionsで回して結果をHTMLレポートでまとめる（リモートブランチにpushしたタイミングでCIを回してE2Eテストを実行する）

本記事で紹介しないこと

Cypressを利用したE2Eテスト作成の手順（CypressStudioを使ったブラウザ操作から簡単に作成できるが今回は紹介しない。別の機会に紹介する）

構成

ディレクトリ構成はこちら

root
├── .github
│   └── workflows
│       └── cypress-test.yml
└── e2e
    ├── cypress
    │   ├── integration
    │   │   └── churadata.spec.js
    │   └── support
    │       └── index.js
    ├── cypress.json
    └── package.json

前提

e2e/cypress/integration配下に任意のcypressのテストを配置済みとする
今回は例として沖縄のとあるデータ分析会社のHPにアクセスするE2Eテストファイルを用意した

• e2e/cypress/integration/churadata.spec.js

describe('test_churadata_hp', function() {
    it('test_recruitment', function() {
     cy.viewport(1440, 798);
     // churadataのHPにアクセス
     cy.visit('https://churadata.okinawa/');
     // 採用ページを開く
     cy.get('#mainvisual_top > .inner > .btn_blue > a > span').click();
     // データエンジニアの採用ページを開く
     cy.get('#gm > .flex > :nth-child(5) > a').click();
     cy.get(':nth-child(7) > :nth-child(3) > a').click();
     // システムエンジニアの採用ページを開く
     cy.get('#breadcrumb > :nth-child(2) > a').click();
     cy.get(':nth-child(7) > :nth-child(5) > a').click();
    })
})

手順

以下のファイルを作成する

• e2e/package.json

{
  "name": "e2e",
  "version": "0.0.0",
  "main": "index.js",
  "author": "dai zamurai",
  "description": "e2e test",
  "dependencies": {
    "cypress": "^8.7.0"
  },
  "devDependencies": {
    "mochawesome": "^7.0.1",
    "mochawesome-merge": "^4.2.0",
    "mochawesome-report-generator": "^6.0.1"
  }
}

• e2e/cypress.json

{
  "pluginsFile": false,
  "modifyObstructiveCode": false,
  "experimentalStudio": true,
  "reporter": "mochawesome",
  "reporterOptions": {
    "reportDir": "cypress/results",
    "overwrite": false,
    "html": false,
    "json": true
  },
  "screenshotsFolder": "cypress/results/screenshots",
  "videosFolder": "cypress/results/videos"
}

• e2e/cypress/support/index.js

// CypressによるE2Eテストが実施される前に読み込まれるファイル
import addContext from 'mochawesome/addContext'

Cypress.on('test:after:run', (test, runnable) => {
  if (test.state === 'failed') {
    addContext(
      { test },
      `./screenshots/${location.pathname.replace(/(.*)\//, '')}/${runnable.parent.title} -- ${
        test.title
      } (failed).png`
    )
  }
  addContext({ test }, `./videos/${location.pathname.replace(/(.*)\//, '')}.mp4`)
})

• .github/workflows/cypress-test.yml

name: e2e_test
on: [push]
jobs:
  cypress-run:
    runs-on: ubuntu-latest
    steps:
      - name: checkout repository
        uses: actions/checkout@v2
      - name: install japanese font
        run: sudo apt-get install -y fonts-noto-cjk
      - name: install cypress report module
        run: npm install --save-dev mochawesome mochawesome-merge mochawesome-report-generator
        working-directory: e2e
      # cypress test run
      - name: cypress run
        uses: cypress-io/github-action@v2
        with:
          working-directory: e2e
          browser: chrome
          headless: true
        # cypress debug
        # env:
        #   DEBUG: 'cypress:*'
      - name: cypress report create html
        if: always()
        working-directory: e2e
        run: |
          npx mochawesome-merge "cypress/results/mochawesome*.json" > cypress/results/merge-report.json
          npx marge cypress/results/merge-report.json -o cypress/results
      # upload artifact for debug
      - name: upload-mochawesome-report
        if: always()
        uses: actions/upload-artifact@v2
        with:
          name: mochawesome-report
          path: |
            ./e2e/cypress/results

結果

GitHubのリポートリポジトリにpushすると、GithubActionsでE2Eテストが実行され、
Artifactsのmochawesome-reportからzipをDLして解凍すると以下のようなE2Eテストの実行結果と動画が貼り付けられたHTMLレポートが確認できる
※ちなみにE2Eテストが失敗したときにはキャプチャまで貼り付けて記録してくれる

終わり

便利な世でござる