I am currently working on a TypeScript project and I am attempting to write some tests using Cypress.
However, I encountered the following error: TypeError - cy.login is not a function. This error occurred during a before each hook, so we are skipping the remaining tests in the current suite related to the Dashboard page when trying to call the custom command cy.login()
This is the code for the custom command:
// support/index.ts
Cypress.Commands.add("login", (email, password) => {
cy.request("http://localhost:3000/login", {
email,
password,
}).then((r) => {
window.localStorage.setItem("access", r.body.access);
window.localStorage.setItem("refresh", r.body.refresh);
});
});
// cypress/global.d.ts
declare global {
namespace Cypress {
interface Chainable {
/**
* Custom command to select DOM element by data-cy attribute.
* @example cy.dataCy('greeting')
*/
dataCy(value: string): Chainable<Element>;
login(username: string, password: string): Chainable<string>;
}
}
}
// cypress/e2e/dashboard.spec.cy.ts
describe("Dashboard page", () => {
beforeEach(() => {
cy.login("<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="234f4a41424d0d57465057121363444e424a4f0d404c4e">[email protected]</a>", "password");
});
it("should actually be accessible", () => {
cy.visit("/dashboard");
});
});