PlaywrightでのUIテスト入門

UIテストは、Webアプリケーションがユーザーの視点から正しく動作することを保証するフロントエンド開発の重要な部分です。MicrosoftのオープンソースオートメーションフレームワークであるPlaywrightは、開発者にとって使いやすく、かつ堅牢なUIテストの強力なツールとして注目されています。Playwrightについて聞いたことはあるけれど、まだ試したことがない方に向けて、このガイドでは動作原理と現在のワークフローへの適合性について説明します。

Playwrightとは何か、なぜUIテストに使用するのか？

Playwrightは、すべてのモダンブラウザ（Chrome、Firefox、Safari）で動作するテストを単一のAPIで記述できるエンドツーエンドテストフレームワークです。他のテストツールとは異なり、Playwrightは現代のWebアプリケーション向けに特別に設計されており、UIテストをより信頼性が高く、不安定さを軽減する機能を備えています。

UIテストにおける主な利点：

• 自動待機: Playwrightは操作を実行する前に要素がアクション可能になるまで自動的に待機
• 分離: 各テストは新しいブラウザコンテキストで実行され、テスト間の干渉を防止
• クロスブラウザサポート: 一度書けば、同じコードでどこでもテスト可能
• モダンWeb機能: Shadow DOM、iframe、モダンWebコンポーネントに対応
• 強力なツール: Playwright InspectorやTrace Viewerなどの組み込みデバッグツール

UIテスト用Playwrightのセットアップ

Playwrightの開始は簡単です。Node.jsがインストールされている必要があり、その後新しいプロジェクトをセットアップできます：

# プロジェクト用の新しいディレクトリを作成
mkdir playwright-ui-testing
cd playwright-ui-testing

# 新しいPlaywrightプロジェクトを初期化
npm init playwright@latest

セットアップ中にいくつかの質問が表示されます。UIテストの場合、TypeScriptを選択し、GitHub Actionsワークフローを追加し、プロンプトが表示されたらブラウザをインストールできます。

インストールにより、以下を含む基本的なプロジェクト構造が作成されます：

• playwright.config.ts: テストの設定ファイル
• testsディレクトリ: テストファイルが配置される場所
• .githubディレクトリ: GitHub Actionsを選択した場合のCI設定

初めてのUIテストを書く

ECサイトで商品カードが正しく表示されることを確認するシンプルなUIテストを書いてみましょう。testsディレクトリにproduct-ui.spec.tsという新しいファイルを作成します：

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

test('product card displays correctly', async ({ page }) => {
  // ページに移動
  await page.goto('https://demo-store.playwright.dev');
  
  // 商品カードを見つける
  const productCard = page.locator('.product-card').first();
  
  // 商品カードが表示されることを確認
  await expect(productCard).toBeVisible();
  
  // 期待される要素が含まれることを確認
  await expect(productCard.locator('.product-title')).toBeVisible();
  await expect(productCard.locator('.product-price')).toBeVisible();
  await expect(productCard.locator('button.add-to-cart')).toBeEnabled();
  
  // 商品情報を抽出して確認
  const title = await productCard.locator('.product-title').textContent();
  console.log(`Found product: ${title}`);
});

このテストは以下を行います：

1. デモストアのWebサイトを開く
2. 商品カードを特定
3. 主要な要素が表示され、有効であることを確認
4. 商品タイトルを抽出（情報をスクレイピングする方法を示す）

UIテストの実行

テストを実行するには、Playwright CLIを使用します：

npx playwright test product-ui.spec.ts

デフォルトでは、Playwrightはヘッドレスモードでテストを実行します。ブラウザの動作を確認するには：

npx playwright test product-ui.spec.ts --headed

特定のブラウザでテストを実行するには：

npx playwright test product-ui.spec.ts --project=chromium

Playwrightを使用した高度なUIテスト

レスポンシブデザインのテスト

Playwrightを使用すると、異なる画面サイズでのUIテストが簡単に行えます：

