isoppp

puppeteerでステータスコード系エラーとconsoleのエラーを拾う

  • Javascript
  • puppeteer
  • e2e

- table of contents -

意外と情報がなく、意外とはまったため。

今回のソースはこちら(github)

準備

  • 公式がasync/awaitが多いので一応予習

  • それに伴いnode.jsは8系(LTS基準)

  • 適当なディレクトリを作る

  • npm init

  • npm i puppeteer

  • エラーを吐くindex.htmlの作成

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
</head>
<body>
  <img src="http://placeholder.via/50x50" alt="">
  <img src="hoge.png" alt="">

<script>
  console.log('hoge')
  console.log(hoge)
</script>
</body>
</html>
  • puppeteerのコード index.jsの作成
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // consoleに出るエラーの検知
  page.on('pageerror', error => {
    console.log('consoleに出てるエラーだよ', error.message)
  });

  // 各リクエストのレスポンスを検知
  page.on('response', response => {
    console.log(response.status(), response.url()) // 全リクエストのステータスコードとURLをlog
    if (300 > response.status() && 200 <= response.status()) return;
    console.warn('status error', response.status(), response.url()) // ステータスコード200番台以外をlog
  });

  await page.goto('http://localhost:3000/', {waitUntil: 'networkidle2'});
  await browser.close();
})();
  • package.jsonのscriptsの調整(やらなくても良い)
{
  "scripts": {
    "serve": "python -m SimpleHTTPServer 3000 index.html",
    "test": "node index.js"
  }
}
  • npm run serve
  • 別タブで npm test

(こういう複数コマンドを適当に実行する方法が何かあった気がするものの忘れたのでわかる方いたらコメント頂けたらとてもとてもうれしいです。(serve->test))

結果

200 'http://localhost:3000/'
consoleに出てるエラーだよ ReferenceError: hoge is not defined
    at http://localhost:3000/:13:15
404 'http://localhost:3000/hoge.png'
status error 404 http://localhost:3000/hoge.png
  • pageerrorresponse が意外と見つからなかった。
  • page.goto の後に書いてあるコードもあったりしたものの当たり前な気もするものの page.goto の前に書かないといけなかった。