ボタン(Button)
テキスト入力の次は「ボタンのクリック」に挑戦します。
| 利用頻度 | 難易度 |
|---|---|
| ★★★★★ | ★☆☆☆☆ |
Playwrightを使って、ボタンを自動でクリックする方法を学びます。これも、自動テストで最も基本かつ、最もよく使う処理です。フォームの送信や、メニューの表示など、Webサイト上のあらゆるアクションは、このクリック操作から始まります。
今回使用するコマンド：click()
click() は、ボタンやリンクなど、クリックできる要素を自動で押してくれる命令（コマンド）です。fill() とは違い、() の中に値を入れる必要はありません。
基本的な書き方
await page.[ここにPick locatorで取得したコード].click();
具体例
// 「#submitButton」というIDを持つボタンをクリックする場合
await page.locator("#submitButton").click();
ポイント
clickの後ろに()を付け忘れないように注意してください- もし付け忘れると、ボタンがクリックされないのにエラーも出ず、テストがそのまま進んでしまうため、問題の原因を見つけるのが非常に難しくなります
やってみよう
以下の手順に沿って、「Click Me」と書かれたボタンをクリックするテストコードを完成させてください。
演習ファイル
tests/document-2/lesson-02.spec.ts
行う操作
| 項目 | 操作 |
|---|---|
| Click Me | 押下する |
手順動画
手順
- ファイルを開く： VSCodeで、上記の演習ファイルを開きます
- ブレークポイントで一時停止： コードを書きたい場所の少し手前にブレークポイント（赤い丸印）を設定して、デバッグモードでテストを実行して、目的の画面で一時停止させます
- Pick locatorで要素を特定： 「Pick locator」を使って、「Click Me」と書かれたボタンをクリックし、その要素を特定するためのコードを取得します
- コードを書く： 取得したコードと、先ほど学んだ
click()を組み合わせて、クリック処理を完成させます - 最終確認： ブレークポイントを全て外し、もう一度テストを実行します。緑色の「passed」が表示されたら、課題は完了です！
ちなみに...
この課題ではダブルクリックや右クリックについては扱いません。
実務でも使用する機会がほぼないため、今回は割愛しています。
ただし、Playwrightでは以下のように記述することで、それぞれの操作を実行することができます。
ダブルクリックしたい場合
await page.locator('#userName').dblclick();
右クリックしたい場合
await page.locator('セレクタ').click({ button: 'right' });