概述

在开发网站时,您可能会在代码中添加一些 console.log 语句以帮助调试,然后忘记删除它们。现在,您想查看所有记录到不同网站页面 DevTools 控制台的控制台消息。

或者,您可能在测试网站时故意添加了这些控制台语句,以查看您是否在浏览器中获得了正确的数据。现在,您可以使用 Nightwatch 自动化此过程。

随着 Selenium 4 中的 Chrome DevTools 协议支持 现已可用,Nightwatch 现在支持捕获记录到浏览器 DevTools 控制台的控制台消息。

此命令仅适用于基于 Chromium 的浏览器,例如 Google Chrome 和 Microsoft Edge。

捕获控制台消息

捕获记录到浏览器 DevTools 控制台的控制台消息使您可以在测试本身中访问这些消息,在那里您可以检查您是否在浏览器中获得了预期数据,或者您的代码中是否存在不应该记录到浏览器控制台的意外控制台语句。

您只需在导航到您的网站之前,使用所需参数调用 browser.captureBrowserConsoleLogs() 命令即可。

captureBrowserConsoleLogs() 接受一个回调函数,该函数将在每次记录新控制台消息时接收一个 event 对象作为参数。接收到的 event 对象的规范如下所示

名称 类型 描述
类型 字符串 调用的类型。
例如:logdebuginfoerror 等。
时间戳 数字 记录控制台消息的时间。
参数
数组[对象] 对象的 value 属性包含日志。
例如用法:args[0].value
有关对象的规范的更多详细信息,请访问 此处

示例

tests/capture-console-messages.js
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.