Cypress报错：返回Promise时调用cy命令，如何实现断言失败截图？

问题原因 #

在全局fail事件回调中直接执行cy.get()、cy.screenshot()这类Cypress命令，会打破Cypress的命令队列异步机制，触发Promise冲突错误——Cypress不允许在返回Promise的命令（如cy.invoke()）的回调中直接嵌套cy命令，因为两者的异步执行逻辑无法协调。

可行修复方案 #

方案1：将截图逻辑加入Cypress命令队列 #

通过cy.wrap()把截图操作包裹起来，让它进入Cypress的命令队列，避免直接在fail回调中执行cy命令：

Cypress.on("fail", (err, runnable) => {
  console.log("invalid", err);
  cy.wrap(null).then(() => {
    cy.get("#form-customer-mobile").screenshot("login/customer-pan-pattern-entered");
  });
  return false; // 阻止测试用例继续标记为失败（可选，根据需求调整）
});

cy.get(".error-text").invoke("text").should("contain", "Please enter a valid dasd PAN card number");

方案2：直接调用截图命令指定元素 #

无需先通过cy.get()定位元素，直接在cy.screenshot()中传入元素选择器，简化操作同时避免队列冲突：

Cypress.on("fail", (err, runnable) => {
  console.log("invalid", err);
  cy.screenshot("login/customer-pan-pattern-entered", { 
    capture: "viewport", 
    element: "#form-customer-mobile" // 指定要截图的元素
  });
  return false;
});

cy.get(".error-text").invoke("text").should("contain", "Please enter a valid dasd PAN card number");

方案3：手动实现断言逻辑 #

不依赖全局fail事件，手动获取文本并判断，失败时主动截图并抛出错误：

cy.get(".error-text").invoke("text").then((actualText) => {
  const expectedText = "Please enter a valid dasd PAN card number";
  if (!actualText.includes(expectedText)) {
    cy.get("#form-customer-mobile").screenshot("login/customer-pan-pattern-entered");
    throw new Error(`断言失败：实际文本「${actualText}」未包含期望内容「${expectedText}」`);
  }
});

报错信息翻译 #

invoke.text()
断言失败：期望"Please enter a valid PAN card number"包含"Please enter a valid dasd PAN card number"
CypressError
Cypress检测到你从一个命令中返回了一个Promise，同时在该Promise中调用了一个或多个cy命令。
返回Promise的命令是：

cy.invoke()
在Promise中调用的cy命令是：
cy.get()
由于Cypress命令本身已类似Promise，你无需对其进行包装或返回自定义Promise。
Cypress会用最终的Cypress命令生成的结果来解析你的命令。
这是错误而非警告的原因是，Cypress内部按顺序对命令进行排队，而Promise在被调用时立即执行。尝试协调两者会导致Cypress永远无法解析。

内容的提问来源于stack exchange，提问作者Ravi Parmar