既存のProjectにPlaywrightを導入する

0. 環境

name	version
nodejs	23
nextjs	15.0.0
@playwright/test	1.48.2

1. packageのinstallとdependencyの更新

with-playwrightをベースに作成します。

1-1. @playwright/testのinstall

$ npm i -D @playwright/test
$ touch playwright.config.ts
$ mkdir e2e
$ mkdir e2e-results

playwright.config.ts

import { defineConfig, devices } from '@playwright/test'
import { join } from 'path'

const PORT = process.env.PORT || 3000
const baseURL = `http://localhost:${PORT}`

export default defineConfig({
  timeout: 30 * 1000,
  testDir: join(__dirname, 'e2e'),
  retries: 2,
  outputDir: 'e2e-results/',
  // 必要がある方はこちらをお願いします。
  // webServer: {
  //   command: 'npm run dev',
  //   url: baseURL,
  //   timeout: 120 * 1000,
  //   reuseExistingServer: !process.env.CI,
  // },
  use: {
    baseURL,
    trace: 'retry-with-trace',
  },
  projects: [
    {
      name: 'Chrome',
      use: {
        ...devices['Desktop Chrome'],
      },
    },
  ],
})

1-2. dependencyのインストール

1-1.を利用した状態だとエラーが発生します。

表示されるであろうエラー

Error: browserType.launch: Executable doesn't exist at /usr/Library/Caches/ms-playwright/chromium-1140/chrome-mac/Chromium.app/Contents/MacOS/Chromium

   ╔═════════════════════════════════════════════════════════════════════════╗
    ║ Looks like Playwright Test or Playwright was just installed or updated. ║
    ║ Please run the following command to download new browsers:              ║
    ║                                                                         ║
    ║     npx playwright install                                              ║
    ║                                                                         ║
    ║ <3 Playwright Team                                                      ║
    ╚═════════════════════════════════════════════════════════════════════════╝

$ npx playwright install --with-deps

driverのinstall後はテストが動くようになります。

2. docker containerを利用してUI ModeのPlaywrightを確認する

nextjsがdockerで動いている場合に、UI Modeが利用できないとつらいので、UI Modeを利用できるようにする。
ui modeに記載がある通りに追加する。

hostとportを固定して対応します。

compose.yaml

services:
    web:
        ports:
            - "3100:3100"

package.json

{
    "scripts": {
        "test:e2e:ui": "playwright test --ui --ui-port=3100 --ui-host=0.0.0.0"
    }
}

next@8fb5af1e8346:/usr/src/app# npm run test:e2e:ui

> web-app@0.1.0 test:e2e:ui
> playwright test --ui --ui-port=3100 --ui-host=0.0.0.0


Listening on http://0.0.0.0:3100

localhost:3100にアクセスするとブラウザから確認が可能となっています。