テキストボックスの自動テスト

このレッスンでは、テキストボックス（入力フォーム）の自動テストを学びます。

演習サイト

以下のサイトを使って演習を行います：

https://labs-autotestshop.com/

サイトにアクセスして、「Text Box」のページを開いてください。

テキストボックスとは？

テキストボックスは、ユーザーがテキストを入力できるフォーム要素です。 例えば、名前、メールアドレス、住所などを入力する際に使用されます。

基本的な操作

Playwrightでテキストボックスに入力するには、fill()メソッドを使います：

// 名前を入力
await page.locator('#fullName').fill('山田太郎');

// メールアドレスを入力
await page.locator('#email').fill('test@example.com');

演習問題

以下のテストケースを実装してみましょう：

1. フルネームに「山田太郎」を入力
2. メールアドレスに「yamada@example.com」を入力
3. 現住所に「東京都渋谷区」を入力
4. 「Submit」ボタンをクリック
5. 入力した内容が正しく表示されることを確認

ヒント

• 要素を特定するには、Pick locatorや検証ツールを使いましょう
• ボタンのクリックにはclick()メソッドを使います
• 表示されたテキストの確認にはtoHaveText()を使います

サンプルコード

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

test('テキストボックスのテスト', async ({ page }) => {
  // ページにアクセス
  await page.goto('https://labs-autotestshop.com/text-box');

  // 入力
  await page.locator('#fullName').fill('山田太郎');
  await page.locator('#email').fill('yamada@example.com');
  await page.locator('#currentAddress').fill('東京都渋谷区');

  // 送信
  await page.locator('#submit').click();

  // 検証
  await expect(page.locator('#name')).toHaveText('Name:山田太郎');
  await expect(page.locator('#email')).toHaveText('Email:yamada@example.com');
});

よくあるエラー

要素が見つからない:

• セレクターが正しいか確認してください
• ページが完全に読み込まれるのを待つ必要があるかもしれません

入力できない:

• 要素が表示されているか確認してください
• 要素が無効化されていないか確認してください

次のステップ

次のレッスンでは、ボタンの操作について学びます。