从自定义 cypress 命令获取 jsdoc 和智能感知答案

【问题标题】：Getting jsdoc and intellisense from custom cypress commands从自定义 cypress 命令获取 jsdoc 和智能感知
【发布时间】：2021-01-26 03:43:28
【问题描述】：

我目前正在为我的项目设置 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: "mail@mail.com",
      displayName: "cool_dude",
      password: "Password1",
      companyName: "Not a scam AB",
    });
  });
});

我必须参考commands.js 文件来查看signup 函数有哪些选项。

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

【问题讨论】：

我认为您必须按照文档中的说明在支持文件夹 (cypress/support/index.d.ts) 中创建一个文件：triple slash

标签： javascript cypress jsdoc

【解决方案1】：

如果您使用的是 VSCode，请尝试使用 Cypress Helper 扩展。它会为你处理其中的一些。安装后，进入扩展设置，滚动到底部，你会看到Type Definition On Save设置。选中该框，每次保存时，它都会根据您的自定义命令生成 *.d.ts 文件条目。

之后，创建 Intellisense 文本就像在自定义命令上方编写 JSDoc cmets 一样简单，如下所示：

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

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

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

【讨论】：