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

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

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

Playwright をインストール

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

npm install playwright@latest

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

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 として以下の行を追加してください。

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

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

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 にアクセスをすると、以下のようにスクリーンショットが表示されます。

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

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

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

  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);

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

まとめ

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