スクリーンショットとPDFの取得

1. 前提：テストコードの共通骨格（Node.js 版）

ts
import { chromium } from 'playwright';

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();

  await page.goto('https://example.com');    // 必要に応じて待機を追加
  /* ここにスクリーンショット／PDF API を呼び出す */
  await browser.close();
})();

page オブジェクトのメソッドを呼ぶだけで画像・PDF を手軽に取得できます。

---

2. スクリーンショット取得

補足機能

• animations:'disabled' で GIF/CSS アニメを停止して安定した撮影。

• mask:[locator] や maskColor:'#ccc' で個人情報を塗りつぶし。

• scale:'device'（デフォルト）と scale:'css' の違いで Retina 表示をコントロール。

• Playwright Test では test.info().attachments.push({ name:'screenshot', path, contentType:'image/png' }) を使うと失敗時にレポートへ自動添付されます。

---

3. PDF 生成（Chromium 専用）

注意：page.pdf() は Chromium のみ対応。Firefox・WebKit では例外が投げられます。

ts
await page.pdf({
  path: 'report.pdf',
  format: 'A4',               // または 'Letter' 等
  landscape: false,
  printBackground: true,      // 背景画像／色を含める
  margin: { top:'20mm', right:'10mm', bottom:'20mm', left:'10mm' },
  scale: 0.9,                 // ページ全体を縮小
  displayHeaderFooter: true,
  headerTemplate: '<span class="title"></span>',
  footerTemplate: '<span class="pageNumber"></span>/<span class="totalPages"></span>'
});

主なオプション

---

4. ベストプラクティス

1. 読み込み完了を保証

   ts
   await page.goto(url, { waitUntil: 'networkidle' }); // リソース読み込み後に撮影
   

2. 動的コンテンツの安定化

   • 必要に応じて await page.waitForSelector('selector', { state:'attached' });

   • ローディングスピナーが消えるまで waitForFunction を使う。

3. CI／コンテナ環境

   • フォント不足で文字化けする場合：fonts-noto-cjk などを入れる。

   • --disable-gpu は不要（Chromium は headless で自動無効）。

4. データの秘匿

   • スクリーンショットに個人情報を含めないよう mask・クリッピングで除外。

5. パフォーマンス

   • 大量ページの PDF 生成はメモリを消費するので、ページごとにブラウザを再起動するか、timeout を調整。

---

5. 典型的なトラブルと対処

---

まとめ

Playwright では page.screenshot() と page.pdf() が中心 API で、オプションを組み合わせるだけで高品質なキャプチャを自動取得できます。テストレポートや仕様書としての PDF 出力、回帰テスト用の差分比較スクリーンショットなど、幅広い自動化シーンで活用が可能です。