<p>自動テストについて調べてみたなかで手始めに「<a href="https://playwright.dev/" target="_blank" rel="noopener noreferrer nofollow"><u>Playwright</u></a>」を触ってみることに。</p><p>まずは簡単なところから、<strong>URLのリストをもとにスクリーンショットを取得する</strong>処理を試しました。</p><h2 id="h9f510f3156">やりたいこと</h2><ul><li>複数のURLに対して、順番にアクセスしながらスクリーンショットを取得</li><li>URLリストはJSONファイルで管理</li></ul><h3 id="h009dfaed07">番外</h3><ul><li>Basic認証がある場合も対応</li><li>特定の要素を非表示にしてからキャプチャを取得</li><li>モバイルサイズ・PCサイズなど、デバイスごとにサイズ指定</li><li>JPEGで保存する場合は画質を調整</li></ul>

npm init -y
npm install -D @playwright/test
npx playwright install

import { test } from "@playwright/test";
import fs from "fs";

const urls: string[] = JSON.parse(fs.readFileSync("./pages.json", "utf-8"));

for (const url of urls) {
  test(`screenshot for ${url}`, async ({ page }) => {
    await page.setViewportSize({
      width: 1280,
      height: 800,
    });
    await page.goto(url, { waitUntil: "networkidle" });

    // 特定の要素を非表示にする
    await page.locator(".クラス名").evaluateAll((els) => {
      els.forEach((el) => (el.style.display = "none"));
    });

    const u = new URL(url);

    // パス末尾の / を削除し、先頭の / を除き、/ を _ に変換
    const cleanPath = u.pathname
      .replace(/\/$/, "")
      .slice(1)
      .replace(/\//g, "_");

    // ホスト名（localhost や example.com）とパスを組み合わせてファイル名を生成
    const pathname = `${u.hostname}${cleanPath ? `_${cleanPath}` : ""}`;

    // 最終的なファイル名（screenshots/example.com_about_team.jpg など）
    const filename = `screenshots/${pathname}.jpg`;

    // 保存先ディレクトリ作成
    fs.mkdirSync("screenshots", { recursive: true });

    // スクリーンショット取得
    await page.screenshot({ path: filename, fullPage: true, quality: 80 });
  });
}


[
  "ページURL１",
  "ページURL２",
  "ページURL３"
]

<h3 id="h251ac368fd">実行して取得したスクリーンショット</h3><p>Chrome拡張機能などで取得したスクリーンショットほどスッキリ・クリアな感じの画像ではないけど、確認程度なら十分な画質。</p><p>qualityを100にしても変わらずでした。</p>

<h2 id="h5ca22457fd">特定の要素を非表示にする</h2>

await page.locator(".クラス名").evaluateAll((els) => {
  els.forEach((el) => (el.style.display = "none"));
});

<p>クラス名を指定して<code>display:none</code>にしています。</p><p>↓は、左側がもとの状態で右側がクラス名を指定してサイドバーを非表示にして取得したスクショです。</p>

<h2 id="h92d2633638">Basic認証を事前設定する</h2><p><code>httpCredentials</code>を指定するだけなので簡単に設定できます。</p>

const config = {
  use: {
    trace: 'on-first-retry',
    httpCredentials: {
      username: 'Basic認証ユーザ名',
      password: 'Basic認証パスワード',
    },
  },
};
export default config;

<h2 id="h4ae7f02243">今後やりたいこと</h2><p>今回は静的なページを対象にしたスクショ取得を試しましたが、次は<strong>フォームのテストや動的操作の自動化</strong>も試してみたいと思っています。</p><p>Playwright、おもしろい。</p>

<p>📝参考</p><ul><li><a href="https://testomat.io/blog/how-to-capture-screenshots-videos-playwright-js-tutorial/" target="_blank" rel="noopener noreferrer nofollow">How To Capture Screenshots &amp; Videos — Playwright JS Tutorial</a></li><li><a href="https://zenn.dev/frontendflat/articles/b2c98a68ff9687" target="_blank" rel="noopener noreferrer nofollow">Playwrightでサイトマップに記載されたページのスクリーンショットを保存する</a></li><li><a href="https://scrapeops.io/playwright-web-scraping-playbook/nodejs-playwright-take-screenshots/" target="_blank" rel="noopener noreferrer nofollow">Playwright Guide: How To Take Screenshots</a></li></ul>

841-biborokuWebフロントエンドの備忘録

E2E