How to use Cypress Clear Cookies Command?

Before getting started, let us understand what cookies are. Cookies are pieces of information that are stored by websites in our browsers. This information will be utilized by the respective websites based on their needs. Sometimes there may be a need to clear those cookies to test a website. 

How do Cypress cookies work?

Cypress runner/browser makes use of cookies to store user-related information. By default, Cypress removes the cookies before executing the scripts. But sometimes, we may need to clear our cookies in between while executing our test script. 

Cypress has provided the following commands to clear our cookies manually:

• cy.clearCookie()
• cy.clearCookies() 
• cy.clearAllCookies()

We can pass arguments and clear cookies based on our needs. Each of the three commands has its purpose. We will look into it with more details below.

Benefits of using the Cypress Clear Cookies Command

For some test scenarios, we may need to log in with multiple users in the same domain for a Cypress test case which might need to clear our cookies to achieve it.

• Using clear cookies commands provided by Cypress, we can log in with multiple user accounts as required by the test case. 
• Also, it improves our browser performance, gives better control over cookie data, and increases web apps’ security.  

Let’s see how Cypress clears cookies between tests from our script.

Types of Cypress Clear Cookies Commands

Cypress automation makes it very simple and easy to clear cookies with the below three commands:

1. For clearing one particular cookie

cy.clearCookie(name,options)

2. For clearing multiple cookies with specific domain

cy.clearCookies(options)

3. For clearing all cookies across different domain

cy.clearAllCookies(options)

Using Cypress Clear Cookies Command

Let’s get our hands dirty by executing the clear cookies command

1. Clearing a single cookie with clearCookie command

We are now going to execute a script which could clear a single cookie

describe('template spec', () => {
it('passes', () => {
//Visiting the browserstack website
cy.visit('https://browserstack.com')
//Getting the list of cookies which are stored
cy.getCookies()
//Clearing the cookie named “_get_browserstack”
cy.clearCookie("_gat_browserstack")
//Viewing the cookies back whether the required cookie got deleted
cy.getCookies()
})
})

2. Clearing Multiple Cookies for a Specific Domain

Similarly, now let’s clear all the cookies with a specific domain using clearCookies command

describe('template spec', () => {
it('passes', () => {
//Visiting browserstack website
cy.visit('https://browserstack.com')
//Getting the list of cookies which on stored in browser
cy.getCookies()
//Clearing the cookies with specific domain
cy.clearCookies({domain:'browserstack.com',log:true,timeout:15000})
//Getting all the cookies list currently available
cy.getCookies()
})
})

3. Clearing Multiple Cookies for all the Domains

We are now going to clear all the cookies which got stored in cypress with clearAllCookies command,

describe('template spec', () => {
it('passes', () => {
//Visiting browserstack website
cy.visit('https://browserstack.com')
//Getting the list of cookies which on stored in browser
cy.getCookies()
//Clearing all the cookies
cy.clearAllCookies()
//Getting all the cookies list currently available
cy.getCookies()
})
})

Viewing more details from the Cypress runner

• When you execute the above piece of code, you will see the execution steps in Cypress runner. 
• Try to inspect clearCookie and getCookies command.

You can view the browser console log for the cookies which got stored and cookies that are cleared while executing the clear cookie command.

Conclusion:

With that, you might be able to understand how to clear a cookie/cookies in Cypress and where to use clearCookie, clearCookies, and clearAllCookies commands. Also, the arguments which we need to pass for all the commands to use effectively. 

Cypress is an emerging testing framework and can test it across multiple devices. Browserstack provides you with a robust infrastructure to test on multiple devices with Cypress for 

• Cypress Cross-Browser Testing
• Cypress Parallel Testing
• Cypress Visual Regression
• Cypress Geolocation Testing
• Cypress Debugging

Run Cypress Tests at Scale