test('product card is responsive', async ({ page }) => {
  // モバイルビューポートでテスト
  await page.setViewportSize({ width: 375, height: 667 });
  await page.goto('https://demo-store.playwright.dev');
  
  // モバイルレイアウトを確認
  await expect(page.locator('.mobile-menu-button')).toBeVisible();
  
  // デスクトップビューポートでテスト
  await page.setViewportSize({ width: 1280, height: 800 });
  
  // デスクトップレイアウトを確認
  await expect(page.locator('.desktop-navigation')).toBeVisible();
});

視覚的テスト

Playwrightは予期しないUI変更を検出するための視覚的比較をサポートしています：

test('product page visual test', async ({ page }) => {
  await page.goto('https://demo-store.playwright.dev/product/1');
  
  // スクリーンショットをベースラインと比較
  await expect(page).toHaveScreenshot('product-page.png');
});

このテストを初回実行時にベースラインスクリーンショットが作成されます。以降の実行では、現在の状態をベースラインと比較します。

動的UI要素のテスト

モダンWebアプリには動的UI要素がよくありますが、Playwrightはこれらを適切に処理します：

test('add product to cart updates counter', async ({ page }) => {
  await page.goto('https://demo-store.playwright.dev');
  
  // 初期のカート数を取得
  const cartCount = page.locator('.cart-count');
  await expect(cartCount).toHaveText('0');
  
  // 商品をカートに追加
  await page.locator('.product-card button.add-to-cart').first().click();
  
  // カート数が更新されることを確認
  await expect(cartCount).toHaveText('1');
});

UIテストのデバッグ

テストが失敗した場合、Playwrightは強力なデバッグツールを提供します：

Playwright Inspector

テストをデバッグするためのビジュアルインスペクターを起動：

PWDEBUG=1 npx playwright test product-ui.spec.ts

インスペクターでは以下が可能です：

• テスト実行のステップ実行
• DOMの検査
• コンソールログの表示
• ネットワークリクエストの確認

Trace Viewer

トレースはテスト実行に関する詳細情報を記録します：

// playwright.config.ts内で
export default defineConfig({
  use: {
    trace: 'on-first-retry', // 失敗したテストの初回リトライ時にトレースを記録
  },
});

テスト失敗後、トレースを表示：

npx playwright show-trace test-results/product-ui-test-chromium/trace.zip

トレースビューアーは以下を表示します：

• 各ステップでのスクリーンショット
• DOMスナップショット
• ネットワークアクティビティ
• コンソールログ

PlaywrightのUIテストをワークフローに統合

CIでのテスト実行

PlaywrightはCIシステムとうまく連携します。GitHub Actionsの場合、セットアップウィザードがプッシュとプルリクエストでテストを実行するワークフローファイルを作成します。

他のCIシステムでは、Playwright Dockerイメージを使用できます：

# GitLab CIの例
test:
  image: mcr.microsoft.com/playwright:v1.40.0-focal
  script:
    - npm ci
    - npx playwright test
  artifacts:
    when: always
    paths:
      - playwright-report/
    expire_in: 1 week

コンポーネントテスト

ページレベルのテストに加えて、PlaywrightはReact、Vue、Svelteなどのフレームワーク向けのコンポーネントテストもサポートしています：

// Reactコンポーネントテストの例
import { test, expect } from '@playwright/experimental-ct-react';
import ProductCard from '../components/ProductCard';

test('ProductCard renders correctly', async ({ mount }) => {
  const component = await mount(
    <ProductCard 
      title="Test Product" 
      price="$19.99" 
      image="/test-image.jpg" 
    />
  );
  
  await expect(component).toContainText('Test Product');
  await expect(component).toContainText('$19.99');
  await expect(component.locator('button')).toBeEnabled();
});

よくある質問

まとめ

Playwrightをテスト戦略に組み込むことで、UIがブラウザやデバイス間で正しく動作することを確信してより信頼性の高いフロントエンドアプリケーションを構築できます。自動待機メカニズム、分離機能、強力なデバッグツールは、UIテストでよくある問題点の多くに対処します。レスポンシブデザイン、視覚的外観、動的インタラクションのテストのいずれにおいても、Playwrightは現代の開発ワークフローとシームレスに統合する包括的なソリューションを提供します。