Pick locatorを使って要素取得する

Playwrightが用意してくれた、最も簡単で、最も強力な要素取得ツール「Pick locator（ピックロケーター）」の使い方を学びます。

例えるなら、「指差したものの『住所』を、一瞬で特定してくれるポインター」です。画面上で「このボタン！」とクリックするだけで、Playwrightがそのボタンを特定するための最適なコードを自動で教えてくれます。

そしてこれを使うためにブレークポイントで一時停止する準備が必要になってきます。

まずは動画で、ブレークポイントでテストを止め、Pick locatorを起動し、要素を取得するまでの一連の流れをご覧ください。動画では、入力フォームの要素を取得し、そのコードが実際に使えることを実演しています。

手順動画

まずは、要素を取得したい画面が表示される直前の行にブレークポイント（赤い丸印）を設定し、デバッグモードでテストを実行して一時停止させます。

テストが停止すると表示されるデバッグパネルの中から、下の画像の赤枠で囲まれた「Pick locator」ボタンをクリックします。

ブラウザ画面に戻り、取得したい要素（ボタンや入力欄など）にマウスカーソルを合わせると、その要素がハイライトされます。そのままクリックしてください。

VSCodeに戻ると、画面下部の入力欄に、その要素を取得するための最適なコードが自動で表示されています！

Pick locatorを使って、画面上にある要素のコードを取得できることを確認してください。

実際にそのコードを使って文字を入力したり、クリックしたりする操作は、次の資料で詳しく解説します。