Argument type string is not assignable to parameter type keyof Chainable ... cypress JS

Question

So I'm trying to add a custom command in cypress (commands.js file) like so:

     Cypress.Commands.add("login", (email, password) => {
      cy.intercept('POST', '**/auth').as('login');
      cy.visit('/auth');
      cy.get('[formcontrolname="email"]').type(email);
      cy.get('[formcontrolname="password"]').type(password);
      cy.get('form').submit();
      cy.wait('@login').then(xhr => {
        expect(xhr.request.body.email).to.equal(email);
        expect(xhr.request.body.password).to.equal(password);
       });
    });

but I get this error:

I've found this question Argument type string is not assignable to parameter type keyof Chainable... in Cypress, but the answers here are only applicable for an index.d.ts file, however I have an index.js file (cypress version 10.3.0 and this is not working for me. Can anyone help me solve this issue?

It's not clear from the info you've given - is there any typescript in the project? The type argument errors will only occur when the project is seen as typescript. — TesterDick, Jul 18 '22 at 06:36
Is this error from just defining that part of the custom command? Or are there other statements in the function body. You may have to share the complete stacktrace in your question to get help debugging that. — Oluwafemi Sule, Jul 18 '22 at 06:37
The project I'm writting tests for is in typescript, but when I installed cypress, it autocreated files in js (e2e.js, index.js, commands.js) and now I'm unsure of what I'm supposed to do about it. — scorpio_147, Jul 18 '22 at 06:53
Oluwafemi Sule, I've added the entire function body, the logic works, but I still receive the same error — scorpio_147, Jul 18 '22 at 06:56

score 27 · Accepted Answer · answered Jul 18 '22 at 07:15

27

You shouldn't mix .js and .ts in a Typescript project.

Make everything .ts, then add the index.d.ts with a type definition for your custom command.

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable<Subject = any> {
    login(): Chainable<any>;
  }
}

You may run into more problems, for example check if you have a tsconfig.json in the /cypress folder.

If in doubt, use cypress-realworld-app as a reference for Typescript setup.

answered Jul 18 '22 at 07:15

Fody

23,754
3
20
37

2

Thanks for that. I suspected I would have to change everything to .ts, but thought that there was maybe a workaround. I changed it now and everything works as it should. Thank you – scorpio_147 Jul 19 '22 at 07:41
3

Just wanted to add that the `index.d.ts` file should _not_ be in the same folder as your commands. I had it in the `support` folder and I had the error, but the error was resolved when I moved the `index.d.ts` file into the parent (root) Cypress folder. – Peter Boomsma Jul 28 '22 at 09:51
2

It sounds like your `tsconfig.json` was not set correctly. – Fody Jul 28 '22 at 09:56
1

https://docs.cypress.io/guides/tooling/typescript-support#Types-for-Custom-Commands – ldgorman Oct 26 '22 at 15:11
7

This should fix it too: `Cypress.Commands.add("login" as any, (email: string, password: string) => {` – Luke Jan 11 '23 at 18:48
4

You cannot use `as any` in a `.js` file, it will give you a syntax error. – Fody Jan 11 '23 at 19:22

Argument type string is not assignable to parameter type keyof Chainable ... cypress JS

1 Answers1