Managing Cookies with Cypress
Managing Cookies with Cypress
Learn how to read, add, edit, and delete cookies with Cypress
Cookies are a web browser feature that allow websites and applications to store little bits of information to help personalize a person’s experience on the web.
If we’re testing features like user authentication, we want to make sure that we can set, edit, and delete those cookies so that we’re testing all the different user states that are available for the project.
To start off, the first thing we want to do is test that we can actually get a cookie value.
If we look in the application tab of the web console, we can see that by default, we’re having two cookies set. We have “protein” getting set to “chicken”; and we have “vegetable” getting set to “broccoli”.
How to Get Cookies with Cypress
Inside of my code, I’m already visiting the page each time a test runs. That means I can run cy.getCookie, and I’m going to pass in the name of that cookie, such as “protein”. Then I can write an assertion on it, such as should(‘have.property’, ‘value’, ‘chicken’).
We can see if I run that test, that it’s going to get that cookie, and assert that it’s the value of “chicken”.
We can even do the exact same thing for our vegetable, where we’re going to assert that that is “broccoli”. And as expected, it’s going to get both of those cookie values and assert them to be true.
Next, if I want to manipulate that state, I want to be able to update that value of the cookie, not just read from it.
Clearing and Setting Cookies with Cypress
Cypress has a method called cy.setCookie and while that will work for setting a new cookie, which we’ll see in a little bit here, we actually need to first clear that cookie before we update it.
So I’m going to first run cy.clearCookie, where I’m going to clear the value of protein. Then I’m going to run the then function, where I’ll be able to pass in additional requests, such as running cy.setCookie. I can set the cookie of “protein”; and I can set the value to “pork”.
Finally, if I want to then assert the value of that cookie I can run then again. Inside of that, we’re going to run the getCookie command again, but this time we’re going to check that it has “pork”.
We can see that Cypress goes through. It first clears that cookie; it then sets that cookie. And then finally it gets that cookie again, where we can see the value is now “pork”.
How to Check If Cookies Are Cleared with Cypress
As we saw in that last one, if we run cy.clearCookie and we pass in the name of that cookie, we’re going to be able to clear that value. But what if we want to check instead that that value was actually cleared?
We can run then just like before. We’ll also get that cookie value, but this time we’re going to check that it should be null.
This time Cypress goes through, and we can see that it clears the cookie. Just as expected, it is set to null.
How to Set a New Cookie with Cypress
Now, finally, we were working with a cookie that was set by default, as well as updating that default cookie. But what if we wanted to set a brand-new cookie?
Similar to when we updated a cookie, we can use the setCookie command to set that new cookie, but this time we’ll run cy.setCookie.
I’m going to set the name as “fruit” and the value as “papaya”. I’ll then chain on a then function, where this time I’m going to run cy.getCookie. This time I’m going to get the fruit cookie, but then I’ll check that it should(‘have.property’, ‘value’, ‘papaya’).
Just like before, after all our test run, we can open up that new test and we can see that it first set that cookie, and then it got that cookie of fruit, which was set an equal to papaya.
Summing It Up – How to Manage Cookies with Cypress
In review, in order to work with cookies, we were first able to see that we were able to get a cookie value by passing in the name of that cookie and asserting it to be that value.
We’re also able to update a value of a cookie by first clearing that cookie value, then setting that cookie value. Then finally checking that it’s the value that we set it to by using getCookie and asserting it to be that value.
If we wanted to delete that cookie, instead of actually updating it, we can run that similar clearCookie command, but this time we’re just going to assert that it is null.
And finally, if we were tired of our protein and our vegetable and we wanted a new fruit, we can set a new cookie with setCookie, passing in the name and the value. We could then get that new cookie and assert that the value is what we set it to.
Resources
- Git Repo – cookie.spec.js
- Applitools Kitchen – Cookie Testing
Schedule a free Applitools Demonstration
Request DemoHere’s the code sample from our tutorial on how to read, add, edit, and delete cookies with Cypress
describe("Cookie", () => { beforeEach(() => { cy.visit('/ingredients/cookie'); }); it('should get the value of a cookie', () => { cy.getCookie('protein').should('have.property', 'value', 'chicken') cy.getCookie('vegetable').should('have.property', 'value', 'broccoli') }); it('should update the value of a cookie', () => { cy.clearCookie('protein').then(() => { cy.setCookie('protein', 'pork').then(() => { cy.getCookie('protein').should('have.property', 'value', 'pork'); }); }); }); it('should delete the value of a cookie', () => { cy.clearCookie('protein').then(() => { cy.getCookie('protein').should('be.null'); }); }); it('should add a new cookie', () => { cy.setCookie('fruit', 'papaya').then(() => { cy.getCookie('fruit').should('have.property', 'value', 'papaya'); }); }); });