Tailwind Logo

Playwright を利用してスクリーンショットを取得する（後編）

関連技術

公開日: 2023-10-17

Typescript のサンプルを作るところまでで、Playwright は何も出てきませんでした。今回は早速、追加していきたいと思います。

コンテンツ更新

以下のページで最新の情報を確認してください

前回記事は以下の通りです。

Playwright をインストール

プロジェクトに対して、以下のように playwright をインストールしてください。

PowerShell 
npm install playwright@latest

続いて routes/screenshot.ts というファイルを以下のコードを利用して作成します。

TypeScript 
import { Request, Response } from "express";
import { chromium } from "playwright";

export const screenshot = async (req: Request, res: Response) => {
  const urlParam = req.query.url as string; 

  if (!urlParam) {
    return res.status(400).json({ error: "URL parameter is required" });
  }

  console.log(`Processing screenshot for URL: ${urlParam}`);

  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto(urlParam);
  await page.waitForTimeout(2000);

  const screenshot = await page.screenshot();
  res.setHeader("Content-Type", "image/png");
  res.send(screenshot);

  await browser.close();
  console.log("Screenshot taken");
};

これで screenshot.ts の準備ができました。続いて、app.ts ファイルを変更します。まず import として以下の行を追加してください。

TypeScript 
import { screenshot } from "./routes/screenshot";

続いて、２つ目のエンドポイントとして hello の下に今回のエンドポイントを追加します。

TypeScript 
app.get("/api/hello", hello);
app.get("/api/screenshot", screenshot);

これで、hello 以外の API として screenshot が動くようになります。実際に npm run start で実行します。実行後、http://localhost:3000/api/screenshot?url=https://haramizu.com にアクセスをすると、以下のようにスクリーンショットが表示されます。

playwright06.png

ブラウザでアクセスをして、 1280 x 720 のサイズで取得したスクリーンショットが取れている形です。

取得する画面のサイズを変更する

上記は非常にシンプルなスクリーンショットを撮る仕組みです。表示するのに少し時間を待って、スクリーンショットを撮っている形です。ではスクリーンのサイズを変更する場合はどうすればいいでしょうか？以下のように、setViewPortSize で画面のサイズを指定することができます。

TypeScript 
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.setViewportSize({ width: 1600, height: 1200 });
  await page.goto(urlParam);
  await page.waitForTimeout(2000);

これで取得したスクリーンショットは以下の通りです。

playwright07.png

まとめ

今回、Playwright を利用するのはスクリーンショットを取得することが目的のため、これをベースにツールに仕上げていきます。このツール自体は、ブラウザでの動作に関してシナリオを組んでテストを自動化することができる便利なツールです。興味があればぜひ色々と試してみてください。

関連タグ