Overloading custom command in Cypress

Question

Can a custom command overload be done the same way as a function overload? There is no answer to this in the documentation.

For example:

Cypress.Commands.add('navigateAndWaitForApi', 
  (relativePath: string, apisPath: string[], timeout?: number) => {

    let options = {};
    if (timeout !== undefined) {
      options = { timeout: TIMEOUT };
    }
    apisPath.forEach((api)=> {
      cy.intercept(`/api/${api}`).as(api);  
    })
    cy.visit(`/${relativePath}`);
    cy.wait(apisPath.map(apiPath => `@${apiPath}`), options);
});


Cypress.Commands.add('navigateAndWaitForApi', 
  (relativePath: string, apiPath: string, timeout?: number) => {
    cy.navigateAndWaitForApi(relativePath, [apiPath], timeout);
});

Electron Electron · Accepted Answer · 2021-08-16T22:36:55

It does not appear so. The command name navigateAndWaitForApi is the total signature.

Add this after the command definitions

console.log(Cypress.Commands._commands)

shows commands are stored in an object, keyed by the command name.

Adding the same command twice, the second overwrites the first.

It's possible to type-check the params at runtime.

Cypress.Commands.add('navigateAndWaitForApi', 
  (relativePath: string, apiPaths: string|string[], timeout?: number) => {

    if (typeof apiPaths === 'string') {
      apiPaths = [apiPaths]
    } 

    let options = {};
    if (timeout !== undefined) {
      options = { timeout: TIMEOUT };
    }
    apiPaths.forEach((api)=> {
      cy.intercept(`/api/${api}`).as(api);  
    })
    cy.visit(`/${relativePath}`);

    // cy.wait(apiPaths.map(apiPath => `@${apiPath}`), options);  // look dubious

    apiPaths.forEach(apiPath => {
      cy.wait(`@${apiPath}`), options)
    })

});

Overloading custom command in Cypress

1 Answers