My first cypress e2e test fails to do much of anything; an obvious failure is not reported - authorization

Question

I am new to Cypress trying to run an e2e test. My modest goal is to create an account and login with that account. My expected result is that I get some indication that the line I highlight with a comment // should fail! reports a failure. My actual result is that I don't get much of anything!
Error message: none! kind of.
I get some messages about failed post requests, does this matter? See the red "POST 400". Does that interrupt my tests?
Here's my test:
it("registers, logs in, and waits for the refresh token to refresh", async () => {
cy.visit(baseFrontendUrl);
const loginResponse = await axios.post(baseBackendUrl + "/auth/email/login", { email: "rm" });
const accessToken = loginResponse.data.accessToken;
console.log(accessToken, "access token");
const allUsersResponse = await axios.get(baseBackendUrl + "/auth/all", {
headers: { Authorization: "Bearer " + accessToken },
});
const allUsers: Member[] = allUsersResponse.data;
console.log(allUsers, "24rm");
const allTestAccounts = allUsers.map((m: Member) => m.googleId.slice(0, 4) === "TEST");
const nextTestAccountFieldValue = "TEST" + (allTestAccounts.length + 1).toString();
const nextTestAccount = {
email: nextTestAccountFieldValue,
firstName: nextTestAccountFieldValue,
lastName: nextTestAccountFieldValue,
fakeGoogleId: nextTestAccountFieldValue,
};
cy.get("#devPortal").should("have.text", "SHOULD OBVIOUSLY FAIL"); // doesn't fail!
cy.get("#signUpEmail").type(nextTestAccount.email);
cy.get("#signUpFirstName").type(nextTestAccount.firstName);
cy.get("#signUpLastName").type(nextTestAccount.lastName);
cy.get("#signUpGoogleId").type(nextTestAccount.fakeGoogleId);
cy.get("#signUpButton").click();
// assert
cy.get("#msg").should("have.text", "Successful registration").should("be.visible"); // doesn't seem to run at all
}
Neither of the requests in the above code fail; they work fine and I know that because the accessToken value logs something.
Putting expect(true).to.equal(false) does show assertexpected true to equal **false** AssertionError and "true to be true" does give assertexpected true to equal **true** so perhaps I don't understand should?
And in case its not clear, the text for #devPortal# is not "should obviously fail"! :-) Sign up with email: `
I don't know what to look for because I am newb at Cypress. It's something obvious, I'm sure.
edit: So I disabled the bunch of axios requests at the top. The tests worked after that:
edit2: This solution isn't perfect because I want to (a) get the list of users => (b) get the # of test accounts => (c) increment the # at the end of "testAccount" by 1 so the e2e test runs with a new account. I need to login, get an access token, and hit an endpoint, for this to work. Hence the question becomes, "why does running an axios request at the start of the test make it malfunction?"

Answer 1

The axios calls are succeeding, but they aren't part of the test they just set up some "fixture" data for the sign-in test itself.
I would separate that block of code out to make things more understandable.
Usually you will make API calls using cy.request() rather than axios, and
then you don't need async/await which are in fact "illegal" in Cypress (the commands don't return promises so you can't await them).
beforeEach(() => {
cy.request('POST', baseBackendUrl + "/auth/email/login", { email: "rm" })
.then(response => {
const accessToken = response.data.accessToken;
cy.request(baseBackendUrl + "/auth/all", {
headers: { Authorization: "Bearer " + accessToken },
})
.then(response => {
const allUsers: Member[] = response.data;
const allTestAccounts = allUsers.map((m: Member) => m.googleId.slice(0, 4) === "TEST");
const nextTestAccountFieldValue = "TEST" + (allTestAccounts.length + 1).toString();
const nextTestAccount = {
email: nextTestAccountFieldValue,
firstName: nextTestAccountFieldValue,
lastName: nextTestAccountFieldValue,
fakeGoogleId: nextTestAccountFieldValue,
};
cy.wrap(nextTestAccount).as('nextAccount') // use alias to save value
})
})
})
})
// no need for async when using cy.request()
it("registers, logs in, and waits for the refresh token to refresh", () => {
cy.get('#nextAccount').then(nextTestAccount => {
cy.visit(baseFrontendUrl);
...
I think your problem with the .should() not failing the test may be due to the async/await around the test. Obviously the assert is failing as it's logging red, but if the test is still passing then it looks like a timing issue - the test is completing too soon.