Open In App

Cypress - getCookies() Method

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Cookies play an essential role in web applications, storing user sessions, preferences, and other critical data. When performing automated testing with Cypress, it's often necessary to interact with cookies to validate their existence, values, and properties. The getCookies() method in Cypress allows you to retrieve all cookies currently set in the browser, making it easier to perform comprehensive checks on the application's state.

Usage of Cypress - getCookies() Method

In cypress, The getCookies() method is used to retrieve all cookies present in the browser at the time of execution. This is particularly useful when you need to verify multiple cookies simultaneously, check their values, or assert their attributes.

Syntax

cy.getCookies()

The getCookies() method does not require any parameters and returns an array of cookie objects.

Examples of Cypress - getCookies() Method

Example 1: Retrieving and Verifying Multiple Cookies

  • In this example, we'll demonstrate how to set multiple cookies, retrieve them using getCookies(), and verify their presence and values.

HTML File (index.html): Create a simple HTML page that sets multiple cookies:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Cookies Test Page</title>
</head>
<body>
    <h1>Get Cookies Test</h1>
    <button id="setCookies">Set Cookies</button>
    <button id="showCookies">Show Cookies</button>
    <p id="cookieValues"></p>

    <script>
        document.getElementById('setCookies').addEventListener('click', () => {
            document.cookie = "user=JohnDoe";
            document.cookie = "session=abc123";
        });

        document.getElementById('showCookies').addEventListener('click', () => {
            document.getElementById('cookieValues').textContent = document.cookie;
        });
    </script>
</body>
</html>

Cypress Test File (getCookies_example1_spec.js): Create a Cypress test to set cookies, retrieve them using getCookies(), and verify their properties:

JavaScript
describe('Using `getCookies()` to Retrieve and Verify Multiple Cookies', () => {

    beforeEach(() => {
        // Visit the HTML file hosted on localhost:3000
        cy.visit('http://localhost:3000');
    });

    it('should retrieve and verify all cookies', () => {
        // Set the cookies by clicking the button
        cy.get('#setCookies').click();

        // Retrieve all cookies
        cy.getCookies().should('have.length', 2).then((cookies) => {
            expect(cookies[0]).to.have.property('name', 'user');
            expect(cookies[0]).to.have.property('value', 'JohnDoe');
            expect(cookies[1]).to.have.property('name', 'session');
            expect(cookies[1]).to.have.property('value', 'abc123');
        });

        // Verify the cookie values are displayed correctly in the DOM
        cy.get('#showCookies').click();
        cy.get('#cookieValues').should('contain', 'user=JohnDoe');
        cy.get('#cookieValues').should('contain', 'session=abc123');
    });

});

Explanation:

  • Visit the Page: The test begins by navigating to the HTML page hosted at http://localhost:3000.
  • Set the Cookies: The test clicks a button that sets two cookies: user=JohnDoe and session=abc123.
  • Retrieve All Cookies: The test uses cy.getCookies() to retrieve all cookies currently set in the browser.
  • Verify Cookie Properties: The test asserts that two cookies were retrieved and verifies the name and value properties of each cookie.
  • Verify Displayed Values: The test checks that both cookie values are correctly displayed on the page.

Output:

output
Ouptut


Example 2: Ensuring Cookies Are Cleared Between Tests

In some cases, you may want to ensure that cookies are cleared between tests to prevent any residual data from affecting your test outcomes. This example demonstrates how to retrieve and verify that no cookies persist after being cleared.

Cypress Test File (getCookies_example2_spec.js)

JavaScript
describe('Ensuring Cookies Are Cleared Between Tests', () => {

    beforeEach(() => {
        // Clear all cookies before each test
        cy.clearCookies();

        // Visit the HTML file hosted on localhost:3000
        cy.visit('http://localhost:3000');
    });

    it('should not find any cookies before setting them', () => {
        // Retrieve all cookies and verify that none are present
        cy.getCookies().should('be.empty');
    });

    it('should set and verify cookies, then clear them', () => {
        // Set the cookies by clicking the button
        cy.get('#setCookies').click();

        // Retrieve and verify the cookies
        cy.getCookies().should('have.length', 2);

        // Clear the cookies
        cy.clearCookies();

        // Verify that all cookies have been cleared
        cy.getCookies().should('be.empty');
    });

});

Explanation:

  • Clear Cookies in beforeEach: The cy.clearCookies() command is executed before each test to ensure a clean state, preventing any cookies from a previous test from affecting the current test.
  • First Test: The first test verifies that no cookies are present before any are set.
  • Second Test: The second test sets cookies, verifies their presence, clears them, and then verifies that no cookies remain.

Output:

Output
Output

Conclusion

The getCookies() method in Cypress provides a straightforward way to retrieve and validate all cookies currently set in the browser. This method is particularly useful for testing scenarios where multiple cookies are involved, ensuring that your application is managing cookies correctly. By using getCookies() in conjunction with other Cypress commands, you can perform comprehensive tests on your application's cookie-related functionality.


Article Tags :

Similar Reads