In my Cypress test specification, I have a simple test for the first page displayed. The code looks like this:
// integration/connection.ts
describe("First page displayed", function() {
before(() => {
cy.visit("/")
})
it("Is an error page when no token is given", function() {
cy.getByDataAttribute("error-page")
)}
})
There is a custom command called getByDataAttribute defined as follows:
// support/commands.ts
declare namespace Cypress {
interface Chainable<Subject> {
getByDataAttribute: typeof getByDataAttribute
}
}
/**
* Get a DOM element by targeting its data-cy attribute value
* @param data_target data-cy attribute value to target
*/
function getByDataAttribute(data_target: string) {
return cy.get("[data-cy=" + data_target + "]")
}
Cypress.Commands.add("getByDataAttribute", getByDataAttribute)
Everything is written in TypeScript and compiles without errors. But when running the test, Cypress throws an error:
TypeError: cy.getByDataAttribute is not a function
The custom command used to work fine until I added IntelliSense. Even after reverting back to vanilla JS, the command is still not recognized. I've tried various tweaks in the configuration but can't seem to resolve the issue. It should all be in order now, but it's still not working as expected.