複数の選択肢の中から、たった一つだけを選ぶ「ラジオボタン」の操作を学びます。

利用頻度	難易度
★★★☆☆	★☆☆☆☆

Playwrightを使って、ラジオボタンを選択する操作を自動化する方法を学びます。性別の選択や、アンケートの評価など、複数の選択肢から一つだけを選ばせるフォームで頻繁に使われる、大切なスキルです。

---

今回使用するコマンド：click()

ラジオボタンを選択する基本的なコマンドは、以前学んだ click() です。

基本的な書き方

await page.[ここにPick locatorで取得したコード].click();

具体例

// 「#radioButton」というIDを持つラジオボタンをクリックする場合
await page.locator("#radioButton").click();

---

やってみよう

以下の手順に沿って、2つのラジオボタンを順番に選択するテストコードを完成させてください。

演習ファイル

tests/document-2/lesson-04.spec.ts

行う操作

項目	行う操作
Yes	選択する
Impressive	選択する

---

手順動画

---

手順

1. ファイルを開く： VSCodeで、上記の演習ファイルを開きます
2. ブレークポイントで一時停止： コードを書きたい場所の少し手前にブレークポイント（赤い丸印）を設定して、デバッグモードでテストを実行して、目的の画面で一時停止させます
3. Pick locatorで要素を特定： 「Pick locator」を使って、「Yes」のラジオボタンをクリックし、その要素を特定するためのコードを取得します
4. コードを書く： 取得したコードと click() を組み合わせて、「Yes」を選択する処理を完成させます
5. 残りも同様に： 同じ手順で、「Impressive」のラジオボタンを選択するコードも書き上げます
6. 最終確認： ブレークポイントを全て外し、もう一度テストを実行します。緑色の「passed」が表示されたら、課題は完了です！

---

ちなみに...

先ほど学習した check() でも、ラジオボタンを選択することは可能です。

ただし、チェックボックスとは挙動が異なるため注意が必要です。

チェックボックスの場合は「すでにチェックが入っている場合 → 何もしない」という安全な動作をしてくれますが、ラジオボタンの場合は、すでに選択されている状態で check() を使うとエラーになります。

そのため、ラジオボタンを選択する際は click() を使うのが安全かつ一般的です。

見た目の操作通り、「ラベルやボタンをクリックする」という形で書くのがシンプルでわかりやすいです。