Creating and preserving Cookies with Cypress.io

Continuing my joy ride with Cypress.io , I recently wrote a test to check for a successful logon for a public retail website.

While the test was easy enough to write but the logon was failing (inspite of the correct credentials) with the below error message returned from the website

Debugging the failure 

  1. Double check the credentials ? Done , nothing wrong there
  2. Compare against a working scenario – AHA !

I opened up Chrome Dev tools and diffed a working network request versus what Cypress was sending.  A blatant , clear to the naked eye, difference was the number of cookies being set between the Cypress call and manual browser call.

Cookies in Cypress call –

Cookies in a human generated browser call – 

Ok, so lets make these cookies consistent and see if the login process works through Cypress

Getting the cookie list and values

Within Chrome’s settings pages there is an option to see all the list and values of all the cookies that are present in the browser

I cherry picked what I could not see being set by Cypress and then the challenge moved to , how to set them up in the Cypress test ?

How do we set cookies in a Cypress test ?

A quick search in the Cypress API revealed the setCookie() method

Viola ! Now, I just to add those cookies into my test and see if this works ?

So, I added this bit of code to my test

Rerunning the test with the missing cookies set 

Brilliant…. the test and all it’s assertions pass now and in dev tools I can see that the cookies are not being set 🙂

Leave a Reply