アコーディオン(Accordion)

👆 これがアコーディオンです！クリックして開閉してみてください

What is Lorem Ipsum? ▼

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Where does it come from? ▼

Contrary to popular belief, Lorem Ipsum is not simply random text.

Why do we use it? ▼

It is a long established fact that a reader will be distracted by the readable content.

クリックすると、隠れていた情報がアコーディオンカーテンのように開閉するUIの操作に挑戦しましょう。

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

Playwrightを使って、アコーディオンを展開・折りたたむ方法を学びます。アコーディオンは、FAQ（よくある質問）や、たくさんの設定項目をスッキリ見せたい画面などでよく使われるUIです。

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

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

// 「What is Lorem Ipsum?」という見出しをクリックして展開する場合
await page.getByText('What is Lorem Ipsum?').click();

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

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

項目	行う操作
What is Lorem Ipsum?	展開する
Where does it come from?	折りたたむ

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

アコーディオンは、クリックした後に、サーバーから情報を読み込んで表示する（非同期処理）ことがよくあります。

そのため、アコーディオンをクリックしてすぐに中のテキストを取得しようとすると、まだ表示が完了しておらず、テストが失敗してしまうことがあります。

こうした不安定な（フレーキーな）テストを防ぐためには、後ほど学ぶ待機処理を使い、「中のテキストが表示されるまで待つ」という命令を追加するのが一般的です。

今は、「クリックしても、結果がすぐには現れないこともあるんだな」ということを、頭の片隅に置いておいてください。