Jenkins から Cypress を実行する

やりたいこと

• Jenkins でビルド・デプロイ後に Cypress で E2E テストを実施したい
  • ビルド・デプロイジョブの後に呼び出せる E2E テスト実行ジョブを作りたい
  • E2E テストは github で管理したい

開発環境をいじるのが嫌だったので、ローカルでいろいろお試し。

環境

• WSL2
• Ubuntu 20.04

前提

• github 上に Cypress E2E プロジェクトを用意している

Jenkins の設定

Docker で Jenkins を起動するための Dockerfile と docker-compose.yaml

FROM jenkins/jenkins:latest

USER root

RUN apt-get update \
  && apt-get install -y \
  nodejs  \ # Cypress 実行のために必要なパッケージ↓
  npm \
  libgtk2.0-0 \
  libgtk-3-0 \
  libgbm-dev \
  libnotify-dev \
  libgconf-2-4 \
  libnss3 \
  libxss1 \
  libasound2 \
  libxtst6 \
  xauth \
  xvfb

USER jenkins

docker-compose.yaml

version: "3"

services:
  jenkins:
    container_name: jenkins
    build: .
    ports:
      - 8080:8080
    volumes:
      - ./jenkins_home:/var/jenkins_home
    environment:
      - NO_COLOR=1 # Cypress の実行結果が文字化けするため
      - JAVA_OPTS=-Duser.timezone=Asia/Tokyo -Dfile.encoding=UTF-8 -Dsun.jnu.encoding=UTF-8

初回起動

1. docker-compose up で起動
2. Docker 上で Jenkins の起動が完了したら http://localhost:8080 にアクセス
3. 初回起動時は Administrator password の入力が必要
   1. 初期パスワードは /var/jenkins_home/secrets/initialAdminPassword に記載されている
4. そのまま初期設定完了まで進む

github 認証

1. Jenkins の管理 ⇒ Manage Credentials ⇒ Jenkins ⇒ グローバルドメイン
2. Add Credentials
3. github の認証情報を追加する
   1. ユーザー名：github アカウント
   2. パスワード：github の Access Token
   3. ID：github（自分で分かりやすいもの）

ジョブ作成

1. 新規ジョブ作成 ⇒ パイプライン
2. Pipeline script 作成

pipeline {
    agent any

    stages {
        stage('cypress test') {
            steps {
                git credentialsId: 'github', url: 'https://github.com/xxx/cypresse2e.git' // credentialsId は上で作成した github 認証の ID
                sh 'npm install cypress --save-dev'
                sh 'npx cypress run'
            }
        }
    }
}

E2E テスト実行

作成したジョブの ビルド実行

はまったところ

jenkins_home のアクセス権限

docker-compose up した際に、作業ディレクトリに jenkins_home が作成される。何回か試していた際に、このディレクトリにアクセスできないエラーが発生した。
一回削除して、同名のディレクトリを作成したらエラーが解消。（実行ユーザーの問題？）

Cypress 実行結果の文字化け

Jenkins の Console Output に Cypress の実行結果が出力される。ここが盛大に文字化けしていた。
どうやら Cypress の実行結果は ANSI で出力され、Jenkins 側が対応していない模様。（プラグインを入れれば OK？)
NO_COLOR=1 を設定することで文字化けが解消される。
https://docs.cypress.io/guides/continuous-integration/introduction#Colors

参考

https://hub.docker.com/_/jenkins
https://dev.classmethod.jp/articles/jenkins-on-docker/
CI with Jenkins build pipeline for Cypress automation testing：https://www.youtube.com/watch?v=UFErY92HeyM