複数の情報をすっきりと見せる「タブ」の切り替え操作に挑戦しましょう。

Playwrightを使って、クリックでタブを切り替える操作を学びます。タブは、設定画面やフォームのステップ表示など、多くの情報を一つの画面にまとめるためによく使われるUIです。

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

基本的な書き方

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

具体例

// 「Origin」というラベルのタブをクリックして内容を表示する場合
await page.getByText('Origin').click();

やってみよう（挑戦したい方向け）

⏭️ スキップしてもOKです！

演習ファイル

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

行う操作

手順動画

手順

ここでの詳しい手順は割愛しますが、これまでの演習と同じように、ブレークポイントとPick locatorを使ってぜひ挑戦してみてください。

ちなみに...

タブを切り替えた直後に、新しい情報を読み込む（ローディングが発生する）ようなケースでは、アコーディオンの時と同じように待機処理が必要になることがあります。

今は、「クリックしても、結果がすぐには現れないこともある」ということを覚えておくだけで大丈夫です。