Cypress 管道 console.log 和命令日志输出

Question

是否可以重定向或捕获Cypress浏览器日志和命令日志来输出？

我阅读了一些有关此主题的 Cypress github issues。但我不知道如何让它发挥作用。

基本上，我想在无头非 GUI 模式下捕获所有 Cypress GUI 命令日志。如果我可以包括浏览器控制台日志会更好。目的是了解测试失败时会发生什么。

我使用 teamcity 作为 ci。这是我的构建日志的示例。我也想在这里查看所有命令日志。实际上，任何使用

cy.task

在服务器端运行的 console.log 都会显示在构建日志中。运行

cy.task('log',message)

过于手动。有什么更聪明的方法吗？

[09:49:08][Step 1/1] 2 of 4: new actions (52s)
[09:50:00][Step 1/1] 3 of 4: new actions (52s)
[09:50:53][Step 1/1] 4 of 4: new actions (53s)
[09:51:47][Step 1/1]   (Results)
[09:51:47][Step 1/1] 
[09:51:47][Step 1/1]   ┌─────────────────────────────────────┐
[09:51:47][Step 1/1]   │ Tests:        8                     │
[09:51:47][Step 1/1]   │ Passing:      8                     │
[09:51:47][Step 1/1]   │ Failing:      0                     │
[09:51:47][Step 1/1]   │ Pending:      0                     │
[09:51:47][Step 1/1]   │ Skipped:      0                     │
[09:51:47][Step 1/1]   │ Screenshots:  0                     │
[09:51:47][Step 1/1]   │ Video:        true                  │
[09:51:47][Step 1/1]   │ Duration:     3 minutes, 38 seconds │
[09:51:47][Step 1/1]   │ Estimated:    1 minute, 8 seconds   │
[09:51:47][Step 1/1]   │ Spec Ran:     action/action_spec.js │
[09:51:47][Step 1/1]   └─────────────────────────────────────┘

Answer 1

从Cypress 3.0.0开始，您可以使用

cy.task()

直接访问节点并输出到节点控制台。来自文档：

// in test
cy.task('log', 'This will be output to the terminal')

// in plugins file
on('task', {
  log (message) {
    console.log(message)
    return null
  }
})

请参阅此处了解更多信息。

我不知道如何将 Cypress 日志直接镜像到控制台，但这至少是一个可行的替代方案。

Answer 2

将

ELECTRON_ENABLE_LOGGING

环境变量设置为

1

将导致所有 Chrome 内部日志记录打印到控制台。

ELECTRON_ENABLE_LOGGING=1 npx cypress run

ELECTRON_ENABLE_LOGGING

将 Chrome 的内部日志记录打印到控制台。

启用此功能后，除了捕获任何现有日志记录之外，还允许您使用

console.log

在测试中手动登录：

console.log('Response JSON: ' + json)

Answer 3

仅供参考：

Cypress 社区将提供本机支持，这样我们就不必采取任何解决方法来在非 GUI（无头）CLI 上打印日志。

持续存在的问题：https://github.com/cypress-io/cypress/issues/448包括对 3 个现有解决方法的参考https://github.com/cypress-io/cypress/issues/448#issuecomment- 613236352

Answer 4

扩展@Joshua-wade的答案，您可以覆盖

cy.log

以将对其的所有调用重定向到日志任务。如下：

Cypress.Commands.overwrite('log', (subject, message) => cy.task('log', message));

注意：这样做有一个小缺点：当您使用测试运行器运行测试时，您将看到

LOG    my message

，而不是在命令日志中看到

TASK    log, my message

。但恕我直言，它可以忽略不计。

Answer 5

// cypress.config.js
const { defineConfig } = require("cypress");

module.exports = defineConfig({
  projectId: "cnpkrh",
  e2e: {
    setupNodeEvents(on, config) {
      on('task', {
        log(message) {
          console.log(message);
          return null;
        },
      });
    },
  },
});


// cypress/e2e/spec.cy.js
cy.task('log', 'This will be output to the terminal')

Answer 6

我同意 Araon 在日志函数上使用覆盖的方法。如果您想让 cy.log 保持默认行为，另一种方法是创建自定义命令。医生这里

示例：

Cypress.Commands.add("printLog", (message) => { cy.task("log", {message}); })

这样你就可以调用函数

printLog

vs

cy.task("log", {message});

Answer 7

免责声明：我是插件作者

您可以使用此免费开源插件在无头模式下捕获 Cypress CI GUI 命令，以及所有网络请求、浏览器控制台消息和 DOM 树更改：https://github.com/currents-dev/cypress-debugger

作为替代方案，您还可以使用一组其他知名插件：

• https://github.com/archfz/cypress-terminal-report 将浏览器日志消息和 cypress 步骤打印到终端
• https://github.com/NeuraLegion/cypress-har-generator 将网络请求捕获为文件

Answer 8

您可以使用一个非常方便的插件，称为 cypress-terminal-report。

这会在失败时提供详细输出，包括：

• 发出命令
• 在这些命令之前和之后进行的网络调用及其响应
• 任何控制台日志或错误输出

您可以在这里找到这个插件： https://www.npmjs.com/package/cypress-terminal-report

对我来说，它是改进 Cypress E2E 的必备工具。