Fixtures in Cypress

Fixtures store sample data that tests use repeatedly. Instead of typing the same values inside every test file, you place them in one shared location. This topic explains how fixtures work and how to load them.

What a Fixture File Looks Like

A fixture usually takes the form of a JSON file stored inside the fixtures folder. A file named user.json might look like this:

{
  "username": "john_doe",
  "password": "secret123",
  "email": "john@example.com"
}

A Simple Way to Picture It

Think of a fixture file as a recipe card kept in a kitchen drawer. Instead of memorizing ingredients every time you cook, you pull out the card and read the exact amounts. Tests pull data from fixture files the same way, avoiding repeated manual entry.

Loading a Fixture

The cy.fixture command reads a fixture file and makes its content available inside a test.

cy.fixture('user.json').then((user) => {
  cy.get('#username').type(user.username)
  cy.get('#password').type(user.password)
})

This example fills a login form using values stored in the fixture file instead of hardcoded text.

Fixture Usage Flow

fixtures/user.json
      |
      v
cy.fixture('user.json')
      |
      v
Data available inside .then()
      |
      v
Values used to fill form fields

Why Fixtures Help Maintenance

Updating a single fixture file updates every test that references it. Without fixtures, a change to test data would require editing multiple test files individually. This shared approach reduces errors caused by inconsistent data across tests.

Using Fixtures for API Responses

Fixtures also store sample API responses used during network testing. A fixture named products.json might contain a list of sample product objects returned during a mocked network request.

[
  { "id": 1, "name": "Laptop" },
  { "id": 2, "name": "Phone" }
]

Combining Fixtures with Network Stubbing

Fixtures pair naturally with Cypress network commands, supplying fake data for a simulated server response.

cy.intercept('GET', '/api/products', { fixture: 'products.json' })

This line tells Cypress to respond with the contents of products.json whenever the test requests that specific address.

Organizing Multiple Fixtures

Larger projects often group fixtures into subfolders matching their purpose, such as fixtures/users or fixtures/products. This organization mirrors the folder structure used for test files, keeping related data easy to locate.

Reading Fixture Data Without a Callback

Recent Cypress versions support reading fixture values using aliases, avoiding deeply nested callback functions.

cy.fixture('user.json').as('userData')

cy.get('@userData').then((user) => {
  cy.get('#email').type(user.email)
})

Aliases keep test code flatter and easier to follow, especially in longer test files.

Fixtures Beyond JSON

Cypress fixtures can also store other file types, such as images or plain text files, useful for testing file upload features. A fixture folder might contain a sample image used to test an upload button.

Best Practices for Fixture Data

Keep fixture data realistic but free of sensitive real-world information. Avoid mixing test logic inside fixture files, since fixtures should only hold plain data. Name fixture files clearly so their purpose is obvious without opening them.

Key Points

• Fixtures store reusable sample data inside the fixtures folder.
• The cy.fixture command loads fixture data into a test.
• Fixtures pair well with network stubbing for simulated API responses.
• Aliases allow accessing fixture data without deep callback nesting.
• Fixtures can store JSON, images, and other file types.