Cypress 命令与 JS 函数

Question

Cypress documentation建议命令是重用代码片段的正确方法，例如

Cypress.Commands.add("logout", () => {
  cy.get("[data-cy=profile-picture]").click();
  cy.contains("Logout").click();
});

cy.logout();

对于像这样的简单情况，我为什么要在普通 JS 函数(以及它附带的所有不错的 IDE 帮助)上使用命令。将上述代码段重写为有什么缺点

export function logout(){
  cy.get("[data-cy=profile-picture]").click();
  cy.contains("Logout").click();
}

// and now somewhere in a test
logout();

Answer 1

根据我使用 Cypress 的经验(一年的项目和数百个测试用例)，我可以说 plan JS 函数非常适合对 cy 命令进行分组。

从我的角度来看，只有将自定义 cy 命令合并到链处理中(利用主题参数或返回可在链中进一步使用的 Chainable)，自定义 cy 命令才可能真正有用。否则，由于简单和完整的 IDE 支持(除非您使用 an additional plugin )，普通 JS 函数更可取。

如果你出于任何原因需要在 cypress 循环中做一些事情，你总是可以通过 cy.then() 将你的代码包装在一个普通的 JS 函数中:

      function myFunction() {
        cy.then(() => {
          console.log(("I'm inside the Cypress event loop"))
        })
      }