動機

仕事をしていくうえでも、全くテストコードというのを書いたことがなかった。
これを機にテストコードというものはどういうものなのか勉強したい。

やったこと

プラグイン開発のテストコードの記事があったのでそちらを参考にChatGPTに聞きながら書いてみる。

手順

1. playwright のセットアップ

windows のコマンドプロンプトで

npm init playwright@latest

TypeScript を選択。
質問は、全部 yes。

2. テストコードを書いてみる

C:\Users\username>上に、testsフォルダが作成されていた。
その中の、example.spec.tsというファイルを編集する。

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

test('OrderInquiryPluginTest', async ({ page }) => {
  // EC-CUBE のトップページへ
  await page.goto('http://localhost:8080/');

  // 右上の「ログイン」リンクをクリック
  await page.getByRole('link', { name: 'ログイン' }).click();

  // URLがログインページであることを確認
  await expect(page).toHaveURL(/\/mypage\/login/);

  // メールアドレスとパスワードを入力
  await page.getByPlaceholder('メールアドレス').fill('1745300553.7138.ynagisa@example.org');
  await page.getByPlaceholder('パスワード').fill('1745300553.7138.ynagisa@example.org');

  // 「ログイン」ボタンをクリック
  await page.getByRole('button', { name: 'ログイン' }).click();

  // トップページに遷移できているか確認
  await expect(page).toHaveURL(/\/$/);
  
  // 「マイページ」リンク
  await page.getByRole('link', { name: 'マイページ' }).click();
  
  // マイページに遷移できているか確認
  await expect(page).toHaveURL(/\/mypage\/$/);
  
  // 「詳細を見る」ボタンをクリック
  await page.getByRole('link', { name: '詳細を見る' }).click();
  
  // 注文履歴に遷移できているか確認
  await expect(page).toHaveURL(/\/mypage\/history(\/\d+)?$/);

  // 「受注問合せ」ボタンをクリック
  await page.getByRole('link', { name: 'この注文について問い合わせる' }).click();
  
  // お問い合わせに遷移できているか確認
  await expect(page).toHaveURL(/\/contact\?order_no=\d+$/);
  
  // お問い合わせ内容を入力
  await page.getByLabel('お問い合わせ内容').fill('ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト');

  // URL から order_no を取得
  const url = page.url();
  const urlObj = new URL(url);
  const orderNoFromUrl = urlObj.searchParams.get('order_no');

  // order_no が存在することを確認
  expect(orderNoFromUrl).not.toBeNull();

  // input[name="order_no"] の値を取得して比較
  const inputValue = await page.locator('input[name="contact[order_no]"]').inputValue();
  expect(inputValue).toBe(orderNoFromUrl);
  
  // 「確認」ボタンをクリック
  await page.getByRole('button', { name: '確認ページへ' }).click();

  // お問い合わせに遷移できているか確認
  await expect(page).toHaveURL(/\/contact/);
  
  // 「送信」ボタンをクリック
  await page.getByRole('button', { name: '送信する' }).click();

  // お問い合わせ完了に遷移できているか確認
  await expect(page).toHaveURL(/\/contact\/complete/);

});

※追記

Playwright には、E2Eテストのコードを自動生成する機能があります。

↑ ちゃんと読んでなかった。。

npx playwright codegen http://localhost:8080

とすると、ブラウザと検証ツールみたいなのが起動するので、そこでブラウザを操作すると録画機能のような感じで一連の操作を、コード化してくれるみたい。

3. テストコードを実行

npx playwright test example.spec.ts --headed

をすると、ブラウザが起動して一連の操作をやった後に終了する。
--headed なしで実行すると、処理にかかった時間等だけが表示される。

参考記事