Skip to main content
Cypress App

Test Isolation

info

What you'll learn

  • How Cypress ensures test isolation
  • How to configure test isolation in end-to-end and component testing
  • The trade-offs of enabling or disabling test isolation
tip

Best Practice: Tests should always be able to be run independently from one another and still pass.

As stated in our mission, we hold ourselves accountable to champion a testing process that actually works, and have built Cypress to guide developers towards writing independent tests from the start.

We do this by cleaning up state before each test to ensure that the operation of one test does not affect another test later on. The goal for each test should be to reliably pass whether run in isolation or consecutively with other tests. Having tests that depend on the state of an earlier test can potentially cause nondeterministic test failures which make debugging challenging.

Cypress will start each test with a clean test slate by restoring and clearing all:

In addition to a clean test slate, Cypress also believes in running tests in a clean browser context such that the application or component under test behaves consistently when run. This behavior is described as testIsolation.

The test isolation is a global configuration and can be overridden for end-to-end testing at the describe level with the testIsolation option.

Test Isolation in End-to-End Testing​

Cypress supports enabling or disabling test isolation in end-to-end testing to describe if a suite of tests should run in a clean browser context or not.

Test Isolation Enabled​

When test isolation is enabled, Cypress resets the browser context before each test by:

IndexedDB and other browser storage mechanisms are not cleared, even when test isolation is enabled. See Storage That Is Not Cleared.

Because the test starts in a fresh browser context, you must re-visit your application and perform the series of interactions needed to build the dom and browser state for each test.

Additionally, the cy.session() command will inherit this configuration and will clear the page and current browser context when establishing a browser session. This is so tests can reliably pass when run standalone or in a randomized order.

Test Isolation Disabled​

When test isolation is disabled, Cypress will not alter the browser context before the test starts. The page does not clear between tests and cookies, local storage and session storage will be available across tests in that suite. Additionally, the cy.session() command will only clear the current browser context when establishing the browser session - the current page is not cleared.

Quick Comparison​

testIsolationbeforeEach testcy.session()
true- clears page by visiting about:blank
- clears cookies in all domains
- local storage in all domains
- session storage in all domains		- clears page by visiting about:blank
- clears cookies in all domains
- local storage in all domains
- session storage in all domains
falsedoes not alter the current browser context
- clears cookies in all domains
- local storage in all domains
- session storage in all domains

Test Isolation in Component Testing​

Cypress does not support configuring the test isolation behavior in component testing.

When running component tests, Cypress always resets the browser context before each test by:

Storage That Is Not Cleared​

Cookies, localStorage, and sessionStorage are the only browser storage mechanisms Cypress clears between tests. Every other storage mechanism persists for the life of the browser, whether test isolation is enabled or disabled, and whether you are running end-to-end tests or component tests.

The one to be most aware of is IndexedDB. Data your application writes to IndexedDB, including data written by libraries that use it under the hood such as offline caches and client-side databases, is still there in the next test. If a test depends on IndexedDB being empty, clear it yourself.

The same applies to cy.session(): a session caches and restores cookies, localStorage, and sessionStorage only, so IndexedDB data is neither saved with a session nor cleared when one is restored.

Clearing IndexedDB yourself​

Delete the databases your application uses in a beforeEach hook, after visiting the page so a window is available:

cypress/support/e2e.js
beforeEach(() => {
  cy.visit('/')
  cy.window().then((win) => {
    return new Cypress.Promise((resolve) => {
      const request = win.indexedDB.deleteDatabase('my-database')

      // resolve on every outcome so a missing or blocked
      // database does not hang the test
      request.onsuccess = resolve
      request.onerror = resolve
      request.onblocked = resolve
    })
  })
})

If you do not know the database names ahead of time, and you only run your tests in Chromium-based browsers or WebKit, you can enumerate them with indexedDB.databases(). Firefox does not implement that method, so name each database explicitly if you run your tests in Firefox.

Preserving Cookies and Storage Across Tests​

Because Cypress clears all cookies, localStorage, and sessionStorage before each test when test isolation is enabled, state your application writes to those three mechanisms is gone by the next test. There are three approaches for keeping specific state available across tests. State in other storage mechanisms, such as IndexedDB, already persists on its own and needs none of them.

If you know the cookie value ahead of time — for example, a cookie-consent acceptance or a feature flag — use cy.setCookie() inside a beforeEach hook so the cookie is present at the start of every test:

// cypress/support/e2e.js  (or inside a describe block)
beforeEach(() => {
  cy.setCookie('cookieConsent', 'accepted')
})

Cache server-set cookies with cy.session()​

If your cookie is generated by the server after a login, use cy.session() to capture the full browser context once and restore it before each subsequent test — without repeating the login flow:

// cypress/support/commands.js
Cypress.Commands.add('login', (username, password) => {
  cy.session([username, password], () => {
    cy.visit('/login')
    cy.get('[data-test=username]').type(username)
    cy.get('[data-test=password]').type(password)
    cy.get('form').contains('Log In').click()
    cy.url().should('contain', '/dashboard')
  })
})

// In your spec or support file
beforeEach(() => {
  cy.login('myuser', 'password123')
  cy.visit('/dashboard')
})

cy.session() restores all cookies (and localStorage / sessionStorage) that were present when the session was first created, so server-set auth cookies are available in every test without a full login round-trip.

Disable test isolation for a suite​

You can turn off test isolation for a specific describe block by setting testIsolation: false. State set in a before hook then persists across all tests in that suite:

describe('Marketing pages', { testIsolation: false }, () => {
  before(() => {
    cy.setCookie('cookieConsent', 'accepted')
    cy.visit('/home')
  })

  it('shows the home page', () => {
    // cookieConsent cookie is present; page is already loaded
  })

  it('shows the about page', () => {
    cy.visit('/about')
    // cookieConsent cookie is still present
  })
})
caution

Disabling test isolation means tests may affect each other's state. Verify that each test still passes when run in isolation (using .only()) before relying on this approach.

Test Isolation Trade-offs​

It is important to note that disabling test isolation may improve the overall performance of end-to-end tests, however, it can also cause state to "leak" between tests. This can make later tests dependent on the results of earlier tests, and potentially cause misleading test failures. It is important to be extremely mindful of how tests are written when using this mode, and ensure that tests continue to run independently of one another.

The best way to ensure your tests are independent is to add a .only() to your test and verify it can run successfully without the test before it.

Contents