以前に Playwrightによるテストを導入 しましたが、それを GitHub Actions 上で自動実行するように設定しました。今日はその設定内容などを紹介してみたいと思います。

ディレクトリ構成

まずこのサイトの Hexo プロジェクト、および Playwright 用のディレクトリがどのようになっているか、簡単に構成を記載します。

Hexo Project
  ├── README.md
  ├── _config.yml
  ├── e2e
  │    ├── node_modules
  │    ├── package-lock.json
  │    ├── package.json
  │    ├── playwright-report
  │    ├── playwright.config.ts
  │    ├── test-results
  │    ├── tests
  │    └── tests-examples
  ├── node_modules
  ├── package-lock.json
  ├── package.json
  ├── public
  ├── scaffolds
  ├── sitemap_template.xml
  ├── source
  └── themes

実際はもうちょっと細かいものがいろいろあります。(Dockerfile とか、compose.yml とか)ですが、ここでの説明にあたってはノイズになりそうだったので省略しています。ご了承ください。

要点としては、ウチでは Hexo のプロジェクト内直下ではなく、いったん e2e というディレクトリを作って、Playwright 関係のファイル群はここに格納しています。これはあとで e2e を単体プロジェクトとして切り出せるようにする意図もあります。

なお、これはあくまでウチの場合であって、特にこれがベストプラクティスというわけではないのであくまで参考程度にとどめてください。これを前提に次のワークフローの説明に移っていきたいと思います。

設定ファイル

.github/workflows/e2e.yml

Playwright 実行用のワークフローはこちらです。なお、.github/actions/setup については 以前の日記 に記載していますのでこちらをご覧ください。

name: E2E
on:
  workflow_call:
  workflow_dispatch:

jobs:
  e2e:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: ./.github/actions/setup

      - name: Install dependencies
        run: |
          npm install -g hexo-cli
          cd e2e
          npm install
          npx playwright install --with-deps chromium
          cd -

      - name: Setup Hexo theme
        run: |
          git submodule init
          git submodule update

      - name: Start Server
        run: |
          nohup hexo s >/dev/null 2>&1 &
          echo "Waiting for server to start..."
          timeout 30 bash -c 'until curl -s http://localhost:4000 > /dev/null; do sleep 1; done'
          sleep 10

      - name: Exec playwright
        run: |
          cd e2e
          FORCE_COLOR=true npx playwright test --project=chromium --retries=0 --reporter=list

記述内容について

ワークフローの各内容についてポイントをいくつか説明します。

Trigger

on:
  workflow_call:
  workflow_dispatch:

いったんは他のワークフローからの呼び出しと、手動実行のみ対応させています。というのも、正直なところテストを実行したいのは Hexo 自体の大きなバージョンアップ時くらいなので、自動化はまだいいかなということでいったんこれで様子見しています。

Install dependencies

- name: Install dependencies
  run: |
    npm install -g hexo-cli
    cd e2e
    npm install
    npx playwright install --with-deps chromium
    cd -

何をしているかというと、hexo コマンドを使えるようにすることと、E2Eプロジェクト側の依存関係を解決しています。

playwright はひとまず Chrome だけ実行すれば個人的には十分なので chromium をつけて絞っています。

Setup Hexo theme

これは単にウチではテーマを別プロジェクトにしているためです。サブモジュール化しているため、ここでコンテナ上に持ってくるようにしています。なので、プロジェクトにテーマを内包している方には必要のない処理です。

- name: Setup Hexo theme
  run: |
    git submodule init
    git submodule update

Start Server

ここがわりとキモです。

GitHub Actions 上で Hexo のローカルサーバーを立ち上げて何かしている例が意外とないので、ここはわりと参考になるんじゃないかと勝手に思っていますw

- name: Start Server
  run: |
    nohup hexo s >/dev/null 2>&1 &
    echo "Waiting for server to start..."
    timeout 30 bash -c 'until curl -s http://localhost:4000 > /dev/null; do sleep 1; done'
    sleep 10

nohup hexo s >/dev/null 2>&1 & でローカルサーバーを起動しています。通常だとフォアグラウンドで動いてしまうので、nohup **** & でバックグラウンド起動させています。仕様なのか hexo s 実行時の出力は標準エラー出力なのでマージしつつ捨ててます。

ちなみに通常だとこんな出力が出ます。CI上で Ctrl+C もできませんし、面倒なので捨ててるというわけです。

❯ hexo s
INFO  Validating config
INFO  Start processing
INFO  Hexo is running at http://localhost:4000/ . Press Ctrl+C to stop.

残りのコードはlocalhostが見れるようになってから playwright を実行できるようにするため、ローカルサーバーの起動確認をしているというものです。とはいえ hexo s は速攻でサーバーが起動するので、最後の sleep 10 だけでも足りるっちゃ足ります。なのでサーバー起動コマンド以外についてはお好みでどうぞ。

Exec playwright

あとは playwright を実行するだけです。オプションについて軽く説明します。

- name: Exec playwright
  run: |
    cd e2e
    FORCE_COLOR=true npx playwright test --project=chromium --retries=0 --reporter=list

• FORCE_COLOR=true
  • これは CI 上の出力が色分けされてなかったので追加しました。
• --project=chromium
  • ブラウザを限定しています。ここでは Chrome だけにしたかったのでこうしてます
• --retries=0
  • デフォルトだと同じテストが3回実行されていたのでこれでリトライを一切やらないようにしました
• --reporter=list
  • デフォルトだと HTML 形式で結果を出力しますが、それだと CI 上で結果を確認しづらい(HTMLをダウンロードしなければいけないのが煩わしい)ので、出力形式を変更しています
  • 詳しくはこちら
    • Reporters | Playwright

CI上での実行結果は以下のとおりです。

感想

このテストによって今度から Hexo のバージョンを上げてもあたふたしないで済むようになれば最高ですね。あとはまだ肝心のテストケースをあまり用意できていないのでこれからもうちょっと増やしていこうとおもいます。ビジュアルリグレッションテストなんかもやってみたいですね。

ではまた。