Playwrightを触ってみた

はじめに

Astroを使用しているこのブログでPlaywrightを試してみた。

試したこと

主にAstro公式のドキュメントを参考にしながら設定。

インストール、設定

npm init playwright@latest すると設定ファイル等が作られる。 playwright.config.ts に baseURL やテストで利用するブラウザを設定。 tests/ 以下にテストを入力。

見た目の比較

画面キャプチャの差分があるかどうかは toHaveScreenshot() で行う。

import { test, expect } from '@playwright/test';

test('前回の画面スクリーンショットと差分がないこと', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot();
});

期待のキャプチャを更新するには npx playwright test --update-snapshots をする。

axeを使ったテスト

axeのテストは @axe-core/playwright をインストールして使う。

import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';

test('axeでエラーがないこと', async ({ page }) => {
  await page.goto('/');
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
  expect(accessibilityScanResults.violations).toEqual([]);
});

.withRules() や .withTags() でルールの指定や無効ができる。

テスト実行

このブログのフッターの <ul> 内に <p>Playwright</p> を追加してテスト実行してみるとそれぞれのテストにエラーが出る。

見た目の比較は新旧画像をスライダーでも見比べられる。

axeのテストは配列に違反内容が入る。

所感

• Playwright自体始めて触ってみたが、テストコードの書き方は簡単そうな気がした。
  • E2Eテストで触ったことあるのがCodeceptJSなので有名どころと比べられない。
• Webサイト制作の場合は見た目の変更を行い続けてなんぼのため、ビジュアルリグレッションの使い所はなさそう。
• axeはせっかくならURL一括で行ったり、レポート出すようにするにはもうひと手間必要。
  • Markuplintのおかげで主要な違反は回避できているので、無理して入れる必要はなさそう。
  • 調べていて Pa11y というのもあると知ったのでこちらもいずれ試したい。