I'm using custom mands in cypress and it it working fine. I'm using visual studio code as editor. I was looking for how to let intelliSence to recognize custom mands and found that in

I added cypress/index.d.ts file:

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

now when clicking on doSomething in the spec file it opens the declaration in index.d.ts, is there a way to let vscode open the actual mand implementation under support/mands.js?

I'm using custom mands in cypress and it it working fine. I'm using visual studio code as editor. I was looking for how to let intelliSence to recognize custom mands and found that in https://github./cypress-io/cypress-example-todomvc#cypress-intellisense

I added cypress/index.d.ts file:

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

now when clicking on doSomething in the spec file it opens the declaration in index.d.ts, is there a way to let vscode open the actual mand implementation under support/mands.js?

• javascript
• typescript
• visual-studio-code
• cypress

Share Improve this question Follow edited Mar 22, 2019 at 9:55 DilbertFan 11311 gold badge11 silver badge99 bronze badges asked Mar 21, 2019 at 13:40 Emad AldaluEmad Aldalu 6111 silver badge55 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

To answer straight, opening/ peeking the direct declaration of custom mands is not supported (May be, some one can correct if this supports). I would usually follow grouping of custom mands in separate files. For instance,

File: cypress/support/sample_mand.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>;
    }
  }
}

Then, in the the cypress/support/index.js file I would import the mand file,

import './sample_mand'

This way gives me better traceability, instead of declaring all the mands straight under index.d.ts.

Reference:

1. https://docs.cypress.io/api/cypress-api/custom-mands.html#Syntax
2. https://github./cypress-io/add-cypress-custom-mand-in-typescript