Cypress: Typescript custom commands not working

Question

Update: https://github.com/cypress-io/cypress/issues/1065#issuecomment-351769720 Removing an import from my commands.ts fixed it. Thanks

I'm trying to convert my cypress project to use TypeScript. I'm following the info on https://docs.cypress.io/guides/tooling/typescript-support#Types-for-custom-commands

I've fixed all the other compilation errors I was getting but I'm still unable to get any of my custom commands to work for example:

commands.ts:

declare namespace Cypress {
  interface Chainable {
    clickByLinkText(link: string): Chainable<Element>;
  }
}

// Finds and clicks a given link by it's link text
Cypress.Commands.add("clickByLinkText", (link: string) => {
  cy.get("a").contains(link).click();
});

When I try to call the function in my test I get:

TS2339: Property 'clickByLinkText' does not exist on type 'cy & EventEmitter'.

I have import "./commands"; in my support/index.ts

Alapan Das · Accepted Answer · 2021-06-08 13:08:52Z

1

You have to add your custom commands like this. You can check out the discussion here - https://github.com/cypress-io/cypress/issues/1065#issuecomment-351769720 -

function clickByLinkText(link: string) {
  cy.get("a").contains(link).click();
}
Cypress.Commands.add("clickByLinkText", clickByLinkText)

Also in your tsconfig.json file add "node_modules/cypress" under includes, considering node_modules and tsconfig.json file are at the sam level.

edited Jun 8, 2021 at 13:08

answered Jun 8, 2021 at 13:03

Alapan Das

18.3k5 gold badges38 silver badges66 bronze badges

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

4 Comments

Doctor Who Over a year ago

Are you sure? That's not how it works on the example and looking at other repos I can't see them doing it like that.

Alapan Das Over a year ago

Hey, I added a GitHub thread to the answer. I was facing the same issue as you, I was able to resolve it by these two changes.

Doctor Who Over a year ago

Thanks, by removing the import from my commands.ts I fixed it (well I have more errors to fix but at least not around my commands)

Cristian E. Over a year ago

Why you don't return? What if this is in an external npm package?

Collectives™ on Stack Overflow

Cypress: Typescript custom commands not working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related