Zenn
🏷️

OGPの設定をPlaywrightで自動テストする

2024/01/04に公開
Playwright
#
E2E
Open Graph protocol
tech

どういう人向け

  • OGP の確認を毎回デプロイしてから Twitter に URL を貼り付けて確認している人
  • Twitter Card Validator が使えなくて困っている人
  • meta タグのテストってどうやって書くのか模索している人

サンプルリポジトリ

自分のサイトですが、こんな感じでテストを書いています。

https://github.com/ryokryok/mrozin.me/blob/main/tests/test.ts

Playwright の page.locator で meta タグのチェックを行う

Playwright で要素のチェックを行う時はawait page.getByRole("button")といった感じでページ内の要素を取得できます。

https://playwright.dev/docs/api/class-page#page-locator

Example を見た感じだと Body 内の要素の取得に使うものだと思われていそうですが、Head 内の要素も取得できます。

ということは、<meta property="og:title" content="Example.com" />も取得できるし、デプロイ前に OGP に準じているかチェックできると気が付きました。

実装したテスト自体は単純です。meta タグを取得して、toHaveAttribute で属性が想定通りの値になっているか確認するだけです。

今回の場合、静的なサイトを前提としたテストですが、データによって動的に meta タグが変わる場合は MSW でモックサーバーを立ててテストを書くのもいいでしょう。

test.ts
import { expect, test } from "@playwright/test";

test("check meta tags", async ({ page }) => {
  await page.goto("/");

  // Title
  expect(await page.title()).toBe("Example.com");

  // OGP
  await expect(page.locator('meta[name="description"]')).toHaveAttribute(
    "content",
    "Example site",
  );
  await expect(page.locator('meta[property="og:title"]')).toHaveAttribute(
    "content",
    "Example.com",
  );
  await expect(page.locator('meta[property="og:description"]')).toHaveAttribute(
    "content",
    "Example site",
  );
  await expect(page.locator('meta[property="og:url"]')).toHaveAttribute(
    "content",
    "https://example.com/",
  );
  await expect(page.locator('meta[property="og:image"]')).toHaveAttribute(
    "content",
    "https://example.com/images/ogp.jpg",
  );
  await expect(page.locator('meta[property="og:type"]')).toHaveAttribute(
    "content",
    "website",
  );

  // OGP for Twitter
  // note: Twitter OGP also requires the meta tag "og:url", "og:title", "og:description"
  // ref: https://developer.twitter.com/ja/docs/tweets/optimize-with-cards/guides/getting-started

  // required
  await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute(
    "content",
    "summary",
  );
  // optional
  await expect(page.locator('meta[name="twitter:site"]')).toHaveAttribute(
    "content",
    "@username",
  );
  // optional
  await expect(page.locator('meta[name="twitter:creator"]')).toHaveAttribute(
    "content",
    "@username",
  );
});

クロスブラウザーテストの必要性

厳密にチェックする場合、meta タグのテストはクロスブラウザで書いた方がいいです。

meta タグの中身は各ブラウザで JavaScript を通じて読み込まれることもあるし、Googlebot から読み込まれることもあるからです。

ただ正直に言えば OGP に従って meta タグを実装していることを確認できれば OK なので、個人サイト程度なら Chrome 環境でテストできればで充分かと思います。

まとめ

結局のところプレビュー用のデプロイをして Twitter の入力欄に URL 入力してプレビューされるか確認される工程はあると思いますが、当てずっぽうに実装してデプロイを繰り返すよりは効率がいいと思います。

Discussion