Cypress with typescript custom commands type error

Question

I've setup custom commands for my Cypress tests :

// cypress/support/commands.ts
/// <reference types="cypress"/>

Cypress.Commands.add('getByTestId', (target: [string], timeout: number = 0) => {
    target[0] = `[data-testid="${target[0]}"]`;
    return cy.get(target.join('>'), { timeout });
});



// cypress/support/index.ts
/// <reference types="cypress" />
declare global {
namespace Cypress {
    interface Chainable {
        getByTestId(id: string): Chainable<Element>;
    }
  }
}

these are my files where I setup my commands.

When writing test I have this error even if I had this on the top of my file /// <reference types="cypress" /> :

cypress/integration/filename.test.e2e.ts

Sebastiano Schwarz · Accepted Answer · 2022-01-20 10:21:08Z

3

I also have Cypress TypeScript support and ran into some issues at the beginning. The following setup worked for me:

// cypress/plugins/index.ts
/// <reference types="cypress" />

// cypress/support/commands.ts
declare namespace Cypress {
  interface Chainable<Subject> {
    getByTestId(selector: string, ...options: any): Chainable<JQuery<HTMLElement>>;
  }
}

// cypress/support/commands.ts
Cypress.Commands.add('getByTestId', (selector, ...options) => {
  return cy.get(`[data-test=${selector}]`, ...options);
});

So I have the type reference in the plugins/index.ts file and the namespace declaration as well as custom command definitions in support/commands.ts. I am using the currently newest Cypress version 9.3.1.

Additionally, another thing I've also noticed is when you try to import stuff into commands.ts, you will also get the error you described.

edited Jan 20, 2022 at 10:21

answered Jan 20, 2022 at 10:14

Sebastiano Schwarz

1,1382 gold badges15 silver badges38 bronze badges

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

1 Comment

RuvenGam Over a year ago

This answer helped me resolve a similar issue with custom commands in version 11.2.0 There is no plugins/index.ts file after V10 so I added the namespace declaration to the

JuleZ · Accepted Answer · 2022-01-20 10:09:49Z

1

This worked for me :

// tsconfig.json

"include": [
    "cypress/support/*.ts"
]

answered Jan 20, 2022 at 10:09

JuleZ

2761 gold badge4 silver badges13 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Cypress with typescript custom commands type error

2 Answers 2

1 Comment

1 Comment

Your Answer

Collectives™ on Stack Overflow

Cypress with typescript custom commands type error

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related