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命令合并到链处理中(利用subject参数或返回一个Chainable以便在链中进一步使用)，它才可能真正有用。另外，普通的JS函数更可取，因为它简单且完全支持IDE。

如果您出于任何原因需要在cypress循环中执行某些操作，您可以始终使用cy.wrap(null).then()将您的代码包装在一个普通的JS函数中：

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