How to add custom command to Cypress / Typescript test framework?

Question

I am trying to add a custom command to my Cypress,Cucumber,Typescript test framework, but am getting the following errors:

I get this error in the spec.ts file: Property 'seedLocalStorage' does not exist on type 'cy & EventEmitter'.

I get this error in the support/commands.ts file: Argument of type '"seedLocalStorage"' is not assignable to parameter of type 'keyof Chainable<any>'

Below are some of my files.

index.d.ts:

declare namespace Cypress {
    interface Chainable {
      /**
       * Custom command that seeds local storage with the following params:
       * @param key 
       * @param value 
       */
        seedLocalStorage(key: string, value: string): Chainable;
    }
}

support/commands.ts:

Cypress.Commands.add('seedLocalStorage', (key, value) => {
    return "some string for now"
})

tsconfig.json:

{
    "compilerOptions": {
      "strict": true,
      "baseUrl": "../node_modules",
      "target": "es5",
      "lib": ["es5", "dom"],
      "types": ["cypress", "node"]
    },
    "include": [
      "**/*.ts"
    ]
  }

Can someone please tell me what I'm doing wrong & how I can fix this?

Have you tried setting the type in `index.d.ts` as `Chainable` or `Chainable`? — agoff, Mar 29 '22 at 19:14

score 0 · Answer 1 · answered Mar 29 '22 at 20:24

0

I think it's saying you need to return a Chainable wrapper of your value.

Cypress.Commands.add('seedLocalStorage', (key, value) => {
  return cy.wrap("some string for now")            // type Chainable<string>
})

answered Mar 29 '22 at 20:24

Fody

23,754
3
20
37

How to add custom command to Cypress / Typescript test framework?

1 Answers1