Playwright でブラウザテストを自動化

前提

前提として、 node.js をインストールしておきます。

バージョンは最新の LTS を推奨。

環境

• Windows11
• WSL2

$ node -v
v22.14.0
$ npm -v
10.9.2

プロジェクトの新規作成

プロジェクト用のディレクトリを作成、 package.json を作成。

$ cd projects/
$ mkdir my-playwright-project
$ cd my-playwright-project
$ npm init -y
Wrote to ./package.json:

{
  "name": "my-playwright-project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

$ npm install @playwright/test

added 3 packages, and audited 4 packages in 2s

found 0 vulnerabilities
$ npx playwright install-deps
... (略
$ npx playwright install
... (略

簡単なテスト実行

$ cat examle.spec.js
const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  // 指定されたURLに移動
  await page.goto('https://playwright.dev/');

  // ページタイトルを取得して検証
  const title = await page.title();
  await expect(page).toHaveTitle(/Playwright/);
});

実行結果

$ npx playwright test

Running 1 test using 1 worker

  ✓  1 examle.spec.js:3:1 › basic test (832ms)

  1 passed (1.8s)

スクリーンショット取得

画面遷移において、スクリーンショットを取得することができます。

$ cat screenshot.spec.js
const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {
  // 指定されたURLに移動
  await page.goto('https://playwright.dev/');

  // ページタイトルを取得して検証
  const title = await page.title();
  await expect(page).toHaveTitle(/Playwright/);

  // スクリーンショットを取得して保存
  await page.screenshot({
          path: 'screenshot.png',
          fullPage: true
  });
});

実行結果

$ npx playwright test ./screenshot.spec.js

Running 1 test using 1 worker

  ✓  1 screenshot.spec.js:3:1 › basic test (898ms)

  1 passed (1.8s)

ページのアクセス速度を計測する

$ cat time.spec.js
const { test, expect } = require('@playwright/test');

test('ページの表示速度が5秒以下であることを確認する', async ({ page }) => {
  const startTime = Date.now();

  // 指定されたURLに移動
  await page.goto('https://playwright.dev');

  const loadTime = Date.now() - startTime;
  console.log(`ページの読み込み時間: ${loadTime}ms`);

  // ページの読み込み時間が5000ms（5秒）未満であることを期待
  expect(loadTime).toBeLessThan(5000);
});

実行結果

625ms はテストケースぜんたいにかかった時間、405ms はページの読み込みにかかった時間です。

$ npx playwright test ./time.spec.js

Running 1 test using 1 worker

  ✓  1 … › ページの表示速度が5秒以下であることを確認する (625ms)ページの読み込み時間: 405ms

  1 passed (2.2s)