What is the process for integrating custom commands in Cypress?

Question

What is the process for integrating custom commands in Cypress?

I have successfully implemented custom commands in Cypress and I am using Visual Studio Code as my editor. To enable IntelliSense to recognize these custom commands, I referred to this link.

In order to achieve this, I created a cypress/index.d.ts file:

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

After adding the index.d.ts file, now when clicking on doSomething in the spec file, it directs me to the declaration in index.d.ts. However, I am wondering if there is a way for Visual Studio Code to open the actual command implementation located under support/commands.js?

javascript typescript visual-studio-code cypress

Answer 1

Answer №1

In response, I want to clarify that directly revealing custom commands' declaration is not endorsed (there may be exceptions). My preferred method is to organize custom commands in distinct files. For example,

File:

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>;
    }
  }
}

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

import './sample_command'

This approach provides better traceability, rather than directly declaring all commands under index.d.ts.

Reference:

Answer 2

In response, I want to clarify that directly revealing custom commands' declaration is not endorsed (there may be exceptions). My preferred method is to organize custom commands in distinct files. For example,

File:

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>;
    }
  }
}

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

import './sample_command'

This approach provides better traceability, rather than directly declaring all commands under index.d.ts.

Reference:

What is the process for integrating custom commands in Cypress?

Answer №1

Similar questions

Exploring the integration of Glide js within a Next js environment

methods for converting and saving base64 image strings

There are two references to an object, but even if one of them is modified, the second reference continues to show the

Observe the task while returning - Firebase Functions

This error occurs because the argument type 'AsyncThunkAction<any, void, {}>' cannot be assigned to a parameter of type 'AnyAction'

Next.js throws a ReferenceError when the self variable is not defined while creating a child process using a custom webpack configuration

A guide on organizing a JSON object in JavaScript/AngularJS through grouping

React component fails to render even after successful authentication check

Extract information from an external HTML table and store it in an array

Tips for transferring data to a child component's @Input using Observables

Creating a variable as a list of string arrays in TypeScript

Screening strings and arrays based on multiple criteria

Tips for creating a striped background color on your Blogger blog's homepage

What is causing the slideshows to suddenly stop functioning?

The error thrown is: "TypeError: device.devices.map is not a valid function

Embed a div element within a content-editable area

Retrieve JSON data from PHP using D3.request

Error Encountered | Invalid Operation: Unable to access attributes of undefined (referencing 'CodeMirror')

Error encountered with the {1}+ possessive quantifier in a JavaScript regex pattern

Encountering a build error in Next.js 13 when attempting to fetch an API route within a server component