Node.js+Selenium WebDriverでブラウザのエラーログを取得する話 #Node.js

はじめに

こんにちは。
surimi_panです。

本記事はNorth Detail Advent Calendar 2019の19日目の記事となります。
日付の数字(19)が西暦の下2桁(19)と一緒ですが、当記事に19に関わる要素は特にありません。

今回はNode.jsとSelenium WebDriverを利用して、
Google Chromeの開発者ツールにて出力されるログの中にエラーが無いかをチェックします。

要件

Google Chromeの開発者ツールに出力されるエラーを取得したい。
取得するエラーログは深刻なものに限る。（WARNINGは含まない）

手段

Selenium WebDriverの、ログを取得する機能( selenium-webdriver/lib/logging )を利用します。
ブラウザのログをレベル（＝ログの重要度）で絞り込んで取得することができます。

実装

require('chromedriver');
const chrome = require('selenium-webdriver/chrome');

const webdriver = require('selenium-webdriver');
const Builder = webdriver.Builder;
const capabilities = webdriver.Capabilities.chrome();
const {Preferences, Type, Level} = require('selenium-webdriver/lib/logging');

// ログを調べたいWebページのURL
const targetUrl = '調べたいWebページのURL';

const logPrefs = new Preferences();
logPrefs.setLevel(Type.BROWSER, Level.SEVERE);
capabilities.setLoggingPrefs(logPrefs);

const options = new chrome.Options(capabilities);

// エラーログを出力する
(async function printConsoleErrors() {
  const driver = await new Builder().forBrowser('chrome')
                                    .setChromeOptions(options)
                                    .build();

  await driver.get(targetUrl);
  await driver.sleep(5000);

  let errors = await driver.manage()
                           .logs()
                           .get(Type.BROWSER);
  for(var i=0; i < errors.length; i++) {
    console.log(errors[i].message);
  }

  await driver.quit();
})();

詳細

取得するログの種類の絞り込み

const logPrefs = new Preferences();
logPrefs.setLevel(Type.BROWSER, Level.SEVERE);
capabilities.setLoggingPrefs(logPrefs);

取得するログの種類、レベルを絞り込みます。
今回はブラウザのエラーログを取得したいので、
取得したいログの対象をBROWSER(ブラウザ)、
取得したいログのレベルをSEVERE(最も深刻なもの→エラー)に設定します。

ログの絞り込みの設定を適用

const options = new chrome.Options(capabilities);

const driver = await new Builder().forBrowser('chrome')
                                  .setChromeOptions(options)
                                  .build();

WebDriverインスタンスを作る際にログの絞り込み設定を反映させます。

ページの遷移と待機

await driver.get(targetUrl);
await driver.sleep(5000);

チェックしたいページに遷移して一定時間待機します。
時間差でエラーが出るものを考慮して気持ち長めに待機時間を設定しています。

エラーログの取得

let errors = await driver.manage()
                         .logs()
                         .get(Type.BROWSER);

ブラウザのエラーログを取得します。
取得されるログのレベルはSEVEREに設定されていますので、エラーのみ取得します。

取得したエラーの出力

for(var i=0; i < errors.length; i++) {
  console.log(await errors[i].message);
}

配列で返ってくるので、展開してコンソールに出力します。

まとめ

実行すると、エラーを吐くページではエラーログが次々出力されます。

Webページのスクレイピングやフォームのテスト等で利用されがちなSeleniumですが、
変わったこともできますよ！という記事でした。

資料が少なく、公式ドキュメントとにらめっこしながらの実装となりました。
不備不足あればご指摘頂けると大変助かります。