【GitHub Actions】Cypress のスクリーンショットの文字化けを解決した話

はじめに

※この記事はmediba Advent Calendar 2021 の20日目の記事です。

はじめまして、株式会社mediba 新卒エンジニアの@hrktcyです。年の瀬が近づいてきましたね、4月に入社してからあっという間に過ぎる日々です。

弊社では、2021年9月28日、Ponta ポイントをおトクに使うための活用術やため方を紹介をするサイトとして、ポイ活診断・ポイ活情報・ポイ活の極意をそれぞれローンチしました。私にとってエンジニアとして初めてジョインしたプロダクトです。

本題

開発業務の中で、ブラウザ側の挙動のテストを行うためにCypress を用いてテストコードを書くことがありました。ローカル環境では問題なく動作していたのですが、GitHub リポジトリ内リリース用ブランチにコミットされた際にGitHub Actions 上でCypress を動かすようにワークフローを定義しE2E テストを行うと、テストに失敗した時にArtifact に生成されるスクリーンショットの日本語部分が文字化けしてしまうという事態が起こりました。
これだとテストが失敗した際にどこで失敗したのか判断しにくいですよね。

環境

• Next.js
  • 11.1.2
• cypress
  • 8.7.0

発生当時のワークフロー

該当部分のソースコードです。cypress-io/github-action@v2 を用いています。

name: UI Test

on:
  push:
    branches:
      - 'release/**'

jobs:
  run_ui_test:
    runs-on: ubuntu-latest

    defaults:
      run:
        shell: bash

    steps:
      # リポジトリをチェックアウトする
      - name: Checkout branch
        uses: actions/checkout@v2

      # Cypress を起動する
      - name: Run cypress
        uses: cypress-io/github-action@v2
        with:
          build: yarn build
          start: yarn serve
          wait-on: 'http://localhost:3000'
          browser: chrome
          config: screenshotOnRunFailure=true

      # Cypress が失敗したとき、スクリーンショットをArtifact に保存する
      - name: Save screenshots folder
        if: failure()
        uses: actions/upload-artifact@v2
        with:
          name: screenshots
          if-no-files-found: ignore
          path: cypress/screenshots/**

解決方法

どうやらワークフローで設定した仮想イメージ(Ubuntu-latest) に日本語フォントはプリインストールされていないようです。Cypress を動かす前にfonts-noto パッケージをインストールすることで解決しました。

name: UI Test

on:
  push:
    branches:
      - 'release/**'

jobs:
  run_ui_test:
    runs-on: ubuntu-latest

    defaults:
      run:
        shell: bash

    steps:
　　　　　　　　　　　　# リポジトリをチェックアウトする
      - name: Checkout branch
        uses: actions/checkout@v2

      # fonts-noto をインストールする(追加部分)
      - name: Install fonts-noto
        run: sudo apt install fonts-noto

　　　　　　　　　　　# Cypress を起動する
      - name: Run cypress
        uses: cypress-io/github-action@v2
        with:
          build: yarn build
          start: yarn serve
          wait-on: 'http://localhost:3000'
          browser: chrome
          config: screenshotOnRunFailure=true

      # Cypress が失敗したとき、スクリーンショットをArtifact に保存する
      - name: Save screenshots folder
        if: failure()
        uses: actions/upload-artifact@v2
        with:
          name: screenshots
          if-no-files-found: ignore
          path: cypress/screenshots/**

最後に

薄い内容の記事ではありますが誰かの手助けになればと思います。

mediba では一緒にモノづくりができるエンジニアを募集しています。
少しでもご興味がありましたらこちらからどうぞ。