セレクトボックスやチェックボックスの操作

Playwrightにおける「フォームとユーザー入力の操作」の中でも、「セレクトボックス（<select>）」や「チェックボックス（<input type="checkbox">）」の操作は、ユーザーの選択や状態変更を自動化するうえで重要な処理です。以下にそれぞれの操作方法について詳しく解説します。

---

1. セレクトボックスの操作（<select>）

セレクトボックスは、ドロップダウン形式の選択肢から1つ（または複数）を選ぶUIです。

基本構文：page.selectOption()

typescript
await page.selectOption('select#country', 'JP');

説明

• 第1引数：セレクター。CSSセレクターを使って対象の<select>要素を指定します。

• 第2引数：選択するoptionの値（value属性）です。文字列・オブジェクト・配列で指定可能です。

使用例（オブジェクト指定）

typescript
await page.selectOption('select#language', { label: '日本語' });
await page.selectOption('select#language', { index: 2 }); // 3番目の選択肢

複数選択（multiple属性付きのselect）

typescript
await page.selectOption('select#fruits', ['apple', 'banana']);

---

2. チェックボックスの操作（<input type="checkbox">）

チェックボックスはオン・オフの2状態を持ちます。Playwrightでは、check()およびuncheck()メソッドを使って状態を明示的に制御できます。

チェック状態にする

typescript
await page.check('input#agree');

チェックを外す

typescript
await page.uncheck('input#agree');

状態確認（isChecked）

typescript
const isChecked = await page.isChecked('input#agree');
console.log(isChecked); // trueまたはfalse

注意点

• すでにチェックされているチェックボックスに対して再度check()を実行してもエラーにはなりません（状態は維持されます）。

• 無効なチェックボックス（disabled属性付き）に対して操作を行うとエラーが発生します。

---

3. 応用：ラジオボタン（<input type="radio">）

チェックボックスと似ていますが、ラジオボタンはグループ内で1つしか選択できません。

typescript
await page.check('input[type="radio"][value="female"]');

---

まとめ

これらのAPIを組み合わせることで、フォーム入力のテストを堅牢かつ明確に記述できます。必要に応じてwaitForSelector()などを用いて、要素の存在確認や安定性を確保するとさらに良い結果が得られます。