こんにちは！フロントエンド開発の世界へようこそ。
Webサイトを作っていると、「リンクをクリックしたとき、ちゃんと正しい場所に飛んでくれるかな？」「そもそもこのリンク、壊れていないかな？」と不安になること、ありますよね。
人間ならクリックして確かめれば済みますが、サイトの規模が大きくなると、一つずつ手作業でチェックするのは大変です。そこで登場するのが、テスト自動化ツールの「Playwright（プレイライト）」です。
今日は、HTMLの基本である `` タグの「到達性（ちゃんと繋がっているか）」を、Playwrightを使ってロボットに自動チェックさせる方法を、専門用語を控えめに解説していきますね。
—
リンクは「Webサイトの玄関」
Webサイトにおける `` タグは、例えるなら「お店の看板から続く、別の売り場への通路」です。もしその通路が途切れていたら、お客さんは迷子になってしまいますよね。
私たちがチェックしたいのは、主にこの3つです。
1. href属性は正しいか？（行き先は合っている？）
2. クリックしたら意図した場所に移動できるか？（通路は通行可能？）
3. サーバーから「OK！」の合図（ステータスコード200）が返ってくるか？（お店は営業中？）
これらをPlaywrightで一つずつ紐解いていきましょう。
—
1. リンクの「行き先」をチェックする
まずは、HTMLのソースに書かれた `href` の中身が正しいか確認しましょう。これは「看板に書かれた住所が正しいか」を確認する作業に似ています。
test(‘リンクの行き先が正しいか確認する’, async ({ page }) => {
// サイトを開く
await page.goto(‘https://example.com’);
// 「お問い合わせ」というテキストを持つリンクを探す
const link = page.getByRole(‘link’, { name: ‘お問い合わせ’ });
// href属性が正しいURLになっているかチェック！
// expectは「こうなっていてほしい」という願いを書く場所です
await expect(link).toHaveAttribute(‘href’, ‘/contact’);
});
`getByRole` は、「場所」ではなく「役割」で要素を探す、今のWeb開発で最も推奨されている賢いやり方です。これを使うことで、スクリーンリーダーを使う人にとっても優しい設計になっているかどうかも、自然と意識できるようになりますよ。
—
2. クリックして「ページ遷移」をテストする
次に、実際にリンクをクリックして、画面が切り替わるかを確認します。
test(‘リンクをクリックしてページが移動するか確認’, async ({ page }) => {
await page.goto(‘https://example.com’);
// クリック！
await page.getByRole(‘link’, { name: ‘お問い合わせ’ }).click();
// URLが正しく切り替わったか確認（URLに「/contact」が含まれているか？）
await expect(page).toHaveURL(/.contact/);
});
「あれ、思った場所に飛ばない！」というときは、`href` の書き間違いや、ルーティングの設定ミスが原因なことが多いです。こうしてテストを書いておけば、修正したあとにすぐ「大丈夫！」と確認できるので、精神衛生上とても良いですよ。
—
3. 「404エラー」になっていないか調べる（応用編）
最後は少しだけステップアップして、リンク先の「状態」を確認してみましょう。実は、URLが合っていても、サーバー側のトラブルで「ページが見つかりません（404）」になることがあります。
test(‘リンク先が正常に表示されるか（200 OK）を確認’, async ({ page, request }) => {
// ページ上のリンクを取得
const link = await page.getByRole(‘link’, { name: ‘お問い合わせ’ }).getAttribute(‘href’);
// requestを使って、実際にそのURLに「アクセスできる？」と聞いてみる
const response = await request.get(`https://example.com${link}`);
// サーバーからの返事が「200（成功）」であることを確認
expect(response.status()).toBe(200);
});
このコードは、「リンクをクリックする前」に、裏側で「そのURL、ちゃんと営業中？」と確認しに行くイメージです。これなら、ページ全体を読み込む必要がないので、テストのスピードも爆速になります。
—
つまずきやすいポイントへのアドバイス
初めてテストを書くとき、「エラーが出た！」と焦ることもあるかもしれません。でも大丈夫、エラーは「ここを直せばもっと良くなるよ」というブラウザからの親切なサインです。
- 「要素が見つかりません」と言われたら：
`getByRole` の指定が正しいか、あるいはページが完全に読み込まれる前にテストが走っていないか確認してみてください。
- 「URLが違います」と言われたら：
`/`（スラッシュ）が一個足りない、なんてことはベテランでもよくあります。まずは落ち着いてURLをコピー＆ペーストしてみましょう。
—
最後に：テストは「あなたの作業を守る盾」です
自動テストと聞くと難しく感じるかもしれませんが、要は「自分や仲間が作ったサイトを、機械が代わりにパトロールしてくれている」だけなんです。
最初は小さなリンク一つからで構いません。こうして一つずつ「正しい状態」を積み上げていくことが、結果として「世界で一番信頼されるWebサイト」を作る一番の近道になります。
ぜひ、あなたのプロジェクトでも試してみてくださいね。何か分からないことがあったら、いつでもまた聞きに来てください。あなたの挑戦を、心から応援しています！
コメント