Cypress not loading page headless after click login button

Question

when i run my script headless seems not load the next page, the video recorded after execute it, shows the following:

enter image description here

and fails after that with a timeout error enter image description here

here the test: context('TS001-login', () => {

beforeEach(() => {
  cy.visit('/');


})

const userName = "sdfgsdfg";
const passwrd = "gsdfgsdgg";

it.only('login with valid user and password', () => {
  
  cy.get('#j_username', {timeout : 31500}).type(userName);
  cy.get('#j_password', {timeout : 31500}).type(passwrd);
  //cy.contains('Login').click({force: true});
  cy.contains('Login').type('{enter}');      
  cy.get('#logout', {timeout : 71500}).should('be.visible');

  cy.wait(2500);

});



it.only('login with invalid user and valid password', () => {
  cy.get('#j_username', {timeout : 31500}).type('userName');
  cy.get('#j_password', {timeout : 31500}).type(passwrd);
  cy.contains('Login').click({force: true});
  cy.get('#error').should('contain', errorLP1);
  cy.wait(2500);

});

here the cypress.json: {

"baseUrl": "http://salesportal-uat.xxxxx/",
"ignoreTestFiles": "**/ignore/*.spec.js",
"chromeWebSecurity": false,
"viewportWidth": 1280,
"viewportHeight": 720,
"defaultCommandTimeout": 30000,
"pageLoadTimeout": 60000,
"requestTimeout": 20000,
"retries": {
    "runMode": 1,
    "openMode": 1

},

"experimentalSessionAndOrigin": true

}

Also, this works perfect in protractor : headed and headless, but need it to work in cypress Im using version 9.6.1 and tried as well with 8.5.0 , Please help.

---

Tried with
before(() => {

cy.visit('/')

})
and works well in headed mode but not headless, Still having same results when tries to enter the page after click login, throwing timeout error. enter image description here enter image description here

Here working well in headed mode: enter image description here

I think cypress is doing something when executes it headless. Dunno what it is. Any ideas?

Answer 1

Use a before() hook for cy.visit,

before(() => {

  cy.visit('/')

})

not in

beforeEach(() => {
  cy.visit('/');


})

If you used to visit in beforeEach () hook, it will repeatedly try to access the basic URL you specified in your cypress.json during each test.

So, before() runs once before all your code. beforeEach() runs before each of your code blocks.

And also you can do the following to store all cookies between tests once.

beforeEach(function () {
  cy.getCookies().then(cookies => {
    const namesOfCookies = cookies.map(c => c.name)
    Cypress.Cookies.preserveOnce(...namesOfCookies)
  })
})

Because after Each it blocks the execution of cypress clean cookies

And if your test failed again after this, due to being unable to find an element within mentioned time, then increase ```"pageLoadTimeout" in your cypress.json or use a custom timeout.

Answer 2

The reason is here you activated experimentalSessionAndOrigin in your cypress.json since all session state is now cleared between tests.

You can use the cy.session () command, which allows you to easily cache session information and reuse it through testing.

If you no need to access multiple domains within your test suite you disable or remove experimentalSessionAndOrigin in your cypress.json Or if you need then you can improve this by using cy.session(), please refer to the document

Answer 3

So could you please try, this in tour test spec file

beforeEach(function () {
  cy.getCookies().then(cookies => {
    const namesOfCookies = cookies.map(c => c.name)
    Cypress.Cookies.preserveOnce(...namesOfCookies)
  })
})

And take off experimentalSessionAndOrigin in your cypress.json