Utilizing JavaScript files within our Cypress testing is a common practice.
Within the commands.js file, I have developed a custom command:
Cypress.Commands.add('selectDropdown', (dropdown) => {
cy.get('#' + dropdown).click();
})
To execute this command in my test file, I simply call it as follows:
cy.selectDropdown('dropdown1');
While this works smoothly during test execution in the runner, an issue arises where my IDE (PhpStorm) does not acknowledge the existence of this command.
Unresolved function or method selectDropdown()
Is there a way to inform the IDE about the presence of this command?
UPDATE:
To address this concern, I created an index.d.ts file within the support folder, even though I predominantly use JS files with Cypress and already have an index.js present there.
In the ts file, I included:
/// <reference types="cypress" />
declare namespace Cypress {
interface Chainable<Subject> {
selectDropdownValue(dropdown, value): Chainable<(string)>;
}
}
Subsequently, the cy.selectDropdownValue command became recognizable in the IDE and seemed to function effectively in the test runner. However, a few challenges persisted:
I should consider avoiding the creation of a new TypeScript file since I am exclusively utilizing JS files in the project, and I already have an
index.jspresent.The usage of 'namespace' in 'declare namespace' triggered a Lint warning ('no-namespace'), prompting the necessity for a replacement approach.
An unused interface named Chainable was flagged. It remains uncertain if including
Chainableis essential, especially given its current state of being unused along with the declaration of
.selectDropdownValue(dropdown, value): Chainable<(string)>
If anyone could provide guidance on how to indicate the existence of a custom command in JavaScript format to the IDE, rather than through TypeScript, it would be greatly appreciated.