自動テストチュートリアル

Playwright、Seleniumなどの自動テストツールを学ぼう

チェックボックス(Check Box)

「チェックボックス」から好きなものを選んだり、外したりする操作を学びます。

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

Playwrightを使って、チェックボックスの選択（チェックを入れる）と、選択解除（チェックを外す）を自動化する方法を学びます。アンケートフォームや、利用規約の同意、設定画面のオン・オフなど、様々な場面で活用できる重要なスキルです。

今回使用するコマンド：check() と uncheck()

  • check(): チェックボックスにチェックを入れるための専用コマンドです
  • uncheck(): チェックボックスからチェックを外すための専用コマンドです

基本的な書き方

// チェックを入れる場合
await page.[ここにPick locatorで取得したコード].check();

// チェックを外す場合
await page.[ここにPick locatorで取得したコード].uncheck();

やってみよう

以下の手順に沿って、指定されたチェックボックスの操作を行うテストコードを完成させてください。

演習ファイル

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

行う操作

項目 行う操作
WorkSpace チェックを入れる
Downloads チェックを入れる
React チェックを外す
Word File.doc チェックを外す

手順動画

手順

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

ちなみに...

click() でもチェックを入れることはできますが、check() を使う方がはるかに安全で、テストが安定します。

なぜなら、check() は「チェックが入った状態にすることを保証する」という賢い動きをするからです。

  • もし、すでにチェックが入っていたら → 何もしない
  • もし、チェックが入っていなかったら → チェックを入れる

この動きのおかげで、テスト実行前の状態がどうであれ、必ず「チェックが入った状態」にしてくれるため、テストの結果が安定します。

目次に戻る