Cypress custom child command Typescript

Viewed 754

I am using Typescript for my Cypress tests and I'm trying to add the type definitions to custom commands in order to improve the readability and provide intellisense/autocomplete.

My custom command should only be chained off a multiselect field so it is a child command and used like shown. It can't be chained directly off cy but when I type cy. in my spec files in VS Code it is suggesting in the intellisense that I can use it, even though it is not valid.

Is there a way I can stop it being suggested as an option when typing cy.? I've specified it should be called on an element in the custom command but maybe there's something I need to change in the index.d.ts?

enter image description here

cy.get('MultiselectField1').MultiSelectOptions(true) // Correct usage
cy.MultiSelectOptions(true) // Incorrect usage

commands.js

Cypress.Commands.add('MultiSelectOptions', {
    prevSubject: 'element'
  }, (subject, selected) => {
      if(selected){
        return subject.find('.selected')
      }
      else{
        return subject.find('.unselected')
      }
  })

index.d.ts

declare namespace Cypress {

    interface Chainable {
      /**
       * Returns the selected or unselected options section for a multiselect field 
       * @param {boolean} selected true/false for selected/unselected options respectively 
       * @example cy.get('MultiselectField1').MultiSelectOptions(true)
      */
     MultiSelectOptions(selected: boolean): Chainable<Element>
    }
}
0 Answers
Related