docker, playwright, typescriptでスクレイピング用のボイラープレートを作成した

tl;dr

https://github.com/msickpaler/docker-playwright-ts-boilerplate

事の経緯

webサイトからAPI情報を何百行と取得する必要があり、だるかったので簡略化したかった。
自動化とは言えないだろうが、相当な簡略化になるはず。

紹介

ディレクトリ構成

├── outputs
├── src
│   ├── libs
│   └── scripts

• outputs 出力したいファイルはここの配下に作成する。src/dir1/dir2/index.tsで出力されるスクショはoutputs/dir1/dir2/index/ss/sample.pngのように出力する(ように最初は設定してある)。
• src/libs おなじみのlib。隠蔽したい処理などはここに書く。
• scripts メインで触る部分。実際に実行される処理を書いたtsファイルを配置する。

使い方

1. playwrightがないのでとりあえずプロジェクトルートでnpm i
2. 実行ファイルをscripts配下に作成(例えばscripts/google/takeHPScreenShot.ts)
3. やりたい処理を書く

// takeHPScreenShot.ts

import { fileURLToPath } from "url";
import { initPlaywrightFunc } from "../libs/init-playwright-func.js";
import playwright from "playwright";

// 注意点1 関数をエクスポートすること
// 注意点2 関数は`(page: playwright.Page) => Promise<void> | void`の型であること
export const takeHPScreenShot = async (page: playwright.Page) => {
  const __filename = fileURLToPath(import.meta.url);
  const { takeSS } = initPlaywrightFunc(__filename, page);

  await page.goto("https://www.google.com/");
  await takeSS("google.png");
};

3. src/index.tsの内容を書き換える

import { container } from "./container.js";
import { example } from "./scripts/example.js";

await container(example); // これをコメントアウト

// ---これを追加
import { takeHPScreenShot } from "./scripts/google/takeHPScreenShot.js";
await container(takeHPScreenShot);
// ---これを追加

4. shでdocker-compose upを実行
5. 正常に終了すればoutputs/google/takeHPScreenShot/ss/google.pngが作成されている