2
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

はじめに

こんにちは。
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ですが、
変わったこともできますよ!という記事でした。

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
2
Help us understand the problem. What are the problem?