使用 Cypress Headless 时如何查看 `cy.log` 输出？

Question

当无头运行 Cypress 时，我可以使用

console.log

环境变量看到测试中的前端代码的

DEBUG

输出，例如：

DEBUG='cypress:launcher' npx cypress run --browser chrome

但是，我还没有找到任何类似的方法来查看无头运行时 Cypress 测试代码中

cy.log

的输出。即使使用

DEBUG='cypress:*'

我也看不到它们 - 它们似乎只在交互界面中可见。感觉必须有某种方法可以无头查看

cy.log

输出 - 有人可以帮忙吗？

Answer 1

第一步是在 Cypress 配置文件

cypress.config.js

（在

cypress

根文件夹中）添加一个新任务，以便您可以从 Node 运行

console.log

：

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      on("task", {
        log(args) {
          console.log(...args);
          return null;
        }
      });
    },
  },
});

然后，您可以覆盖

cy.log

，以便每当您在无头模式下运行命令时调用此任务，以及当您在有头模式下运行时调用此任务。您可以通过将以下内容添加到命令文件

console.log

（位于

commands.js

文件夹中）来完成此操作：support

Answer 2

虽然我第一次尝试了@hughsk的解决方案，但我发现没有它我也可以；只需使用 DEBUG 对我来说就足够了。 因为我们也将代码覆盖率作为任务运行，所以这仍然会生成大量日志记录，之后找到您感兴趣的 cy.log 任务有点乏味。在这种情况下，您可以将输出重定向到文件，然后使用文本编辑器搜索它。

在 Linux/Unix 中，DEBUG 输出将转到错误输出，因此您必须使用“2>”将其重定向到文件。

像这样：

Cypress.Commands.overwrite("log", function(log, ...args) {
  if (Cypress.browser.isHeadless) {
    return cy.task("log", args, { log: false }).then(() => {
      return log(...args);
    });
  } else {
    console.log(...args);
    return log(...args);
  }
});