PlaywrightをGitHub Actionsで実行

hello world的な内容ですが、何故か毎回ググってるのでメモ。

環境構成

使用バージョン

• Playwright: v1.49.0

• TypeScript: v5.6.3

• Node.js: v23.2.0

GitHub Actions設定

GitHub Actionsの設定ファイル(.github/workflows/main.yml)は以下の構成。

name: Playwright Tests
on:
  push:
    branches: [ main, master ]

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 ci

      - name: Install Playwright Browsers
        run: npx playwright install --with-deps chromium

      - name: Run Playwright tests
        run: npx tsx test.ts
        env:
          PLAYWRIGHT_HEADLESS: true

設定の説明

トリガー設定 このワークフローはmainまたはmasterブランチへのプッシュ時に実行されます。

playwright.dev

実行環境 - Ubuntu最新版を使用 - タイムアウトは60分に設定 - Node.jsはLTS(Long Term Support)バージョンを使用

主要なステップ 1. リポジトリのチェックアウト 2. Node.jsのセットアップ 3. 依存関係のインストール 4. Playwrightブラウザ(Chromium)のインストール 5. テストの実行

playwright.dev

テストスクリプト

test.tsファイルは以下のような簡単なテストを実行します:

import { chromium } from '@playwright/test';

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://google.com');
  await browser.close();
})();

特記事項

• CIでの実行時はPLAYWRIGHT_HEADLESS環境変数をtrueに設定し、ヘッドレスモードで実行します

• パフォーマンス最適化のため、Chromiumのみをインストールする設定としています

• npm ciを使用することで、package-lock.jsonに基づいた厳密なインストールを実行します

github.com