Github ActionsでPlaywrightのテストを動かす

はじめに

表題通り、GithubActionsでPlaywrightを動かしていきます。

成果物

Appleのサイトのタブ遷移をサンプルにしています

ソースコード

ディレクトリ構成

~/develop/playwright_actions  (main)$ tree -I node_modules/
.
├── package-lock.json
├── package.json
├── playwright-report
│   └── index.html
├── playwright.config.ts
├── test-results
├── tests
│   └── apple.spec.ts
└── tsconfig.json

4 directories, 6 files

tests/apple.spec.ts

import { test} from "@playwright/test";

test("test", async ({ page }) => {
	await page.goto("https://www.apple.com/store");
	await page.getByLabel("Mac", { exact: true }).click();
	await page.getByLabel("iPad", { exact: true }).click();
	await page.getByLabel("Watch", { exact: true }).click();
	await page.getByLabel("Vision", { exact: true }).click();
	await page.getByLabel("AirPods", { exact: true }).click();
	await page.getByLabel("TV and Home", { exact: true }).click();
	await page.getByLabel("Entertainment", { exact: true }).click();
	await page.getByLabel("Store", { exact: true }).click();
});

playwright.config.ts

import { defineConfig } from "@playwright/test";

export default defineConfig({
	reporter: [
		["list"], // テストの進行状況が一つ一つコンソールに表示される
		["html", { outputFolder: "playwright-report", open: "never" }], //
	],
	use: {
		launchOptions: {
			slowMo: 1000,
		},
	},
});

name: Playwright Tests

on:
  push:
    branches:
      - main
  pull_request:

jobs:
  test:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '16'

      - name: Install dependencies
        run: npm install

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

      - name: Run Playwright tests
        run: npx playwright test

      - name: Upload Playwright report
        if: always() # テストが成功・失敗に関わらず実行
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report