Cypress: nested custom commands

Question

I'm using Cypress 9.5.3 and Typescript 4.5.

Is there a way to create custom commands hierarchically? As a result I'd like to type (as an example):

cy.loginAs.admin();

Currently I can only write a command:

cy.loginAsAdmin();

Also support from VSC is important for me.

EDIT 1

I'd like to use those nested commands like this:

cy.loginAs.admin();
cy.loginAs.operator();
cy.loginAs.user();

What exactly are you trying to do? You could always write your custom command to have different flows and take in the role as a parameter. Something like cy.loginAs('admin'); or cy.loginAs('user'); — agoff
– agoff, Commented Mar 29, 2022 at 14:07
You would reverse the order, since Cypress commands pass a "subject" down the chain (not up) - cy.asAdmin().login(). But your example is too trivial what would admin() do but return the string "admin"? Does it need to check context in some way? — Fody
– Fody, Commented Mar 29, 2022 at 20:39

agoff · Accepted Answer · 2022-03-29 15:07:02Z

2

I think the best way to handle this would be to add the role as a parameter to your custom command.

Cypress.Commands.add('loginAs', (role: string) => {
  switch (role) {
    case 'Admin':
      // code
    case 'Operator':
      // code
    case 'User':
      // code
    default:
      // code
  }
});

cy.loginAs('admin');
cy.loginAs('operator');
cy.loginAs('user');

If you knew you had a limited number of roles, you could create an enum.

enum Roles {
  Admin,
  Operator,
  User
}

Cypress.Commands.add('loginAs', (role: Roles) => {
  //code 
})

cy.loginAs(Roles.Admin);
cy.loginAs(Roles.Operator);
cy.loginAs(Roles.User);

Using a switch statement is just a suggestion, but depending on how different the flows are, you may have more success with a different method.

answered Mar 29, 2022 at 15:07

agoff

7,1501 gold badge10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Birkir Pálmason · Accepted Answer · 2022-07-27 13:51:16Z

0

It's possible to add nested commands by extending the global "cy" object.

From the Cypress Docs:

Public interface for the global "cy" object. If you want to add a custom property to this object, you should extend this interface. @see https://on.cypress.io/typescript#Types-for-custom-commands

link to Cypress Docs

Example based on your question:

// cypress/support/loginAs.ts
function admin () {

}

function operator () {

}

export default {
  admin,
  operator,
}

// cypress/support/index.ts
import loginAs from './loginAs';

declare global {
  namespace Cypress {
    interface cy {
      loginAs: typeof loginAs 
   }
  }
}

cy.loginAs = loginAs;

edited Jul 27, 2022 at 13:51

answered Jul 27, 2022 at 13:49

Birkir Pálmason

92 bronze badges

Collectives™ on Stack Overflow

Cypress: nested custom commands

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related