Cypress - clearAllCookies() Method

Last Updated : 23 Sep, 2024

Cypress is a tool that helps us test websites automatically. It has many useful features that allow us to interact with websites differently. One of these features is called clearAllCookies(), which is used to delete all cookies that are stored in the browser.

Usages

The clearAllCookies() method is used to clear all cookies stored in the browser. This method is useful when you want to test your application's behavior when there are no cookies present. It can also be used to clear cookies set by a previous test so that they don't interfere with the current test.

Syntax

The syntax of the clearAllCookies() method is as follows:

cy.clearAllCookies()

Arguments

None, This method does not take any arguments.

Example 1: Clearing all cookies

Let's say we have a simple web application that sets a cookie when you visit the homepage. We can use the clearAllCookies() method to clear this cookie and verify that it is no longer present.

index.html

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Cookie Example</title>
</head>
<body>
  <h1>Cookie Example</h1>
  <script>
    document.cookie = "username=John Doe";
  </script>
</body>
</html>

specs.js

JavaScript

describe('Cookie Example', () => {
  it('should clear all cookies', () => {
    // Visit the homepage
    cy.visit('index.html')
    
    // Verify that the cookie is present
    cy.getCookie('username').should('have.property', 'value', 'John Doe')
    
    // Clear all cookies
    cy.clearAllCookies()
    
    // Verify that the cookie is no longer present
    cy.getCookie('username').should('be.null')
  })
})

Output:

Example 2: Clearing all cookies before each test

Let's say we have a test suite that consists of multiple tests, and each test requires a clean cookie state. We can use the clearAllCookies() method to clear all cookies before each test.

index.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>User Preferences</title>
</head>
<body>
  <h1>User Preferences Example</h1>
  
  <button id="set-preference">Set Theme to Dark</button>
  <button id="get-preference">Show Theme Preference</button>

  <script>
    document.getElementById('set-preference').addEventListener('click', function() {
      // Set a user theme preference as a cookie
      document.cookie = "theme=dark; path=/";
      alert("Theme set to Dark.");
    });

    document.getElementById('get-preference').addEventListener('click', function() {
      // Get the theme cookie
      const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith('theme='))
        ?.split('=')[1];
      alert("Current Theme: " + (cookieValue || "Not Set"));
    });
  </script>
</body>
</html>

specs.js

JavaScript

describe('User Preferences Example', () => {
  beforeEach(() => {
    // Clear all cookies before each test
    cy.clearCookies();
  });

  it('should have no cookies initially', () => {
    // Visit the HTML file (use local server if needed)
    cy.visit('http://localhost:3000/');
    
    // Verify that there are no cookies
    cy.getCookies().should('be.empty');
  });

  it('should set and retrieve a theme preference cookie', () => {
    // Visit the HTML file
    cy.visit('http://localhost:3000/');
    
    // Click the "Set Theme to Dark" button
    cy.get('#set-preference').click();
    
    // Verify the cookie is set correctly
    cy.getCookie('theme').should('have.property', 'value', 'dark');
  });

  it('should display the current theme preference', () => {
    // Visit the HTML file
    cy.visit('http://localhost:3000/');
    
    // Set the theme cookie manually
    cy.setCookie('theme', 'dark');
    
    // Click the "Show Theme Preference" button and check alert
    cy.window().then((win) => {
      cy.stub(win, 'alert').as('alert');
    });
    
    cy.get('#get-preference').click();
    
    cy.get('@alert').should('have.been.calledWith', 'Current Theme: dark');
  });
});

Output:

Conclusion

This article talked about the clearAllCookies() method in Cypress. This method is used to remove all cookies from the browser. We looked at two examples of how to use this method to clear cookies and check that they are gone. We also saw how to use this method to clear cookies before each test. By using clearAllCookies(), you can make sure your tests start fresh, without any leftover cookies from previous tests.

What is Software Testing?

chotumishraq3v1

Improve

Article Tags :

Cypress - clearAllCookies() Method

Usages

Syntax

Arguments

Example 1: Clearing all cookies

Output:

Example 2: Clearing all cookies before each test

index.html

specs.js

Output:

Conclusion

Similar Reads

SDLC MODELS

TYPES OF TESTING

Thank You!

What kind of Experience do you want to share?