Webブラウザ自動運転 - Playwright / Typescript

(自分メモ)

環境

• Ubuntu 22.04 on wsl2 on Windows 11
• node: v21.7.3
• npm: 10.5.0

プロジェクト初期化

プロジェクト履歴

bash

npm i playwright express
npm i -D @types/express

➜サンプルソース

src/main.ts

import Express from "express"
import Playwright from "playwright"

const app = Express()
app.get("/", runBrowser)
app.listen(8080, () => { console.log(`Running server.`); })

async function runBrowser(req: Express.Request, res: Express.Response) {
  const browser = await Playwright.chromium.launch({ headless: true })
  const page = await browser.newPage()
  await page.goto("https://digital.onl.jp/")
  const screenshot = await page.screenshot()
  res.setHeader("Content-Type", "image/png")
  res.send(screenshot)
  await browser.close()
}

Build

npm i         # clone後1回
npx tsc

Run

node build/main.js

ブラウザで http://localhost:8080/xxx にアクセス。

(余談) ブラウザ操作でテストコード生成

テストコード生成

npx playwright install
npx playwright codegen -o 1.test.js

※testスクリプトの拡張子は.test.js

テストコード再生

npm install -D @playwright/test
npx playwright test --headed 1.test.js

次回