检查是不是已将错误写入控制台

Posted 2023-02-15

【中文标题】检查是不是已将错误写入控制台

【英文标题】：Check if an error has been written to the console检查是否已将错误写入控制台

【发布时间】：2019-05-22 17:04:01

【问题描述】：

我正在尝试寻找一种方法来检查在运行 cypress 单元测试时是否将错误写入控制台。

我知道如何将某些内容记录到控制台

cy.log('log this to the console');

但不是如何检查是否写入了错误。

对如何从（浏览器）控制台日志中读取错误有何建议？

注意：可能不是“智能”测试方式，但有时我使用的 js 库会“抱怨”并将错误写入浏览器日志。这是为了简化测试。

【问题讨论】：

您对此有什么解决方案吗？我仍然想知道如何解决它。谢谢！

很遗憾没有：| -> 我还发现它作为页面加载后的一般测试非常有用......不仅仅是错误，还有弃用警告......

确实如此。我们记录了一些跟踪信息，这就是我们想要断言的。在 Selenium 中，我们可以简单地使用 driver.browser.manage.logs.get(:browser)

【参考方案1】：

这正是我在控制台中捕获任何错误并断言日志计数所需的。只需在cypress/support/index.js中添加以下内容

Cypress.on('window:before:load', (win) => 
  cy.spy(win.console, 'error');
  cy.spy(win.console, 'warn');
);

afterEach(() => 
  cy.window().then((win) => 
    expect(win.console.error).to.have.callCount(0);
    expect(win.console.warn).to.have.callCount(0);
  );
);

【讨论】：

最简单干净的方式恕我直言

用户可以试试这个模块用于 cypress：npmjs.com/package/cypress-fail-on-console-error

出现错误：[Function] is not a spy or a call to a spy! in window -then function()。我逐字复制代码。还尝试将Cypress.on 放入before 挂钩，但结果相同。

【参考方案2】：

自之前的答案以来已经有一些更新。

由于每个cy.visit 都会重新创建窗口，赛普拉斯建议将存根作为cy.visit 命令的一部分。

cy.visit('/', 
  onBeforeLoad(win) 
    cy.stub(win.console, 'log').as('consoleLog')
    cy.stub(win.console, 'error').as('consoleError')
  
)

//...
cy.get('@consoleLog').should('be.calledWith', 'Hello World!')
cy.get('@consoleError').should('be.calledOnce')

有关更多详细信息，请参阅官方常见问题解答以排除控制台：https://docs.cypress.io/faq/questions/using-cypress-faq.html#How-do-I-spy-on-console-log

配方存储库：https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/stubbing-spying__console

【讨论】：

这看起来很有希望！非常感谢！我只需要找点时间仔细看看：| （请多多包涵）

【参考方案3】：

编辑：以下在无头模式下不会直接登录到终端，但它仍然无法通过 AUT 的console.error 测试并间接显示错误消息，即使在无头终端中，这也可能是您想要的。

我不太清楚你的意思，但让我们看看所有可以在 cypress 中记录输出的地方，以及如何处理几种情况。

首先，概述：

要登录命令日志，您可以使用：

// from inside your test
cy.log('foo');

登录 devTools 控制台：

// from inside your test
console.log('bar');

要登录终端，您需要从赛普拉斯的节点进程中登录：

// from within e.g. your plugin/index.js file
console.log('baz');

如何将 AUT 的错误记录到终端、命令日志，以及测试失败

（注意，这里的 AUT 代表 Application under test，意思是您的应用程序）。

我还使用ansicolor 包在终端中将错误显示为红色，这是可选的。

// plugins/index.js
const ansi = require(`ansicolor`);
module.exports = ( on ) => 
    on(`task`, 
        error ( message ) 
            // write the error in red color
            console.error( ansi.red(message) );
            // play `beep` sound for extra purchase
            process.stdout.write(`\u0007`);
            return null;
        
    );
;

注意：使用内部 cy.now() 命令来解决赛普拉斯在 (IMO) 不应该抛出 Cypress detected that you returned a promise 的倾向。

（改编自https://github.com/cypress-io/cypress/issues/300#issuecomment-438176246）

// support/index.js or your test file
Cypress.on(`window:before:load`, win => 

    cy.stub( win.console, `error`, msg => 
        // log to Terminal
        cy.now(`task`, `error`, msg );
        // log to Command Log & fail the test
        throw new Error( msg );
    );
);

【讨论】：

可能我的问题不够清楚......抱歉。如果写入错误，我需要知道如何从浏览器控制台读取...

“从浏览器控制台读取”是什么意思？如何阅读，在哪里阅读？你打算完成什么？在我的回答中，当您的应用程序写入 console.error 时，测试失败并同时记录到命令日志和终端（即使是无头）。这不是你想要的？

我想“检查是否有错误已写入控制台”，例如某些 lib 会引发一个错误，该错误会记录在浏览器控制台中（由 console.error('some error'); 模拟）。所以我正在尝试检查 DevTools 控制台中是否有错误。

我无法理解这与我的答案中的代码有何不同。

我试图在测试中运行你的第二个 sn-p 但我无法让它工作：`it('so', () => // support/index.js 或你的测试文件 Cypress.on('window:before:load', (win) => console.error('some warning'); cy.pause(); cy.stub( win.console, 'error', ( msg) => cy.pause(); // 记录到终端 cy.now('task', 'error', msg ); cy.pause(); // 记录到命令日志 & 测试失败 throw new Error (味精);););); `

【参考方案4】：

目前没有直接的方法可以满足您的要求，但是对于如何最好地获取此信息已经进行了一些很好的讨论。我在这里复制了一个解决方案，但如果您点击 github 链接，您可以看到其他建议的解决方案。

此 sn-p 取自此处的 github 问题：https://github.com/cypress-io/cypress/issues/300

仅供参考，一个简单的解决方案就是监视控制台功能。 cy.window().then((win) => cy.spy(win.console, "log") )

每次调用该函数时都会打印一个命令日志，并且 您还可以断言已记录的内容。

根据您要断言出现问题的原因的另一个选项是在无头模式下的测试下打印错误。工程副总裁创建了一个 NPM 包来为您执行此操作。

Cypress-failed-log

【讨论】：

谢谢。如何检查console.error('some error'); 是否已写入控制台？

【参考方案5】：

如果您只是想确保控制台中没有错误（这是我假设的最多用例），这是最简单的方法。

# npm
npm install cypress-fail-on-console-error --save-dev
# yarn
yarn add cypress-fail-on-console-error -D

然后添加到您的 support/index.ts 文件中：

import failOnConsoleError from "cypress-fail-on-console-error"
failOnConsoleError()

现在，当打印控制台错误时，您的 cypress 测试会及时失败。

【讨论】：

各种配置选项为您提供额外的灵活性。查看自述文件：npmjs.com/package/cypress-fail-on-console-error