playwrightをdockerでwatchモードとして動かしたい

今の所まだwatchモードはない（@playwright/test v1.12.3）

dockerで動かす

公式が用意しているmcr.microsoft.com/playwright:focalを使う。

Dockerfile

FROM mcr.microsoft.com/playwright:focal

# 細かな設定があれば...
ENV LANG C.UTF-8

WORKDIR /app

docker-compose.yml

version: "3.7"
services:
  frontend:
    build:
      context: ./frontend # 適当な場所で
    ipc: host # chrome動かすなら入れたほうが良いらしい
    volumes:
      - ./frontend:/app # 適当な場所で
    user: 1000:1000 # これでデフォルトのpwuserで操作できる
    tty: true

NOTE
Using --ipc=host is recommended when using Chrome (Docker docs). Chrome can run out of memory without this flag.

コンテナ内に入って

$ npm i chokidar-cli

scriptsを用意

package.json

{
  "scripts": {
    "test:e2e": "playwright test",
    "test:e2e:watch": "SHELL=$(which bash) chokidar 'tests/**/*.spec.ts' -c 'npm run test:e2e -- --retries=0 {path}'"
  },

  ...
  ...

SHELL=$(which bash)を入れておかないとthrow new Error('$SHELL environment variable is not set.');が起きるっぽい

$ npm run test:e2e:watch

デフォルト設定としてこうしておけば実行中の動画が取れたりする。

playwright.config.ts

import { PlaywrightTestConfig } from "@playwright/test"
const config: PlaywrightTestConfig = {
  use: {
    slowMo: 50,

    // Context options
    viewport: { width: 1280, height: 720 },
    ignoreHTTPSErrors: true,

    // Artifacts
    screenshot: "only-on-failure",
    video: "on",
  },
}
export default config

参考