Custom command with TypeScript types

Cypressfixturesintermediatev10+

Create a typed custom Cypress command and register it so autocomplete works.

1// cypress/support/commands.ts
2Cypress.Commands.add('getByTestId', (testId: string) => {
3  return cy.get(`[data-testid="${testId}"]`);
4});
5
6// cypress/support/index.d.ts
7declare namespace Cypress {
8  interface Chainable {
9    getByTestId(testId: string): Chainable<JQuery<HTMLElement>>;
10  }
11}
12
13// Usage:
14// cy.getByTestId('submit-button').click();
15// cy.getByTestId('error-message').should('be.visible');

#custom command#typescript#extend#reusable