擷取瀏覽器主控台訊息

概觀

在開發網站時，您可能會在程式碼中放入一些 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 通訊協定