はじめに
E2EテストやWebスクレイビングするときに使うPuppeteerについて調べてみました。Googleのカンファレンスでも紹介されていたのとNode.jsを使うことがあるので、それに合わせてPuppeteerも使っていこうと思います。
Puppeteerのソースを見たい方は、こちらです。
準備
$ brew install yarn
$ yarn add puppeteer
$ yarn add -D @types/node typescript ts-node @types/puppeteer
最小限の構成
package.json
{
"scripts": {
"test": "ts-node src/all.ts"
},
"dependencies": {
"puppeteer": "^5.2.1"
},
"devDependencies": {
"@types/node": "^14.6.4",
"@types/puppeteer": "^3.0.1",
"ts-node": "^9.0.0",
"typescript": "^4.0.2"
}
}
tsconfig.json
{
"compilerOptions": {
"sourceMap": true,
"target": "es2017",
"module": "commonjs",
"lib": ["dom", "es2017"],
"outDir": "./dist",
"rootDir": "./src"
}
}
src/all.ts
import { launch } from 'puppeteer'
(async () => {
const puppeteer = require('puppeteer')
const browser = await launch({
headless: true
})
const page = await browser.newPage()
await page.emulate(puppeteer.devices['iPhone X'])
const url = 'https://m.yahoo.co.jp'
await page.goto(url, {waitUntil: 'networkidle0'})
await page.screenshot({path: 'topPage.png', fullPage: true})
await browser.close()
})()
これらのファイルを置いて、以下を実行します。
$ yarn test
launchで使えるオプション
| オプション | 型 | 説明 |
|---|---|---|
| headless | boolean | ヘッドレスブラウザで起動するかどうか |
| args | string[] | ブラウザに渡す引数 |
| userDataDir | string | ユーザディレクトリのパス |
| devtools | boolean | Chrome DevToolsを開くかどうか。 これをtrueにするとheadlessは、falseとなる。 |
| ignoreHTTPSErrors | boolean | HTTPSのエラーを無視するかどうか |
| defaultViewport.width | number | ブラウザの横幅 |
| defaultViewport.height | number | ブラウザの縦幅 |
| defaultViewport.deviceScaleFactor | number | 拡大率 |
| defaultViewport.isMobile | boolean | モバイルかどうか |
| defaultViewport.hasTouch | boolean | タッチをサポートするかどうか |
| defaultViewport.isLandscape | boolean | 横画面にするかどうか |
| slowMo | number | Puppeteerの操作を何ms遅らせるか |
| timeout | number | タイムアウト（ms） |
page.gotoで使えるオプション
| オプション | 型 | 説明 |
|---|---|---|
| referer | string | 付与するreferer |
| waitUntil | string | どのイベントが発火されたら操作を開始するか。"load" or "domcontentloaded" or"networkidle0" or "networkidle2" |
page.screenshotで使えるオプション
| オプション | 型 | 説明 |
|---|---|---|
| path | string | スクショを出力するパス |
| type | string | 拡張子。"json" or "png" |
| quality | number | 画像のクオリティ。0~100で指定する。 |
| fullPage | boolean | 画面全体のスクショとするか |
| clip.x | number | 切り取るときのx座標 |
| clip.y | number | 切り取るときのy座標 |
| clip.width | number | 切り取るときの横幅 |
| clip.height | number | 切り取るときの縦幅 |
| omitBackground | boolean | 白色のバックグラウンドカラーをつけるか |
| encoding | string | 画像のエンコーディング。"base64" or "binary" |
おわりに
ユニットテストだけではテストしきれない部分があったり、いろいろなデバイス・環境で同じ操作のテストをしたいといったりE2Eテストには用途はたくさんあるかと思います。また、１度作ってしまえば、別の言語・FWに置き換えることになってもUIが変わらない限り使いまわせるメリットもあります。しかし、あまり細かく書いてしまうと改修を入れるたびにE2Eテストも修正しないといけなくなり、無駄な工数がかかってしまうデメリットもあるので、適宜調節しつつテストを書いていくと良いかと思います。
参考