ブラウザコンソールメッセージのキャプチャ

概要

ウェブサイトの開発中に、デバッグを助けるためにコードにいくつかのconsole.logステートメントを記述して、それらを削除するのを忘れてしまうことがあります。そして今、ウェブサイトの異なるページ間でDevToolsコンソールに記録されるすべてのコンソールメッセージを確認したいとします。

あるいは、ウェブサイトをテストしているときに、ブラウザで正しいデータが表示されるかどうかを確認するために、意図的にこれらのコンソールステートメントを記述したかもしれません。Nightwatchを使えば、このプロセスを自動化できます。

Selenium 4でChrome DevToolsプロトコルのサポートが利用可能になったため、NightwatchはブラウザのDevToolsコンソールに記録されるコンソールメッセージのキャプチャをサポートするようになりました。

コンソールメッセージのキャプチャ

ブラウザのDevToolsコンソールに記録されているコンソールメッセージをキャプチャすることで、テスト自体でそれらのメッセージにアクセスできます。そこで、ブラウザで期待どおりのデータが得られているかどうか、またはブラウザコンソールに記録されるべきではない予期しないコンソールステートメントがコードに存在するかどうかを確認できます。

必要なのは、ウェブサイトに移動する前に、必要なパラメーターを指定してbrowser.captureBrowserConsoleLogs()コマンドを呼び出すだけです。

captureBrowserConsoleLogs()は、新しいコンソールメッセージが記録されるたびにeventオブジェクトを引数として受け取るコールバック関数を受け入れます。受信したeventオブジェクトの仕様は次のとおりです。

例

describe('capture console events', function() {
  it('captures and logs console.log event', function() {
    browser
      .captureBrowserConsoleLogs((event) => {
        console.log(event.type, event.timestamp, event.args[0].value);
      })
      .navigateTo('https://www.google.com')
      .executeScript(function() {
        console.log('here');
      }, []);
  });
});

上記の例の出力

  Running Capture console messages:
───────────────────────────────────────────────────────────────────────────────────────────────────
error 2022-06-10T13:38:22.082Z here
No assertions ran.

推奨コンテンツ

• ブラウザJS例外のキャプチャ
• Selenium 4でのChrome DevToolsプロトコル