logo标签列表

将Cypress的console.log和command log导出到输出

e2e-testingcypress
78
能否将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]   └─────────────────────────────────────┘
看起来他们试图制作一个全面的功能，而不是大多数人想要的简单钩子。jantoebe的代码（在此处）看起来很有前途。也许值得问问他在测试中添加了什么。 - user8745435
将客户端浏览器日志发送回服务器怎么样？使用jantoebe的想法，替换console并以某种方式将日志发送回节点的控制台日志。我需要使用cy.task创建一个侦听端口的终点吗？ - Jake He
使用类似于 https://github.com/krakenjs/beaver-logger 的工具。这可能有些过度了。 - Jake He
是的，绝对可以使用 cy.task 将代码运行到 Node 环境中。然后只需使用 fs 将其写入文件，但要进行一些漂亮的格式化。我还想捕获命令日志格式化为 HTML（不仅仅是测试），以供文档使用，因此 document.getElementById('root').innerHTML 看起来是实现这一目标的方法。 - user8745435
1
请参阅 cypress-failed-log，该工具列出了命令 - 在 CI 场景中非常有用。 - user8745435
7个回答
100

从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日志镜像到控制台的方法，但至少这是一个可行的替代方案。

2
不知何故，这对我不起作用。我使用的是最新版本的Cypress。 - Amit Kumar Gupta
3
@AmitKumarGupta 这个答案直接摘自 cy.task 的文档页面。如果你按照最新的文档步骤操作仍然无法解决问题，那么可能是一个 bug，你可以在 Github 上报告。 - Joshua Wade
29

将 ELECTRON_ENABLE_LOGGING 环境变量设为 1 将会导致所有 Chrome 内部日志被打印到控制台。

ELECTRON_ENABLE_LOGGING=1 npx cypress run

ELECTRON_ENABLE_LOGGING

将Chrome的内部日志输出到控制台。

启用此选项后，除了捕获任何现有的日志外，还可以使用console.log在测试中手动记录日志:

console.log('Response JSON: ' + json)
2
很遗憾，这仅在测试在electron运行时有效，而不是例如在使用chrome时(ELECTRON_ENABLE_LOGGING=1 npx cypress run --browser chrome)。 - LGenzelis
1
@LGenzelis 即使使用 electron，对我来说也无法工作。 - wamster
1
嘿@wamster，看一下我的答案。或者直接访问https://www.npmjs.com/package/cypress-terminal-report。这个对我来说是一个改变游戏规则的东西 :) - LGenzelis
1
谢谢，@LGenzelis！ - undefined
10
很遗憾，他们决定只为云客户修复它 :( - undefined
8

在@Joshua-wade的答案上进行扩展，您可以覆盖cy.log以将所有对其的调用重定向到日志任务。如下所示：

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

注意：这种方法有一个小缺点：当您使用测试运行器运行测试时，命令日志中将不会看到LOG my message，而是会看到TASK log, my message。但在我看来，这是可以忽略的。

当我尝试这样做时，我收到的错误信息是setupNodeEvents方法中没有注册'task'事件。你必须在使用cy.task()之前先进行注册。 - Cypress: 10.7.0 - hanshenrik
1
我同意Araon的方法，使用覆盖(log function)的方式。如果你想保留cy.log的默认行为，另一种方法是创建自定义命令。文档在这里。
例如： Cypress.Commands.add("printLog", (message) => { cy.task("log", {message}); }) 这样你就可以调用函数printLog而不是cy.task("log", {message});。
0
// 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')
这是一个非常好的选择，对我来说很有效。特别是只需在代码中任何地方简单地使用：cy.task('log', 'This will be output to the terminal') - undefined
0

声明：本人为插件作者

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接