はじめに

はじめまして。株式会社SHIFT 自動化アーキテクトの上野です。

私は現在Webアプリ開発のプロジェクトに参画し、主に Playwright でのテスト自動化を担当しています。自動化したテストはQAチームがリグレッションテストを行うタイミングで手動で実行しています。

プロジェクトのメンバー全員がいつでも気軽に自動テストを実行していただきたいのですが、テストを実行するためには単純に npx playwright test コマンドを実行するだけとは言えず、実際には面倒な事前準備などが必要になっているという問題がありました。

上記の問題を解決するために GithubActions を活用して解決できないか検討しました。　

従来の実行方法

自動テストを実行する手順は以下のようになっています。

1. 最新の main ブランチを checkout する

2. ルートに .env.local を作成し、テスト対象のアプリのユーザー認証情報を設定する

USERNAME="your username"
PASSWORD="your password"

3. playwright.config.ts の baseURL をテスト対象の環境URLに書き換える

baseURL: "https://.....",

4. npx playwright test を実行する

手順としては少ないような気がしますが煩わしい点が多々あり、敷居が高く感じます。

• 手元にブランチをチェックアウトする必要がある
  開発者は基本的に作業ブランチで作業をしているので、テストを実行するために対象のブランチを checkout する必要があります。
  現行版のテストでは main ブランチを、過去のバージョンのアプリをテストする場合は、それに合ったブランチを…
  そのためだけに stash したり、worktree を作成したりするのは避けたいところです。

• いくつかのファイルを編集する必要がある
  環境変数の設定や baseURL の指定など、ファイルの一部を変更しなければならない部分も良くない点です。
  サインインに使用するユーザーも人によって違ってきますし、個々人がEC2で環境を立ち上げているため baseURL も毎回のように違います。
  慣れていないと、毎回実行手順のドキュメントを見に行くことになったりします。

• テスト実行中に作業が止まってしまう
  E2Eの自動テストという側面からテストの実行時間は数10分、場合によっては1時間を要することもあります。
  これを手元のエディタから実行してしまうと、本来の開発作業に支障をきたしてしまいます。

Github Actions で動作させる設定

まず、環境変数から BASE_URL を注入できるように playwright.config.ts を編集します。

baseURL: process.env.BASE_URL || "http://127.0.0.1:3000",

これにより、BASE_URL が指定された場合はそれを使用することになります。

次に、.github/workflows のフォルダ内にある playwright.yml を編集します。

起動方法を workflow_dispatch として、baseURLやユーザーの認証情報を入力できるように設定します。
それらの情報を npx playwright test 実行時の環境変数として使用するようにしています。

他にもパラメーターがあれば同じように設定します。
inputs 配下に追加したキーは実行時にユーザー入力を求められ、その値を ${{ inputs.キー名 }} の形で利用することが可能です。
required: true とすることで入力必須にできます。

name: Playwright Tests
on:
  workflow_dispatch:
    inputs:
      baseurl:
        description: "Base URL:"
        required: true
        type: string
      username:
        description: "Sign in user name:"
        required: true
        type: string
      password:
        description: "Sign in user password:"
        required: true
        type: string
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - name: Install dependencies
        run: npm install -g yarn && yarn

      - name: Install Playwright Browsers
        run: npm playwright install --with-deps

      - name: Run Playwright tests
        run: npx playwright test
        env:
          BASE_URL: ${{ inputs.baseurl }}
          USERNAME: ${{ inputs.username }}
          PASSWORD: ${{ inputs.password }}

      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

Github Actions でテストを実行する

これで Github Actions からE2Eテストを実行できるようになりました。
Run workflow をクリックすると対象のブランチ、baseURL、認証情報の入力ウィンドウが表示され、さまざまな環境に対してテストを簡単に実行することができるようになりました。

テスト完了後はzipファイルで添付されたレポートも確認することができます。

まとめ

Github Actions から実行できるようにしたことで様々なメリットが生まれました。

• チームメンバーが誰でも簡単に実行できるようになった

• 個人のマシンで実行しなくてもよくなった

• 複数の環境で同時にテストを実行できるようになった

Github ActionsでCI的にE2Eテストを実行することはよくありますが、
このように、今この瞬間にこの環境でテストを実行したい、という場合にも十分有効です。

もちろんCI的に実行する場合でも、実行方法を workflow_dispatch の部分をschedule にアレンジしたり、EC2からこのワークフローを実行することで、環境立ち上げ時にテストが実行されるなど応用もできるかと思います。

E2Eテストの実行ハードルを下げたことで、特にフロントエンドの開発メンバーが機能改修をした際に、周辺のリグレッションテストとして気軽にE2Eテストを流す、という良いサイクルも生まれました。

プロジェクト内の Confluence に従来の実行手順については記載していました。手順を記載する必要があるということは、その手順が複雑であるということです。こういった複雑性をできるだけ無くしていくことが大事だと思います。

お問合せはお気軽に

SHIFTについて（コーポレートサイト）
https://www.shiftinc.jp/

SHIFTのサービスについて（サービスサイト）
https://service.shiftinc.jp/

SHIFTの導入事例
https://service.shiftinc.jp/case/

お役立ち資料はこちら
https://service.shiftinc.jp/resources/

SHIFTの採用情報はこちら
https://recruit.shiftinc.jp/career/

PHOTO：UnsplashのRichy Great