How to set cookies in Cypress before visiting react app running on localhost - testing

Question

The steps I want to take are:
Start the Cypress test-suite and use cy.setCookie to set the JSESSIONID cookie (already acquired and up-to-date)
After the cookie is set, then use cy.visit to access the running app
The issue:
The cookie is not set before cy.visit runs and this causes the app redirect to an unauthorized page
What I have done so far:
Cypress.Cookies.defaults({
preserve: 'JSESSIONID'
})
cy.setCookie('JSESSIONID', Cypress.env('JSESSIONID'), {
path: '/',
domain: '<domain.name>',
httpOnly: true,
secure: true,
sameSite: 'no_restriction',
log: true,
}).then(() => cy.visit('localhost:3000/<authenticated-route>')
It might be worth mentioning that <domain.name> is of the form www.staging.etc.com whereas is running locally: localhost:3000/
Any help would be greatly appreciated. Thanks in advance

Answer 1

I solved the issue by doing a cy.request to login before using cy.visit.
Code looks something like this:
const login = () => {
const headers = new Headers()
headers.append("Content", "application/x-www-form-urlencoded")
headers.append("Accept-Encoding", "gzip:deflate")
headers.append("Content-Type", "application/x-www-form-urlencoded")
cy.request({
url: Cypress.env("LOGIN_URL"),
method: 'POST',
form: true,
headers,
body: {
"email": Cypress.env("EMAIL"),
"password": Cypress.env("PASSWORD")
}
}).then((response) => {
console.log(response)
console.log(response.body)
setCookie(response.COOKIE)
})
}
export const loginAndStartTests = () => {
login()
cy.visit('/<homepage>')
}

Answer 2

Take a look at Provide an onBeforeLoad callback function
The example recipe mentioned (code is here) is setting a token in local storage, but should apply as well to cookies
cy.visit('http://localhost:3000/#dashboard', {
onBeforeLoad: (contentWindow) => {
cy.setCookie('JSESSIONID', Cypress.env('JSESSIONID'), {
path: '/',
...
})
}
})
I think the problem is that cy.visit() is one of the places where everything is cleared down, but the hook is provided to get around that. Although, I would expect preserve to work as well.

Answer 3

You need to set a cookie from the argument contentWindow:
A cookie setter util:
export const setCookieToContentWindow = (
contentWindow,
name,
value,
{ expireMinutes = 1 } = {},
) => {
const date = new Date();
const expireTime = expireMinutes * 60 * 1000;
date.setTime(date.getTime() + expireTime);
const assignment = `${name}=${encodeURIComponent(value)}`;
const expires = `expires=${date.toGMTString()}`;
const path = 'path=/';
contentWindow.document.cookie = [assignment, expires, path].join(';');
};
Using onBeforeLoad:
cy.visit('http://localhost:3000/#dashboard', {
onBeforeLoad: (contentWindow) => {
setCookieToContentWindow(contentWindow, 'COOKIE_NAME', 'COOKIE_VALUE');
},
});