playwrightをgithub actionで動かす

はじめに

こんにちは。

前回からplaywrightのかんたんなネタです。

kojirooooocks.hatenablog.com

今回はgithub actionで動かすのをやってみました。

本題

最小の構成はこんな感じ？

name: Test

on:
  pull_request:
    types: [opened]

jobs:
  main:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - uses: microsoft/playwright-github-action@v1

      - name: Get Node Cache Directory
        id: node-cache
        uses: actions/cache@v3
        with:
          path: ${{ github.workspace }}/node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
          restore-keys: ${{ runner.os }}-node-
      - name: Install Dependencies
        if: steps.node-cache.outputs.cache-hit != 'true'
        run: yarn install

      - name: Setup Playwright
        id: playwright-cache
        uses: actions/cache@v3
        with:
          path: /home/runner/.cache
          key: ${{ runner.os }}-playwright-cache-${{ hashFiles('**/playwright.config.ts') }}
          restore-keys: ${{ runner.os }}-playwright-cache-
      - name: Install Playwright
        if: steps.playwright-cache.outputs.cache-hit != 'true'
        run: |
          npm install && \
          npx playwright install --with-deps && \
          npx playwright install msedge

      - name: Execute Playwright
        run: npx playwright test

これでOKだと思います。

ただ、バックエンドも開発している場合、API先がないと playwrightでE2Eテストを実行することが出来ません。

僕がやってた案件でもバックエンドはlaravelで開発しており、そことの通信が必要です。

そのさい、僕がやった対応はCI上で ビルトインサーバを立ち上げてそことフロントを通信させるという感じで対応させました。

      - name: Clone For Backend
        run: |
          git clone https://${GITHUB_ACTOR}:${GITHUB_TOKEN}@github.com/xxxx/xxxxx backend

      - name: Exec Serve
        run: |
          cd ${{ github.workspace }}/backend && php artisan serve &

これでサーバを立ち上げつつ フロント側は dotenv等を使って、通信先を立ち上げたビルトインサーバに向けて通信させて、テストを実行させることが出来ます。

終わりに

playwrightって劇作家って意味があるんですね。　

次はVRTも試してみます。