前段
クライアント管理ソフトウェアによる影響でローカルでPlaywrightが実行できなかったのでDockerで実行できる環境を構築してみた。
Playwrightとは
Webブラウザのテスト自動化を実行するためのツール
- 対応ブラウザ：Chromium、WebKit、Firefox、Edgeなど
- プラットフォーム：Windows、Linux、macOS
- 言語：TypeScript、JavaScript、Python、.Net、Java
自動でやってくれること
- ページを開く
- ボタンをクリックする
- フォームに文字を入力する
- 表示されてるか確認する（テスト）
- スクリーンショットや動画を撮る
- 複数のブラウザで自動テスト（Chrome / Firefox / Safari）
Dockerで動かす
- Docker上にPlaywright（とNode.js）をインストールし、そこでブラウザ付きのテストや操作を自動実行できるようにする
- テストの実行結果をホストPCに出力する
テストコードを用意する
プロジェクトフォルダを作って、tests/example.spec.ts などにPlaywrightのテストを書く
import { test, expect } from '@playwright/test';
test('sample test', async ({ page }) => {
await page.goto('https://example.com');
await expect(page).toHaveTitle(/Example Domain/);
});
実行結果を出力するディレクトリを用意
mkdir -p results
Playwright.config.tsで実行結果の出力先を設定
コンテナ内の playwright-report フォルダにHTMLレポートなどが出力されるようになる
reporter: [['html', { outputFolder: 'playwright-report', open: 'never' }]],
Dockerfileを作成する
# Dockerfile
FROM mcr.microsoft.com/playwright:v1.43.1-jammy
# 作業ディレクトリを作成
WORKDIR /app
# package.jsonとpackage-lock.jsonをコピー
COPY package*.json ./
# 依存パッケージをインストール
RUN npm install
# これを忘れずに！
RUN npx playwright install
# アプリのソースコードをコピー
COPY . .
# テスト実行（任意）
CMD ["npx", "playwright", "test"]
Dockerをビルドする
docker build -t your-playwright-image .
Dockerを実行する
Docker実行時に実行結果をホスト側にマウントする
- -v オプションでホストの ./results をコンテナの /app/playwright-report に接続
- コンテナ内のレポート出力がそのままホストPCに反映される
docker run --rm \
-v $(pwd)/results:/app/playwright-report \
your-playwright-image
まとめ
ローカルに比べて手間ではあるが、DockerでもPlaywrightを動かすことができた。
codegenを使ったテストコードの自動生成ができないため、こちらもDockerを使って実施できるか検証してみる。