Tailwind Logo

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

関連技術

公開日: 2023-10-16

ブログでは Playwright に関してしばらく取り上げていきます。というのも、検索結果に対してそのページのスクリーンショットを利用したい、というニーズに対応する簡単なサンプルを作っていくことにします。

コンテンツ更新

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

Playwright とは？

ブラウザの機能を利用してテストの自動化を実施したい、というニーズに応えることができるツールとして、２つのツールがよく紹介されています。

今回はこの比較、ではなく Playwright を前提として進めていきます。主な理由としては、

  • ブラウザの対応に関しては、Playwright の方が豊富である
  • Playwright の開発はマイクロソフトが携わっており、こまめにメンテナンスされている

いつの頃からか、マイクロソフトがサポートをしているオープンソースのプロジェクトに関して、安心して使えるイメージを持つようになりました。今のところは。

Typescript のプロジェクトを作る

これまでこのブログでは Next.js や Vite を使ってサンプルを紹介してきましたが、今回は API 的に動作するプロジェクトにするために、express を利用したプロジェクトとして作っていきます。

今回は Node.js を利用できる Windows の環境で作業を進めていきます。まずプロジェクトを作成します。

PowerShell 
mkdir playwright
cd playwright
npm init -y
playwrifht01.png

必要なモジュールを追加していきます。

PowerShell 
npm install express
npm install -D typescript @types/node @types/express

続いて tsconfig.json を作成します。今回は以下のコードで作成をしました。

JSON 
{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "outDir": "./dist",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

今回 src の下にファイルをおく形で設定しているため、まず最初に src/app.ts のファイルを以下のように作成します。

TypeScript 
import express from "express";
import { hello } from "./routes/hello";

const app = express();
const port = 3000;

// API Test
app.get("/api/hello", hello);

// ルートパス('/')にアクセスした場合のハンドラー
app.get("/", (req, res) => {
  res.send("Welcome to the Sitecore Search Utility");
});

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

このファイルで読み込んでいる ./routes/hello のファイルを src/routes/hello.ts として用意します。

TypeScript 
// hello.ts
import { Request, Response } from "express";

export const hello = (req: Request, res: Response) => {
  res.json({ message: "Hello World" });
};

最後に、package.json の scripts の部分を以下のように書き換えます。

JSON 
  "scripts": {
    "build": "tsc",
    "dev": "node ./dist/app.js",
    "start": "tsc && npm run dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

これで準備完了です。npm run build を実行すると dist のフォルダにコンパイル済みの JavaScript ファイルが生成されているのがわかります。

playwright02.png

続いて実行します。 npm run start のコマンドを実行をすると、以下のように表示されます。

playwright03.png

実際にブラウザで http://localhost:3000/ にアクセスをすると、以下のようにメッセージが表示されます。

playwright04.png

すでに作成している http://localhost:3000/api/hello にアクセスをするとどうなるでしょうか？以下のような結果が表示されます。

playwright05.png

シンプルな express を利用した typescript のサンプルができました。

まとめ

今回は長くなったので Playwright に関する説明、そして typescript のサンプルを作るところまで紹介をしたところで終わります。次回は、Playwright を利用して指定した URL のスクリーンショットを撮るところまで、作り上げていきます。

関連タグ