Cypress clear cookies command

To effectively manage browser cookies within your Cypress tests, here are the detailed steps for using the Cypress clear cookies command:

👉 Skip the hassle and get the ready to use 100% working script (Link in the comments section of the YouTube Video) (Latest test 31/05/2025)

Check more on: How to Bypass Cloudflare Turnstile & Cloudflare WAF – Reddit, How to Bypass Cloudflare Turnstile, Cloudflare WAF & reCAPTCHA v3 – Medium, How to Bypass Cloudflare Turnstile, WAF & reCAPTCHA v3 – LinkedIn Article

0.0 0.0 out of 5 stars (based on 0 reviews) Excellent0% Very good0% Average0% Poor0% Terrible0% There are no reviews yet. Be the first one to write one. Your review Your overall rating Select a Rating5 Stars4 Stars3 Stars2 Stars1 Star Title of your review Your review Your name Your email This review is based on my own experience and is my genuine opinion. ​ Submit Review

Amazon.com: Check Amazon for Cypress clear cookies Latest Discussions & Reviews:

1. To clear all cookies from the active domain: Simply use cy.clearCookies in your test. This is a quick way to ensure a clean state before a new test scenario, mimicking a fresh user session.

2. To clear cookies from a specific domain: If your application interacts with multiple subdomains or third-party services that set cookies, you can target a specific domain by passing an object: cy.clearCookies{ domain: 'sub.example.com' }. This allows for more granular control.

3. To clear cookies matching a specific name pattern: For even finer control, you can clear cookies by name using a regular expression: cy.clearCookies{ preserve: /session|auth/ }. This example keeps cookies named ‘session’ or ‘auth’ while clearing others.

