Webページの基本的な要素である、「リンク」のクリック操作に挑戦です。

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

Playwrightを使って、リンクをクリックし、別のページに移動する操作を学びます。操作そのものは、これまで何度も使ってきた click() と全く同じです。今回は新しいコマンドを覚えるというよりも、リンクという要素の特性を理解することを目的としています。

---

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

基本的な書き方

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

具体例

// 「Home」というテキストを持つリンク（<a>タグ）をクリックする場合
await page.getByRole('link', { name: 'Home' }).click();

---

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

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

ここから先のいくつかの演習は、click() コマンドを使った復習が中心です。もし「クリック操作はもう大丈夫！」と感じる方は、ここは読み飛ばして次の章に進んでいただいても問題ありません。もちろん、挑戦したい方向けに、練習用のファイルと解答も用意してあります。

演習ファイル

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

行う操作

項目	行う操作
Not Found	クリックする

---

手順動画

---

手順

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

---

ちなみに...

私たちが普段クリックしている「リンク」は、HTMLという設計図の中では <a> という要素（アンカータグと呼ばれます）で表現されています。

この <a> タグは、href（エイチレフ）という属性を持っており、その中に「どこに移動するか」というURLが書かれています。Playwrightは、このリンクをクリックすると、hrefに書かれたURLにページが移動する、という仕組みをテストしているのです。

（※HTMLの詳しい学習は、資料4で行いますので、今は「へぇ、そうなんだ」くらいで大丈夫です。）