从自定义 cypress 命令获取 jsdoc 和 intellisense

Question

我目前正在为我的项目设置 cypress，并认为创建一堆命令以使测试更具可读性是个好主意。

所以我将其添加到

support/commands.js

Cypress.Commands.add(
  "signup",
  ({ email, displayName, password, companyName, registrationKey, stub }) => {
    cy.visit("http://localhost:3000/signup").wait(1);
    if (stub) {
      cy.intercept("POST", "/signup.json", stub);
    }
    cy.get("#email-address").type(email);
    cy.get("#displayName").type(displayName);
    if (companyName) cy.get("#companyName").type(companyName);
    cy.get("#password").type(password);
    cy.get("#repeat-password").type(password);
    cy.get("button").click().wait(1);
    cy.get("#error-message").should("not.exist");
  }
);

我可以在我的规格中使用它，并且它可以完成它应该做的事情。 但是，在编写测试时，我没有在命令上获得任何类型的智能感知。

前

/// <reference types="cypress" />
describe("test", () => {
  it("can signup", () => {
    cy.signup({
      email: "[email protected]",
      displayName: "cool_dude",
      password: "Password1",
      companyName: "Not a scam AB",
    });
  });
});

我必须参考

commands.js

文件来查看

signup

功能有哪些选项。

所以我想知道是否可以将 jsdoc 添加到自定义 cypress 命令中，如果可以，如何？

Answer 1

如果您使用 VSCode，请尝试使用 Cypress Helper 扩展。它会为你处理其中的一些事情。安装后，进入扩展设置，滚动到底部，您将看到“保存时的类型定义”设置。选中该框，每次保存时，它将根据您的自定义命令生成 *.d.ts 文件条目。 之后，创建 Intellisense 文本就像在自定义命令上方编写 JSDoc 注释一样简单，如下所示：

/**
 * Logs in the user
 */
Cypress.Commands.add('logIn', (email) => {
  doSomeLoginStuff()
})

保存此结果会将以下代码添加到同一文件夹中的 d.ts 文件中：

/**
 * Logs in the user
 */
logIn(email: any): Chainable<any>

Answer 2

自定义命令的类型

。这不是 JSDoc 解决方案，但它有效。

// cypress/support/index.ts
Cypress.Commands.add('dataCy', (value) => {
  return cy.get(`[data-cy=${value}]`)
})


// in cypress/support/index.ts
// load type definitions that come with Cypress module
/// <reference types="cypress" />
declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Custom command to select DOM element by data-cy attribute.
       * @example cy.dataCy('greeting')
       */
      dataCy(value: string): Chainable<Element>
    }
  }
}

Answer 3

在 Cypress 中使用智能感知自定义命令

这基本上就是 Cypress 辅助扩展的实现方式（如

其他答案

中所述），但是逐步描述 - 如果您想在没有扩展的情况下使用它。 想法如下：

创建

./jsconfig.json
1. 和

   ./cypress/tsconfig.json

   文件在
./cypress/support/commands.js

2.  中创建自定义命令
   

   在
./cypress/types/types.d.ts
3. 或

   ./cypress/support/customCommands.d.ts

   中添加接口声明（如果这些文件不存在，则创建它们）

示例：

文件

jsconfig.json

：

{
  "include": ["./node_modules/cypress", "cypress/**/*.js","./types/*.d.ts"]
}

文件

commands.js

：

Cypress.Commands.add('devSpecialCommand', (text, number) => { 
    cy.log(`This is our special command lets printout the text ${text} and the number ${number}`)
})

文件

customCommands.d.ts

：

declare namespace Cypress {
  interface Chainable<Subject> {
    /**
     * @description This is a demo command for the dev.to blog
     * @param {string} text - Enter a random text
     * @param {number} number - Enter a number
     */
    devSpecialCommand(text: String, number: Number): Chainable<any>;
  }
}