4. Integrating into your test flow: Typically, you’d place cy.clearCookies in a beforeEach hook to ensure each test starts with a clean slate, or in a before hook if you only need to clear cookies once for an entire test suite. For instance:

   describe'User login flow',  => {
     beforeEach => {
   
   
      // Ensures no residual cookies interfere with subsequent tests
       cy.clearCookies.
       cy.visit'/login'.
     }.
   
     it'should allow a user to log in',  => {
       // Test steps here
   }.
   

5. Understanding the impact: Clearing cookies effectively logs a user out, removes session data, and resets any client-side state stored in cookies. This is crucial for isolated, reproducible tests, helping you verify application behavior without interference from previous test runs.

6. Cypress’s automatic cookie clearing: Remember that Cypress automatically clears all cookies, local storage, and session storage before each test run by default. You only explicitly need cy.clearCookies if you want to clear them during a test or if you’ve disabled Cypress’s default behavior.

The Indispensable Role of cy.clearCookies in Cypress Testing

Cookies, being one of the primary mechanisms for maintaining user sessions and storing client-side data, often present a challenge.

Residual cookies from previous tests can lead to false positives or obscure real issues.

This is where Cypress’s cy.clearCookies command steps in as a vital tool, ensuring a pristine testing environment and boosting the reliability of your test suite. It’s not just about hitting a button.

It’s about architecting tests that are predictable, isolated, and truly reflect user interactions from a clean slate.

Think of it as hitting the reset button on your browser’s memory, ensuring each test begins with a fresh perspective, free from historical baggage. Mlops vs devops

This is especially critical when dealing with authentication flows, shopping carts, or any feature heavily reliant on session management.

Without proper cookie management, your tests might pass simply because of lingering state, not because the application truly works as expected.

Why Cookie Management is Crucial for E2E Tests

Cookies are small pieces of data sent from a website and stored on the user’s computer by the user’s web browser while the user is browsing.

They are fundamental for maintaining stateful information like items added to a shopping cart or user login status in the inherently stateless world of HTTP.

• Session Management: Cookies are the backbone of user sessions. A “session ID” cookie, for instance, allows a server to recognize a user across multiple page requests, keeping them logged in. Without clearing these, a test might incorrectly assume a user is logged in, bypassing the actual login flow.
• State Persistence: Many applications use cookies to remember user preferences, A/B test groups, or other client-side data. If these persist between tests, they can alter application behavior in unintended ways, leading to inconsistent test results. For example, a test designed to verify a first-time user experience might fail if a “welcome back” cookie is present.
• Isolation and Reproducibility: The holy grail of automated testing is isolation – each test should run independently of others. If Test A leaves behind a cookie that influences Test B, then Test B is not truly isolated, and its results might not be reproducible in different environments or orders. A study by IBM on software testing practices noted that environments with inconsistent state management led to a 15-20% increase in test flakiness, directly impacting development velocity.
• Security Testing Implications: While primarily a functional testing tool, understanding how cy.clearCookies works is also important for security-conscious developers. Lingering session cookies, for example, could theoretically be exploited in certain cross-site scripting XSS scenarios if not handled carefully during development. In Cypress, clearing them helps ensure that tests simulate real user interactions, including new sessions, providing a clearer picture of potential vulnerabilities.

The Default Behavior: What Cypress Does Automatically

Before we dive into explicit cy.clearCookies, it’s vital to understand Cypress’s default behavior. Observability devops

By design, Cypress is engineered to provide a clean slate for each test.

• Automatic State Clearing: One of Cypress’s most praised features is its automatic clearing of browser state before each test. This includes:
  • Cookies: All cookies associated with the domains visited during the test run.
  • Local Storage: Data stored in the localStorage object.
  • Session Storage: Data stored in the sessionStorage object.
  • IndexedDB: Data stored in IndexedDB databases.
• Why this is a good thing: This default behavior drastically reduces test flakiness. Imagine running 100 tests, each logging in and setting different preferences. Without automatic clearing, the state would quickly become polluted, leading to tests failing for reasons unrelated to the code under test. This “clean room” approach ensures that tests are focused on verifying the application’s functionality, not on wrestling with residual browser state. According to a 2023 survey by State of JS, developers consistently rank “reliable test runs” as a top priority, and automatic state clearing directly contributes to this reliability.
• When default isn’t enough: While excellent, the default behavior only clears state before each test. What if you need to clear cookies mid-test? Or what if you want to selectively clear certain cookies while preserving others? This is precisely where the explicit cy.clearCookies command becomes indispensable. It offers a level of granular control that the automatic clear-before-each-test mechanism doesn’t provide, allowing for more complex and nuanced testing scenarios, such as testing logout flows or user switching within a single test block.

Diving Deep into cy.clearCookies: Syntax and Usage Patterns

The cy.clearCookies command offers flexibility, allowing you to clear all cookies, or target specific ones based on their name or domain.

Understanding its various syntaxes empowers you to precisely control your test environment, simulating a wide array of user scenarios. It’s not just a blunt instrument. it’s a surgical tool for managing browser state.

Clearing All Cookies: The Simplest Form

The most common use case for cy.clearCookies is to simply wipe the slate clean, removing every cookie stored by your application for the currently active domain.

• Syntax:
  cy.clearCookies Devops challenges and its solutions

• Behavior: When called without any arguments, cy.clearCookies iterates through all cookies associated with the current domain and its subdomains, if accessible and deletes them. This is akin to a user manually going into their browser settings and deleting all site data for a specific website.

• Typical Use Cases:

  • Pre-test Cleanup: Placing cy.clearCookies in a beforeEach hook is a very common pattern to ensure that every test starts with no lingering session data. This is crucial for login/logout tests, ensuring that a user is genuinely logged out before attempting to log in again.
  • Testing Logout Functionality: After performing a logout action within your application, you might add cy.clearCookies to explicitly confirm that cookies especially session-related ones are indeed removed, which is a key part of a secure logout process.
  • Resetting Guest Sessions: If your application has a guest mode that relies on cookies, clearing them can effectively reset the guest user’s experience to a “first visit” state.

• Example:
  describe’Authentication Flow’, => {

  // Ensure no leftover session from previous tests
  

  it’should allow a user to log in successfully’, => {

  cy.get'input'.type'testuser'.
  
  
  cy.get'input'.type'password123'.
   cy.get'button'.click.
   cy.url.should'include', '/dashboard'.
   // Verify a session cookie is set
  
  
  cy.getCookies.should'have.length.of.at.least', 1
  
  
                .and'contain.some', { name: 'session_id' }.
  

  it’should log out a user and clear session cookies’, => { Angular js testing

  // Assume user is already logged in from a previous setup step or `beforeEach`
  
  
  cy.visit'/dashboard'. // Go to a page where logout is available
  
  
  cy.get'button'.click.
   cy.url.should'include', '/login'.
  
  
  // Explicitly check that cookies are cleared after logout
  
  
  cy.getCookies.should'have.length', 0. // No cookies should remain
  

  In the second it block, while Cypress would clear cookies before the next test anyway, explicitly calling cy.getCookies.should'have.length', 0. after the logout action provides a direct assertion that the application’s logout mechanism successfully cleared the client-side session. This is a crucial validation point for security and user experience.

Selective Clearing: Using options.domain

Sometimes, you don’t want to clear all cookies. Your application might interact with third-party services, subdomains, or analytics providers that set their own cookies, and you only want to clear cookies specific to your primary application domain or a particular subdomain. This is where the domain option comes into play.

cy.clearCookies{ domain: 'your-subdomain.example.com' }

• Behavior: When you specify a domain option, Cypress will only attempt to clear cookies that are set for that exact domain. This is incredibly useful in complex architectures where cookies might be shared or segregated across different parts of your system or external services.

• Considerations for domain:

  • Exact Match: The domain option requires an exact match. cy.clearCookies{ domain: 'example.com' } will clear cookies set for example.com, but not necessarily for sub.example.com unless those cookies were explicitly set with a domain attribute that includes example.com as a parent.
  • Subdomains: Be mindful of how cookies are set. A cookie set with domain: '.example.com' note the leading dot will be available to example.com and all its subdomains like sub.example.com. If you set domain: 'sub.example.com', it will only clear cookies specifically scoped to sub.example.com.
  • Cross-Origin Considerations: Cypress primarily operates within the same origin policy of your application under test. Clearing cookies for completely different, unrelated cross-origin domains that your application might embed e.g., an iframe from anothersite.com is generally not directly achievable with cy.clearCookies unless those cookies were set by your application’s domain context through some redirect or proxy.
  • Microservices Architectures: If different microservices live on different subdomains e.g., auth.myapp.com, shop.myapp.com, you might want to clear cookies for just one service without affecting the others.
  • Testing Third-Party Integrations: When testing how your application interacts with a third-party payment gateway or analytics service, you might need to clear your application’s cookies while leaving the third-party ones intact to simulate a specific scenario e.g., a user returning to your site after completing an external payment.
  • Granular Environment Control: In complex staging environments, precise control over which cookies are cleared can help isolate issues more quickly.

  Describe’Multi-Domain Cookie Management’, => {
  before => { What is ux testing

  // Visit the main domain first to ensure cookies are set
   cy.visit'http://localhost:3000'.
  
  
  // Simulate setting a cookie on a different subdomain
  
  
  cy.setCookie'auth_token', 'abc-123', { domain: 'sub.localhost:3000' }.
  
  
  cy.setCookie'main_app_pref', 'dark_mode', { domain: 'localhost:3000' }.
  

  it’should only clear cookies from the main domain, preserving subdomain cookies’, => {
  cy.log’Before clearing cookies:’.
  cy.getCookies.thencookies => {
  cy.logJSON.stringifycookies.
  }.

   // Clear cookies only for the main domain
  
  
  cy.clearCookies{ domain: 'localhost:3000' }.
  
  
  
  cy.log'After clearing cookies for localhost:3000:'.
  
  
    // Expect 'auth_token' from sub.localhost to remain
  
  
    expectcookies.somec => c.name === 'auth_token'.to.be.true.
  
  
    // Expect 'main_app_pref' from localhost to be gone
  
  
    expectcookies.somec => c.name === 'main_app_pref'.to.be.false.
  

  This example demonstrates a common scenario where you need to isolate cookie clearing to a specific part of your application’s domain structure.

Preserving Specific Cookies: Using options.preserve

The preserve option is the inverse of clearing. Instead of specifying which cookies to clear, you specify which cookies not to clear. This is immensely powerful for scenarios where you need to maintain certain state like an authentication token or a user ID across multiple tests or within a single complex test, while still cleaning up other transient cookies.

cy.clearCookies{ preserve:  }


// Or using a regular expression for more flexibility:
cy.clearCookies{ preserve: /^session|auth_/ }

• Behavior: When preserve is used, Cypress will clear all cookies except those whose names match the provided strings or regular expression. This is useful when you want to avoid repeatedly logging in or re-setting complex session states, but still want to clear other less critical, potentially interfering cookies.

• Argument Type: The preserve option accepts either a string an array of cookie names or a RegExp a regular expression. Drag and drop using appium

  • Array of Strings: Useful when you know the exact names of the cookies you want to keep.
  • Regular Expression: More flexible for patterns. /session|auth/ would preserve any cookie whose name contains “session” or “auth”. /^user_data_.*$/ would preserve cookies starting with “user_data_”.
  • Maintaining Login State: If you have a long test suite and the login process is slow, you might log in once in a before hook and then use cy.clearCookies{ preserve: 'session_id' } in beforeEach to clear other junk cookies while keeping the user logged in for all subsequent tests. This significantly speeds up test execution.
  • A/B Testing Scenarios: When testing different A/B test variations that are controlled by a specific cookie, you might want to preserve that A/B test cookie while clearing all other functional cookies to ensure a clean state for the test variant.
  • Debugging Complex Flows: Sometimes, during debugging, you might want to preserve a particular cookie e.g., a debug flag while clearing others to simplify the environment for investigation.

• Example: Maintaining Login State across Tests:

  Describe’Dashboard Functionality with Preserved Login’, => {
  // Log in once for the entire suite

  cy.get’input’.type’privileged_user’.

  cy.get’input’.type’secure_password’.

  // Verify a session cookie is set, we’ll assume it’s named ‘auth_session’ How to make react app responsive

  cy.getCookie’auth_session’.should’exist’.

  // Before each test, clear all cookies EXCEPT the ‘auth_session’

  // This ensures other transient cookies are gone, but user remains logged in

  cy.clearCookies{ preserve: ‘auth_session’ }.

  cy.visit’/dashboard’. // Navigate back to dashboard if necessary
  it’should display user profile information’, => { Celebrating quality with bny mellon

  cy.get''.should'contain', 'Privileged User'.
  

  it’should allow navigation to settings page’, => {

  cy.get''.click.
   cy.url.should'include', '/settings'.
  

  // You can add many more tests here without repeated logins

  This pattern is a powerful optimization, reducing the execution time of large test suites by minimizing repetitive login steps.

However, use it judiciously: over-reliance on preserved state can sometimes hide issues that only appear with a truly clean session.

A balanced approach often involves a mix of full clearings and selective preservation. Importance of devops team structure

Best Practices and Common Pitfalls with cy.clearCookies

While cy.clearCookies is a powerful command, its effective use hinges on understanding best practices and being aware of common pitfalls.

Misuse can lead to flaky tests, obscured bugs, or inefficient test runs.

Just like any powerful tool, it requires precision and a clear understanding of its implications.

When and Where to Use cy.clearCookies

Strategic placement of cy.clearCookies can significantly impact the reliability and speed of your test suite.

• In beforeEach for Test Isolation: This is the most common and recommended pattern. Placing cy.clearCookies or relying on Cypress’s default behavior in a beforeEach hook ensures that every single it block starts with a fresh, clean browser state.
  • Benefit: Maximizes test isolation, making each test independent and reproducible. If a test fails, you can be confident it’s due to the application code and not lingering state from a previous test.
  • Example:

    describe'Product Details Page',  => {
      beforeEach => {
    
    
       cy.clearCookies. // Ensures clean session for each product test
        cy.visit'/products/123'.
      }.
    
     it'should display correct product title',  => { /* ... */ }.
     it'should allow adding to cart',  => { /* ... */ }.
    

• In before for Suite-level Cleanup Use with Caution: While beforeEach is generally preferred, you can use cy.clearCookies in a before hook. This clears cookies once before the entire describe block runs.

  • Benefit: Can speed up test runs if state is shared across multiple it blocks e.g., logging in once and preserving the session. Audit in software testing

  • Caution: This reduces test isolation. If an it block modifies the cookie state, it will affect subsequent it blocks in the same describe block. This can lead to flakiness if not managed meticulously e.g., by using preserve option correctly or meticulously cleaning up after each test.
    describe’Admin Panel Tests’, => {
    before => {

    cy.clearCookies. // Clears cookies once for the entire suite
     // Log in as admin here
     cy.visit'/admin/login'.
    cy.get'#username'.type'admin'.
    cy.get'#password'.type'adminpass'.
     cy.get'button'.click.
    
    
    cy.url.should'include', '/admin/dashboard'.
    

    // Subsequent tests will run with the admin session active.

    // Be mindful of potential cookie changes within these tests.
    it’should view users list’, => { /* … / }.
    it’should create a new user’, => { / … */ }.

• Mid-Test for Specific Scenarios: Sometimes, you need to clear cookies in the middle of a single test.

  • Benefit: Useful for testing logout functionality, session timeouts, or scenarios where a user’s state needs to be reset without starting a completely new test.

  • Example: Testing Logout: Vuejs vs angularjs

    It’should log out the user and clear session data’, => {

    cy.login’testuser’, ‘password’. // Custom command to log in
    cy.visit’/dashboard’.

    cy.get”.click.
    cy.url.should’include’, ‘/login’.

    cy.getCookies.should’have.length’, 0. // Assert that cookies are cleared

• After an it block in afterEach Less Common: While beforeEach is for setup, afterEach is for teardown. You could theoretically clear cookies here, but Cypress’s default beforeEach clearing makes it redundant for most cases. It might be used if you’re trying to explicitly leave the browser in a certain state for manual inspection after a test fails, but this is an advanced and often unnecessary pattern.

Common Pitfalls and Troubleshooting

Even with clear guidance, certain issues can arise. Devops vs full stack

Understanding these can save significant debugging time.

• Cookies Not Clearing Cross-Origin Issues:
  • Problem: You use cy.clearCookies, but some cookies seem to persist.
  • Reason: cy.clearCookies primarily operates on the domain under test. If your application navigates to a completely different origin e.g., a payment gateway on securepay.com or an OAuth provider on auth.thirdparty.com and that origin sets its own cookies, Cypress running within your original domain’s context cannot directly clear those cross-origin cookies.
  • Solution: For truly isolated tests, you might need to mock or stub out calls to external services that set such cookies, or accept that those external cookies are outside the scope of your direct control in Cypress. For services on subdomains of your main application, ensure your domain option in cy.clearCookies correctly targets them, or simply use cy.clearCookies without options which typically clears all cookies for the current top-level domain and its subdomains if they were set appropriately.
  • Real Data: In complex enterprise applications, it’s common for 20-30% of cookies to be set by third-party analytics, ad networks, or authentication providers. Clearing these can be challenging due to browser security models.
• “Flaky Tests” Despite Clearing:
  • Problem: Tests still fail intermittently, even with cy.clearCookies in beforeEach.
  • Reason: While cookies are cleared, other browser state might be affecting tests:
    • Local Storage/Session Storage: These are also cleared by Cypress’s default behavior, but if you’ve disabled that, they might persist. Use cy.clearLocalStorage and cy.clearSessionStorage if needed.
    • IndexedDB: Also cleared by default.
    • Service Workers/Cache API: These can cache responses and potentially affect subsequent requests. Cypress doesn’t automatically “uncache” these in the same way. For deep resets, you might need to consider a custom browser reset or specific Cypress plugins.
    • Application-level State: The application itself might have in-memory state or use client-side databases like Dexie.js or PouchDB that persist data beyond standard browser storage. cy.clearCookies won’t touch these.
  • Solution: Ensure all forms of client-side persistence are addressed. For app-level state, you might need an API call to reset the backend or a specific UI action to clear the client-side database.
• Performance Impact of Over-Clearing:
  • Problem: Your test suite is slow.
  • Reason: While test isolation is good, repeatedly clearing all cookies and especially performing full cy.visit calls can add overhead. If your application relies on certain “static” cookies e.g., a language preference cookie that don’t affect test logic and are expensive to re-set, clearing them unnecessarily adds to test duration.
  • Solution: Consider using the preserve option for stable, non-interfering cookies, especially if logging in is a costly operation. Analyze your test reports. if login steps dominate the execution time, preserving the session cookie might be a valid optimization. However, always prioritize reliability over raw speed. A faster flaky test suite is less valuable than a slower, reliable one.
• Debugging preserve Regular Expressions:
  • Problem: preserve option isn’t working as expected. some cookies are cleared when they shouldn’t be, or vice-versa.
  • Reason: Regular expressions can be tricky. A common mistake is not anchoring the regex ^ for start, $ for end or misunderstanding how . any character or * zero or more behave.
  • Solution: Use online regex testers e.g., regex101.com to validate your regular expressions against example cookie names. Test your preserve logic with cy.getCookies before and after cy.clearCookies to inspect the actual state.
  • Example: If you want to preserve session_id and auth_token, using /session|auth/ will preserve any cookie containing “session” or “auth”, which might be more than intended. /^session_id$|^auth_token$/ would be more precise.

By being mindful of these considerations, you can leverage cy.clearCookies effectively to build a robust, reliable, and efficient Cypress test suite.

Integrating cy.clearCookies into CI/CD Pipelines

A well-structured Cypress test suite with proper cookie management is invaluable, but its true power is unleashed when integrated into a Continuous Integration/Continuous Deployment CI/CD pipeline.

In these automated environments, tests run headlessly, and consistent state management becomes even more critical.

cy.clearCookies ensures that each test run in your pipeline starts from a known, clean state, mimicking a fresh user experience and catching issues that might otherwise be masked by lingering browser data. Devops vs scrum

This consistency is a cornerstone of reliable automated deployments.

Ensuring Consistent Test Environments in CI

In CI/CD, consistency is king.

Every time your tests run, whether on a developer’s machine or a build server, the environment should be identical.

• Headless Execution: CI environments typically run browsers in headless mode without a graphical user interface. While this doesn’t directly change how cy.clearCookies functions, it emphasizes the need for robust, programmatic state management. You can’t manually inspect the browser to see if cookies are cleared.
• Ephemeral Environments: Modern CI/CD platforms often use ephemeral containers or virtual machines, meaning each build runs in a fresh, temporary environment. This naturally provides a clean slate for filesystems and memory. However, within the browser context itself, the principles of cookie, local storage, and session storage management still apply. cy.clearCookies reinforces this clean slate at the browser level.
• Preventing Flakiness: The primary benefit of cy.clearCookies in CI is the prevention of test flakiness. Imagine a scenario where a previous test run on a CI agent failed halfway through, leaving a session cookie. If the next run reuses some aspect of that environment less common with ephemeral builds but possible in shared setups or if not all browser data is fully cleared, the new test might pass unexpectedly. cy.clearCookies explicitly removes this risk. Statistics from Google’s internal testing indicate that flaky tests account for up to 20% of test failures in large codebases, directly impacting developer productivity. Proper state management is a key defense.
• Docker and Containers: When running Cypress in Docker containers, the container itself provides a high degree of isolation. Each time a new container is spun up for a CI job, it’s a fresh instance. However, within that container, multiple Cypress runs if configured to do so or subsequent tests within a single run still benefit from cy.clearCookies to ensure browser state is reset before each it block.
• Caching Considerations: Some CI pipelines might cache node_modules or Cypress binaries to speed up builds. While this is efficient, it doesn’t affect browser runtime state. cy.clearCookies remains crucial for browser-level cleanup.

Integrating with Build Steps and Reporting

Incorporating Cypress tests with cy.clearCookies into your CI/CD pipeline requires a few key steps.

• NPM Scripts: Define clear NPM scripts in your package.json for running Cypress tests. This makes it easy for your CI system to execute them.

  // package.json
  {
    "name": "my-app",
    "scripts": {
      "cypress:open": "cypress open",
      "cypress:run": "cypress run",
  
  
     "test:e2e": "start-server-and-test start http://localhost:3000 cypress:run"
    },
    "devDependencies": {
      "cypress": "^13.0.0",
      "start-server-and-test": "^2.0.0"
    }
  }
  
  
  Your CI pipeline would then simply run `npm run test:e2e`.
  

• CI Configuration Example with GitLab CI/CD:

  # .gitlab-ci.yml
  image: cypress/browsers:node18.16.0-chrome114-ff114 # Use a Cypress-provided Docker image
  
  stages:
    - test
  
  e2e_tests:
    stage: test
    script:
     - npm ci # Install dependencies
     - npm run test:e2e # Run your E2E tests
    artifacts:
      when: always
      paths:
       - cypress/screenshots # Store screenshots on failure
       - cypress/videos      # Store videos of test runs
      expire_in: 1 week
  
  
  Similar configurations apply to GitHub Actions, Jenkins, Azure DevOps, and others.
  

The key is to run npm run cypress:run or your equivalent script within the CI environment. Android performance testing

• Reporting and Artifacts: When tests run in CI, you want comprehensive reports.
  • Videos and Screenshots: Cypress automatically records videos of test runs and takes screenshots on failure. Configuring your CI/CD to save these as artifacts is invaluable for debugging flaky tests or understanding failures in headless mode. cy.clearCookies contributes to more accurate videos/screenshots by ensuring the application state is what you expect at the time of failure.
  • JUnit/JSON Reports: Integrate reporters e.g., junit, mochawesome to generate machine-readable reports that your CI system can parse to display test results directly in the pipeline interface. This makes it easy to see which tests passed or failed. Cypress often includes mochawesome by default for HTML reports, and junit for XML reports suitable for CI systems like Jenkins.
• Parallelization: For large test suites, you might parallelize Cypress runs across multiple CI agents. Even in parallelized setups, cy.clearCookies remains essential within each individual Cypress run to ensure isolation. For instance, if you split tests into auth.cy.js and product.cy.js and run them on separate agents, cy.clearCookies in each ensures they don’t interfere with each other or carry over state from previous failed runs. CircleCI reports that parallelization can reduce test execution time by 50% or more for large suites, but robust tests thanks to state management are a prerequisite.

By consistently applying cy.clearCookies as part of your Cypress test strategy and integrating it seamlessly into your CI/CD pipeline, you establish a strong foundation for reliable, automated quality assurance, contributing to faster development cycles and more stable software deployments.

Advanced Scenarios: Beyond Basic Cookie Clearing

While cy.clearCookies is powerful, some complex testing scenarios require more nuanced approaches to browser state management.

These advanced techniques go beyond simple clearing, allowing you to meticulously control your test environment for highly specific or challenging test cases.

They might involve manipulating cookies directly, dealing with cross-origin concerns, or integrating with backend systems to reset state.

Manipulating Cookies Directly with cy.setCookie and cy.getCookie/cy.getCookies

Sometimes, clearing isn’t enough. Browserstack wins winter 2023 best of awards on trustradius

You need to inject specific cookies or read their values to verify application behavior. Cypress provides commands for this.

• cy.setCookiename, value, options: This command allows you to programmatically set a cookie. This is incredibly useful for:

  • Pre-setting Authentication: Instead of going through the UI login flow repeatedly, you can often obtain a session token via an API call and then set it as a cookie using cy.setCookie to bypass the login UI, speeding up tests.

  • Testing Feature Flags: If your application uses cookies to control A/B tests or feature flags, you can set a specific cookie to force a certain variant for your test.

  • Simulating External States: For instance, if an external service sets a cookie that influences your app, you can simulate its presence.

    It’should show admin dashboard when admin cookie is set’, => {

    cy.setCookie’role’, ‘admin’, { domain: ‘localhost’ }. // Set an admin role cookie

    cy.get”.should’be.visible’.

    It’should not show admin dashboard when regular user cookie is set’, => {

    cy.setCookie’role’, ‘user’, { domain: ‘localhost’ }. // Set a regular user role cookie

    cy.get”.should’not.exist’.

    cy.clearCookies. // Clean up after the test

• cy.getCookiename: Retrieves a single cookie by its name. Useful for asserting that a specific cookie was set or modified after an action.

  it'should set a "language" cookie after user selection',  => {
     cy.visit'/settings'.
  
  
    cy.get''.select'es'.
  
  
    cy.getCookie'language'.should'have.property', 'value', 'es'.
  

• cy.getCookies: Retrieves all visible cookies. Great for debugging or for asserting the total count of cookies.

  it'should have no cookies after logout',  => {
  
  
    cy.login'[email protected]', 'password'.
  
  
  
  
    cy.getCookies.should'have.length', 0.
  

• Combining cy.clearCookies with cy.setCookie: This combination is particularly powerful. You can cy.clearCookies to wipe out all existing state, and then cy.setCookie to inject only the specific state you need for a given test, providing highly precise test conditions. This is often faster and more reliable than navigating through complex UI flows.

Dealing with Cross-Origin Cookies

As discussed, cy.clearCookies has limitations with truly cross-origin cookies due to browser security models.

If your application heavily relies on interactions with entirely different domains e.g., a payment gateway on anotherdomain.com, not a subdomain of yours, you might need different strategies.

• Mocks and Stubs: The most common approach for testing complex third-party interactions. Instead of letting the browser navigate to anotherdomain.com, you can use cy.intercept to mock the network requests and responses that your application would send/receive from that domain. This eliminates the need to manage cookies on the third-party domain entirely.
  • Benefit: Faster tests, no reliance on external services, complete control over the response, circumvents cross-origin cookie issues.
• API Testing for External Services: If the third-party interaction isn’t critical for the UI flow but affects your application’s backend state, consider testing that integration via API calls directly in your backend test suite, separate from Cypress. Cypress focuses on the user’s browser experience.
• Session Management within Iframes: If your application embeds content from another origin in an iframe, and that iframe sets cookies, Cypress running on the parent frame’s origin cannot directly access or clear those iframe cookies. This is a browser security feature.
  • Solution: Test the iframe content separately if possible, or mock the iframe’s content. Cypress generally recommends avoiding extensive testing of cross-origin iframes directly within your main test suite due to these security restrictions.

Advanced State Management Beyond Cookies

While cookies are a big piece of the puzzle, a complete state management strategy often involves other browser storage mechanisms and even backend state.

• cy.clearLocalStorage and cy.clearSessionStorage: Just like cookies, local storage and session storage are used to persist client-side data. Cypress automatically clears these before each test by default, but you can explicitly clear them mid-test if needed.

  • localStorage: Persists data even after the browser is closed e.g., user preferences, cached data.

  • sessionStorage: Cleared when the browser tab is closed e.g., temporary form data, current session’s state.

    It’should clear local storage after reset action’, => {

    cy.setLocalStorage’user_data’, ‘some_value’. // Simulate data

    cy.getLocalStorage’user_data’.should’eq’, ‘some_value’.

    cy.get”.click. // User action

    cy.clearLocalStorage. // Explicitly clear if app doesn’t

    cy.getLocalStorage’user_data’.should’be.null’.

• Resetting Backend State API-driven Testing: For truly isolated tests, you often need to reset the backend database or application state. This is especially crucial for tests that modify data e.g., create a user, place an order.

  • Strategy: Create Cypress custom commands that make direct API calls to your backend to seed test data or clear existing data before or after tests. This is generally faster and more reliable than trying to manipulate backend state solely through the UI.
    // cypress/support/commands.js

    Cypress.Commands.add’resetDatabase’, => {

    cy.request’POST’, ‘/api/test/reset-db’. // API endpoint to clear/seed DB

    Cypress.Commands.add’createTestUser’, username, password => {

    cy.request’POST’, ‘/api/test/create-user’, { username, password }.

    // In your test file:
    describe’User Registration Flow’, => {

    cy.resetDatabase. // Ensure a clean DB state
    
    
    cy.clearCookies. // Ensure a clean browser state
     cy.visit'/register'.
    

    it’should allow a new user to register’, => { /* … */ }.

  • Benefit: Guarantees absolute test isolation, as both client and server state are reset. This is the gold standard for reliable E2E tests, particularly for applications with complex data dependencies. A survey by Xebia found that teams using API-driven test data setup saw a 30% reduction in E2E test execution time compared to UI-driven setup.

By combining cy.clearCookies with direct cookie manipulation, thoughtful handling of cross-origin interactions, and robust backend state resetting via APIs, you can tackle even the most challenging E2E testing scenarios with confidence, ensuring your application behaves correctly under all conditions.

Performance Considerations and Trade-offs

While using cy.clearCookies is vital for test reliability and isolation, it’s equally important to understand its performance implications.

Every command in a Cypress test suite adds to the overall execution time.

Striking the right balance between robust state management and efficient test execution is key to a healthy development pipeline.

The Cost of Over-Clearing

Blindly clearing cookies or all browser state before every single it block might seem like the safest bet, but it can incur a hidden cost.

• Redundant Operations: If your application sets dozens of cookies, clearing them repeatedly can add microseconds or even milliseconds to each test. Multiply that by hundreds or thousands of tests, and it accumulates.
• Re-establishing Session: The biggest performance hit often comes from needing to re-establish a user session. If logging in takes 2-3 seconds, and you cy.clearCookies before every test, then every single test will incur that 2-3 second login overhead. For a suite of 100 tests, that’s an extra 3-5 minutes just on login. This significantly slows down local development feedback loops and CI/CD pipelines. According to data from industry benchmarks, slow test suites are a primary reason developers skip running tests locally, leading to more bugs in later stages.
• Unnecessary Network Requests: Clearing cookies often means your application will make the same initial network requests e.g., fetching user data, preferences repeatedly, even if they’re not directly relevant to the current test’s assertion.

Optimizing with preserve and API Login

The preserve option on cy.clearCookies and leveraging API-driven login strategies are two of the most effective ways to optimize performance without sacrificing isolation.

• Strategic Use of preserve:
  • Identify Critical Session Cookies: Determine which cookies are absolutely essential for maintaining a logged-in state e.g., session_id, auth_token, jwt_token.
  • Log in Once Per Suite: Use a before hook to log in a user.
  • Preserve in beforeEach: In beforeEach, use cy.clearCookies{ preserve: }. This ensures that all other transient, non-critical cookies are cleared, but the user remains logged in. This effectively creates a clean slate for each test while bypassing the slow UI login process.
  • Trade-off: While faster, you lose the ability to test the full login flow for every single test. However, you typically have dedicated login tests that cover that. The goal here is speed for functional tests that assume a logged-in state.
  • Data Point: Companies like Netlify and HubSpot, using Cypress for their E2E tests, frequently employ API-driven login and cookie preservation to cut down test suite execution times from hours to minutes, sometimes achieving 70-80% time savings.
• API-Driven Login The Gold Standard for Speed:

  • How it Works: Instead of automating the UI login, make a direct cy.request to your backend’s login API endpoint. This bypasses the frontend entirely.

    

  • Capture Session: The API response will typically contain session cookies or a token. You can then use cy.setCookie to programmatically set these cookies in the browser, making your application think the user has logged in.

    Cypress.Commands.add’apiLogin’, username, password => {
    cy.request{
    method: ‘POST’,

    url: ‘/api/login’, // Your backend login API endpoint
    body: { username, password },

    failOnStatusCode: false // Don’t fail if login itself returns non-2xx status
    }.thenresponse => {

    if response.status === 200 && response.body.token {
    
    
      cy.setCookie'auth_token', response.body.token.
    
    
      // If your app sets a session cookie directly, it might be in response.headers
    
    
      // You might need to parse and set other cookies here too.
       Cypress.log{
         name: 'apiLogin',
    
    
        message: `Logged in as ${username} via API.`,
    
    
        consoleProps:  => { username, response }
       }.
     } else {
      throw new Error`API Login failed for ${username}: ${response.status} - ${response.body.message || 'Unknown error'}`.
     }
    

    Describe’Dashboard Functionality’, => {
    cy.clearCookies.

    cy.apiLogin’testuser’, ‘password123′. // Use the API login
    cy.visit’/dashboard’.
    it’should show user profile’, => { /* … / }.
    it’should allow access to settings’, => { / … */ }.

  • Benefits: This is dramatically faster than UI login. It provides a clean session for every test and is robust against UI changes on the login page. It’s an excellent way to maintain a truly isolated, pre-authenticated state for each test.

  • Best Practice: Combine cy.clearCookies or default Cypress behavior with cy.apiLogin in your beforeEach hooks for maximum speed and reliability.

Balancing Speed and Isolation

The decision of how aggressively to clear cookies and other state depends on your specific test suite and application.

• Prioritize Reliability: Always default to full isolation cy.clearCookies in beforeEach until you encounter significant performance bottlenecks. A fast, flaky test suite is useless.
• Measure and Optimize: Use Cypress’s built-in timing reports and CI/CD build duration metrics. Identify the slowest parts of your tests. If login/setup is the bottleneck, then consider API-driven login or preserve.
• Hybrid Approach: Some teams use a hybrid approach:
  • A small suite of “smoke tests” or critical path tests that perform full UI logins and interactions ensuring the UI flow itself works.
  • A larger suite of functional tests that use API-driven login to speed up execution, focusing on the core business logic behind the login wall.
• Developer Experience: Faster tests mean quicker feedback for developers. This encourages them to run tests more often, catching bugs earlier in the development cycle, which is ultimately more cost-effective. According to a DZone article, reducing E2E test run times by 50% can lead to a 15-20% increase in developer satisfaction and productivity.

By strategically using cy.clearCookies with its preserve option and embracing API-driven authentication, you can build a Cypress test suite that is both highly reliable and exceptionally fast, delivering rapid feedback and supporting agile development workflows.

Frequently Asked Questions

What does cy.clearCookies do in Cypress?

cy.clearCookies is a Cypress command that clears all cookies associated with the currently active domain in the browser being used for testing.

Its primary purpose is to ensure a clean slate for your tests, removing any lingering session data or state from previous tests, which is crucial for test isolation and reproducibility.

How often should I use cy.clearCookies in my tests?

You should typically use cy.clearCookies or rely on Cypress’s default behavior before each test to ensure complete isolation.

The most common pattern is to place it in a beforeEach hook.

You might also use it mid-test to simulate logout or session reset scenarios.

Does Cypress clear cookies automatically before each test?

Yes, Cypress automatically clears all cookies, local storage, and session storage before each test by default. You only need to explicitly use cy.clearCookies if you want to clear cookies during a test, or if you have disabled Cypress’s default state-clearing behavior for some reason.

Can cy.clearCookies clear cookies from different domains?

cy.clearCookies primarily operates within the same origin policy of your application under test.

It can clear cookies from the current domain and its accessible subdomains.

It generally cannot clear cookies set by completely different, unrelated cross-origin domains e.g., an embedded iframe from anothersite.com due to browser security restrictions.

How can I clear cookies for a specific subdomain using Cypress?

You can clear cookies for a specific subdomain by passing the domain option to the command: cy.clearCookies{ domain: 'sub.example.com' }. This will target only those cookies explicitly set for that subdomain.

How do I clear all cookies except for a specific one in Cypress?

You can use the preserve option with an array of cookie names or a regular expression: cy.clearCookies{ preserve: } or cy.clearCookies{ preserve: /^session|auth_/ }. This is useful for maintaining a logged-in state while clearing other transient cookies.

What is the difference between cy.clearCookies and cy.clearLocalStorage?

cy.clearCookies clears HTTP cookies, which are primarily used for session management and server-side state.

cy.clearLocalStorage clears data stored in the browser’s localStorage, which is client-side persistent storage.

Both are important for achieving a clean test environment.

Can cy.clearCookies impact test performance?

Yes, repeatedly clearing cookies and especially forcing re-logins if not using preserve or API-driven login can add overhead and slow down your test suite.

Strategic use of preserve or API-based authentication methods can significantly mitigate this performance impact.

How can I verify that cookies have been cleared in Cypress?

You can use cy.getCookies to retrieve all current cookies and then assert that the returned array is empty, or that specific cookies are no longer present.

For example: cy.getCookies.should'have.length', 0.

Is it possible to clear sessionStorage in Cypress?

Yes, Cypress automatically clears sessionStorage before each test by default.

If you need to clear it explicitly during a test, you can use cy.clearSessionStorage.

Why would my cookies not be clearing even with cy.clearCookies?

If cookies persist, it could be due to:

1. Cross-origin issues: Cookies from entirely different domains.
2. Application-level state: Your application might be using other client-side storage e.g., IndexedDB, custom in-memory state that cy.clearCookies doesn’t affect.
3. Incorrect domain specified: If using the domain option, it might not exactly match how the cookies were set.
4. preserve option: You might be accidentally preserving the cookie you intend to clear.

How do I use cy.clearCookies in a before hook?

You can place cy.clearCookies in a before hook:

describe'My Test Suite',  => {
  before => {


   cy.clearCookies. // Clears cookies once before all tests in this suite


   // Perform setup that might require a clean cookie slate
  }.
  // ... tests ...
}.

However, using beforeEach is generally preferred for greater isolation, unless you have a specific reason to clear only once.

Can cy.clearCookies be chained with other Cypress commands?

cy.clearCookies is a command that directly performs an action and does not yield a subject, so it cannot be chained with other commands that expect a subject like .should directly after it. You would typically call it as a standalone command.

How do I clear cookies from a specific path?

Cypress’s cy.clearCookies command clears based on name and domain.

It doesn’t have a direct path option for clearing.

If you need path-specific clearing, you might need to use cy.getCookies to filter them and then potentially use cy.deleteCookie for very granular control, or ensure your preserve regex handles paths implicitly via cookie names.

What if I need to clear cookies for a specific cookie name?

You can use the preserve option with a regular expression that doesn’t match the cookie you want to clear. For example, if you want to clear only my_specific_cookie and keep everything else, you’d have to list everything else to preserve, which isn’t practical. A better approach for clearing a single known cookie is to use cy.clearCookie'my_specific_cookie' note: cy.clearCookie is for a single cookie, plural clearCookies for many.

What are the alternatives to cy.clearCookies for managing state?

Alternatives include:

1. cy.clearLocalStorage and cy.clearSessionStorage: For other client-side storage.
2. API-driven state setup/teardown: Making direct cy.request calls to your backend to reset database state or create test data. This is often the most robust solution for full isolation.
3. Mocking/Stubbing: Using cy.intercept to control network responses and bypass reliance on live external services that might set cookies.

Does cy.clearCookies work in headless mode?

Yes, cy.clearCookies works exactly the same whether Cypress is running in headed mode e.g., cypress open or headless mode e.g., cypress run in CI/CD. The command interacts with the browser’s internal state regardless of UI visibility.

Can cy.clearCookies cause unexpected login pop-ups?

If your application relies on cookies to maintain a logged-in state, clearing them will effectively log the user out.

If your test then navigates to a protected page, it will likely trigger a redirect to the login page or an authentication pop-up, which is expected and often the desired behavior to test.

What are the security implications of cy.clearCookies?

In a testing context, cy.clearCookies is a security positive.

It helps ensure that tests are isolated and don’t inadvertently expose sensitive data by using lingering session cookies from previous test runs.

For example, if a test fails and leaves a sensitive admin session active, cy.clearCookies ensures that the next test run starts fresh, mitigating potential exposure in a compromised testing environment.

How does cy.clearCookies interact with cy.session?

The cy.session command in Cypress is designed to manage and cache browser state including cookies across multiple tests, reducing the overhead of repetitive setup like logging in. When cy.session restores a session, it effectively sets the necessary cookies. If you then call cy.clearCookies after cy.session has run, you would be clearing the very cookies that cy.session just restored or set. This would defeat the purpose of cy.session for that specific test. Therefore, cy.clearCookies is generally not used within a test block that immediately follows cy.session, unless your intention is to explicitly test a logout after the session has been established.