WordPressのE2EテストをPlaywrightで実行する方法

はじめに

現代のWeb開発において、サイトの安定性と機能の完全性を保つためには、エンドツーエンド(E2E)テストが不可欠です。WordPressを使用している場合でも、これらのテストはサイトのユーザー体験を向上させ、新規機能の追加や既存機能の変更による影響を最小限に抑えるのに役立ちます。Playwrightはクロスブラウザテストフレームワークであり、その強力な機能を使ってWordPressプラグインやテーマの開発プロセスを改善することができます。

症状・背景

この記事が必要になる主な場面:

• WordPressサイト上で新規ページまたは投稿を作成する際のユーザーフローの確認
• ユーザーインターフェース(UI)の変更がユーザー体験に影響を与えないことを検証する必要があるとき
• サイトのパフォーマンスやレスポンシブデザインをテストして、さまざまなデバイスで動作することを確認したい場合
• 新規プラグインまたはテーマの導入により、既存のサイト機能が正常に機能しているかを検証する必要があるとき

手順・設定方法

ステップ1: Playwrightとnpmのインストール

# npmパッケージリポジトリを追加します。
npm config set registry https://registry.npmjs.org/

# Playwrightをグローバルにインストールします。
npm install -g playwright

# WordPressサイトのテストを行うために必要なブラウザをインストールします。
npx playwright install

ステップ2: テストスクリプトの作成

# Playwrightプロジェクトディレクトリを作成し、移動します。
mkdir wp-e2e-tests && cd wp-e2e-tests

# package.jsonファイルを生成して必要なモジュールをインストールします。
npm init -y
npm install @playwright/test playwright-chromium playwright-firefox playwright-webkit

# テストスクリプトのテンプレートを作成します。
touch test.js

ステップ3: WordPressサイトへの接続と基本的なE2Eテストを記述する

# テストスクリプトファイルを開きます。
vi test.js

# 以下のようにテストスクリプトを追加します。

const { chromium } = require('playwright');

(async () => {
    const browser = await chromium.launch();
    const context = await browser.newContext();

    // WordPressサイトへの接続
    const page = await context.newPage();
    await page.goto('https://example.com/');  # テスト対象のWordPress URL

    // ログインページに移動してログインします。
    await page.click('text=ログイン');
    await page.fill('#user_login', 'admin');
    await page.fill('#user_pass', 'password');
    await page.click('#wp-submit');

    // 新規投稿作成
    await page.goto('https://example.com/wp-admin/post-new.php');  # 新規投稿ページURL
    await page.type('[name="post_title"]', '新しいテスト投稿');
    await page.selectOption('[name="post_name"]', ['new-post']);
    await page.click('#publish');

    // 出力結果の確認
    console.log('新規投稿を作成しました。タイトル:', await page.textContent('.entry-title'));

    await browser.close();
})();

ステップ4: テストスクリプトを実行して結果を検証する

# npmタスクとしてテストスクリプトを設定します。
echo "test: node test.js" >> package.json

# タスクを実行します。
npm run test

注意事項

• テストは、開発環境と本番環境で異なる結果を返す可能性があるため、両方の環境でのテストが推奨されます。
• WordPressサイトのセキュリティ設定により、自動化されたログインプロセスがブロックされる場合があります。その場合は、APIを使用したテストやCookieのハンドリングを検討してください。
• テストの実行に必要なブラウザのバージョンアップデートは定期的に行う必要があります。
• 重複するリソースの要求や遅延によりパフォーマンスが低下する可能性があるため、適切なテストスクリプトの最適化が必要です。

まとめ

1. Playwrightインストール: Playwrightと必要なモジュールをインストールします。

2. プロジェクトセットアップ: テストを行うために必要なディレクトリとファイルを作成します。

3. テストスクリプト作成: WordPressサイトのE2Eテスト用のJavaScriptコードを記述します。

4. テスト実行: 作成したテストスクリプトをnpmタスクとして登録し、自動化したテストを実行します。

関連記事:

• WordPressプラグイン開発入門
• Playwrightの基本的な使い方
• WordPressサイトのセキュリティ向上策