Get multiple aliases at once without callbacks in Cypress

Problem

Cypress does not provide a method to compare aliases or to get many aliases at once. Because of that to compare aliases you have to get each alias individually, creating a callback hell.

cy.get("#birthday").as("birthday");
cy.get("#age").as("age");

// ugly
cy.get("@birthday").then((birthday) => {
  cy.get("@age").then((age) => {
    expect(birthday).to.eq(age);
  });
});

To get a deal with it we are going to create a new command called getMany which will take array with any kind of selectors (like aliases, elements etc).

cy.get("#birthday").as("birthday");
cy.get("#age").as("age");

cy.getMany(["@birthday", "@age"]).then(([birthday, age]) => {
  expect(birthday).to.eq(age);
});

Adding custom command

To resolve the described problem we can add a new command to Cypress’s commands called getMany. Thanks to this we can get as many aliases or elements as we want. To use this command copy-paste the implementation to cypress/support/commands.ts.

Cypress.Commands.add("getMany", (names: string[]): Cypress.Chainable<any[]> => {
  const values: any[] = [];

  for (const arg of names) {
    cy.get(arg).then((value) => values.push(value));
  }

  return cy.wrap(values);
});

Adding type signature of the custom command

To let TypeScript‘s compiler knows that we have added a custom command and have IntelliSense working, we have to describe the type signature of the custom command in the file cypress/support/index.d.ts. The type signatures should match the arguments custom commands expect. Here is how this file looks:

declare namespace Cypress {
  interface Chainable<Subject = any> {
    getMany(names: string[]): Chainable<any[]>;
  }
}