yuheijotaki.com

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のテストは配列に違反内容が入る。

axeのテストの画面キャプチャ

所感

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