総合演習：フォーム入力
🎯
総合演習
これまで学んだスキルを組み合わせて挑戦しよう
この章では、ここまで学習してきた内容を活かして、実践的な操作に取り組みます。
新しい知識は出てきませんが、これまでのスキルを「組み合わせて使う」ことがポイントになります。
やってみよう
以下の手順に沿って、少し長めのフォームに、指定された値をすべて入力するテストコードを完成させてください。
演習ファイル
tests/document-2/lesson-09.spec.ts
入力する値
| 項目 | 入力値 | ポイント |
|---|---|---|
| Name (First Name) | Tarou | |
| Name (Last Name) | Yamada | |
| hogehoge@gmail.com | ||
| Gender | Other | |
| Mobile (10 Digits) | 0801111222 | |
| Subjects | English | |
| Hobbies | Sports, Music | |
| Current Address | Tokyo | セレクトメニューっぽい見た目ですが <select> タグで構成されていません。よって selectOption() は使えません。 |
| State and City | Haryana, Panipat | 同上 |
手順動画
手順
ここでの詳しい手順は割愛しますが、これまでの演習と同じように、ブレークポイントとPick locatorを使ってぜひ挑戦してみてください。
ヒント
困ったときは、以下のポイントを思い出してみてください。
| 要素の種類 | 使用するコマンド |
|---|---|
| テキストボックス | fill() |
| ボタン・ラジオボタン・リンク | click() |
| チェックボックス | check() / uncheck() |
セレクトメニュー（<select>タグ） |
selectOption() |
| カスタムドロップダウン | click() を2回（開く → 選択） |
このステップのゴール
すべての項目を正しく入力できていれば、テストは成功します。ターミナルに緑色のチェックマークや「passed」という文字が表示されればOKです！