入力欄への値の入力

Playwrightにおける「入力欄への値の入力」は、フォームの自動操作やユーザーシナリオのテストにおいて非常に重要な機能です。以下では、その基本的な方法と関連する操作について詳しく説明します。

---

入力欄への値の入力

Playwrightでは、テキストボックスやテキストエリアなどの入力欄に対して値を入力するために、主に以下の2つのメソッドが使用されます。

1. page.fill(selector, value)

指定したセレクターに対応する入力欄に、指定の値を一括で入力します。既存の入力値は自動的にクリアされます。

書式:

javascript
await page.fill('input[name="username"]', 'test_user');

特徴:

• 入力欄の内容をクリアしてから新しい値を入力

• 非同期関数なので await を付ける必要がある

• 自動的に待機（auto-waiting）されるため、入力欄が表示されるのを待ってから入力される

---

2. page.type(selector, text[, options])

指定したセレクターの入力欄に、1文字ずつキー入力のように入力します。より人間に近い操作を模倣できます。

書式:

javascript
await page.type('input[name="password"]', 'pa$$w0rd');

オプション:

javascript
await page.type('input[name="password"]', 'pa$$w0rd', { delay: 100 });

• delay: 各文字を入力する間隔（ミリ秒単位）

特徴:

• 実際のタイピングに近い動作

• page.fill()と違い、既存の入力をクリアしない

• イベントトリガー（keydown, keyup, input）を細かくテストしたいときに有効

---

使用上の注意点

• awaitを付け忘れると、非同期操作が完了する前に次の処理が走るため、正しく動作しないことがあります。

• selector は適切に指定する必要があります。CSSセレクターやXPathなどが使用可能です。

• 入力欄が非表示の場合、操作はエラーになります。必要に応じて page.waitForSelector を併用してください。

---

補足：入力値のクリア

すでに入力されている値を削除したいだけの場合は、以下のように page.fill に空文字を渡します。

javascript
await page.fill('input[name="email"]', '');

または、キーボード操作で削除したい場合は以下のように実行できます。

javascript
await page.click('input[name="email"]');
await page.press('input[name="email"]', 'Control+A');
await page.press('input[name="email"]', 'Delete');

---

まとめ

Playwrightのこれらの機能を使うことで、ユーザーの入力操作を正確かつ柔軟に再現できます。フォームの入力テストやUIの自動化において、シナリオに応じて使い分けることが重要です。