Argument type string is not assignable to parameter type keyof Chainable... in Cypress

Question

After update 9.0.0 in Cypress I have the following error

Could someone help me? My custom command

Welcome to SO! Please, include the code in form of a formatted text. — Parzh from Ukraine, Nov 11 '21 at 12:04

PeaceAndQuiet · Accepted Answer · 2021-11-11T17:24:30.643

43

Beginning with version 9.0.0, You are now forced to declare your custom commands. See the changelog for 9.0.0 (6th bullet point under breaking changes) and see the specific information about custom commands now being typed based on the declared custom chainable here.

Also, see this recipe on how to add custom commands and declare them properly.

For your custom command, add this file cypress/support/index.d.ts with the following code:

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

declare namespace Cypress {
    interface Chainable<Subject = any> {
        /**
         * Custom command to ... add your description here
         * @example cy.clickOnMyJourneyInCandidateCabinet()
         */
        clickOnMyJourneyInCandidateCabinet(): Chainable<null>;
    }
}

edited Nov 11 '21 at 17:24

answered Nov 11 '21 at 16:57

PeaceAndQuiet

1,692
8
13

Thanks @PeaceAndQuiet, but how do I go about a custom command that has a `prevSubject`? This requires an additional first `subject` argument in the implementation signature, which must be omitted in the interface method signature. And that causes a TypeScript error. – yktoo Nov 12 '21 at 18:42
1

They seem to have an issue with this new feature. https://github.com/cypress-io/cypress/issues/18879 – PeaceAndQuiet Nov 12 '21 at 20:15
Could you post your code from one of your command with a prevSubject? I have a bunch of those and mine are working with 9.0.0. – PeaceAndQuiet Nov 13 '21 at 01:07
Heres's a simple example: https://pastebin.com/Hd0tk2W7 . IntelliJ complains about the arguments, saying that `element` shouldn't be there. – yktoo Nov 15 '21 at 14:18
1

Using Webstorm here and it doesn't like it either. But my tests are running and passing. Let's hope cypress fixes issue 18879. In the meantime, if you're blocked, you can try the workaround given by the author of the issue. https://github.com/cypress-io/cypress/issues/18879 – PeaceAndQuiet Nov 15 '21 at 15:26

score 8 · Answer 2 · edited Jan 05 '23 at 18:06

in support/index.d.ts

declare namespace Cypress {
  interface Chainable<Subject = string> {
    preventSubmit(form: string): Chainable<Element>;
  }
}

in support/command.js

Cypress.Commands.add("preventSubmit", (form) => {
  cy.get(form).then((form$) => {
    form$.on("submit", (e) => {
      e.preventDefault();
    });
  });
  cy.log(`prevent default submit to '${form}'`);
});

in specs/test.js

describe("MyTest", () => {
  ...
  it("Test 1", () => {
    ...
    cy.preventSubmit("form");
    cy.get("form").submit();
  }
}

Argument type string is not assignable to parameter type keyof Chainable... in Cypress

2 Answers2

Linked