如何在 Cypress 中执行自定义命令？答案

【问题标题】：How to go to custom commands implementation in Cypress?如何在 Cypress 中执行自定义命令？
【发布时间】：2019-08-12 09:16:54
【问题描述】：

我在 cypress 中使用自定义命令，它运行良好。我正在使用 Visual Studio 代码作为编辑器。我正在寻找如何让智能感知识别自定义命令，发现在https://github.com/cypress-io/cypress-example-todomvc#cypress-intellisense

我添加了 cypress/index.d.ts 文件：

/// <reference types="cypress" />
declare namespace Cypress {
interface Chainable<Subject> {
  /**
   * Do something
   * @example
   * cy.doSomething()
   */
  doSomething(): Chainable<any>
}}

现在点击spec文件中的doSomething会打开index.d.ts中的声明，有没有办法让vscode在support/commands.js下打开实际的命令实现？

【问题讨论】：

标签： javascript typescript visual-studio-code cypress

【解决方案1】：

直接回答，不支持打开/查看自定义命令的直接声明（如果支持，可能有人可以更正）。我通常会在单独的文件中跟踪自定义命令的分组。例如，

文件： cypress/support/sample_command.ts

/// <reference types="Cypress" />

import * as PageElements from "../resources/selectors.json";
import * as Pages from "../resources/urls.json";

let xml: XMLDocument
let data: HTMLCollection

Cypress.Commands.add(
  "getWorkflowXML",
  (wfPath: string): Cypress.Chainable<HTMLCollection> => {
    var url = Cypress.env("url") + wfPath;

    return cy.request({
      log: true,
      url: url,
      auth: {
        user: Cypress.env("userName"),
        pass: Cypress.env("password")
      }
    }).then(response => {
      expect(response)
        .property("status")
        .to.equal(200);
      xml = Cypress.$.parseXML(response.body);
      data = xml.getElementsByTagName("java");
      return data;
    });
  }
);

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Get Workflow XML through XHR call
       * @memberof Cypress.Chainable
       * @param wfPath
       */
      getWorkflowXML: (wfPath: string) => Cypress.Chainable<HTMLCollection>;
    }
  }
}

然后，在cypress/support/index.js 文件中，我将导入命令文件，

import './sample_command'

这种方式给了我更好的可追溯性，而不是直接在index.d.ts 下声明所有命令。

参考：

【讨论】：