JSON fixture files in Cypress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a JSON fixture file in Cypress?

A JSON fixture file is a simple file that stores test data in JSON format. Cypress uses it to load data during tests, making tests cleaner and easier to maintain.

beginner

How do you load a JSON fixture file in a Cypress test?

Use cy.fixture('filename').then((data) => { ... }) to load the JSON data from the fixture file named filename.json.

beginner

Why use JSON fixture files instead of hardcoding test data?

Using JSON fixture files keeps test data separate from test code. This makes tests easier to read, update, and reuse, just like keeping your recipe separate from your cooking steps.

beginner

Where should JSON fixture files be placed in a Cypress project?

They should be placed inside the cypress/fixtures folder. Cypress automatically looks here when you use cy.fixture().

beginner

What is the correct format for a JSON fixture file?

A JSON fixture file must be valid JSON: key-value pairs inside curly braces, with keys and string values in double quotes, and no trailing commas.

Where do you place JSON fixture files in a Cypress project?

A cypress/integration

B cypress/support

C cypress/fixtures

D cypress/plugins

JSON fixture files belong in the cypress/fixtures folder so Cypress can find them with cy.fixture().

How do you access data from a JSON fixture file in a test?

A cy.load('filename')

B cy.fixture('filename').then((data) => { ... })

C cy.readFile('filename.json')

D cy.get('filename')

Use cy.fixture('filename').then(...) to load and use JSON fixture data in Cypress tests.

Why is it better to use JSON fixture files instead of hardcoding data?

A It makes tests slower

B It requires more code

C It hides test data from the tester

D It separates data from test code for easier maintenance

Separating data from test code makes tests easier to read, update, and reuse.

Which of these is a valid JSON fixture file content?

A { "name": "Alice", "age": 30 }

B { name: "Alice", age: 30 }

C { 'name': 'Alice', 'age': 30 }

D { name: 'Alice', age: 30 }

Valid JSON requires double quotes around keys and string values.

What happens if you try to load a fixture file that does not exist?

A Cypress throws an error and fails the test

B Cypress silently ignores it

C Cypress creates an empty fixture file

D Cypress retries loading automatically

Cypress throws an error if the fixture file is missing, causing the test to fail.

Explain how to use JSON fixture files in Cypress tests.

Think about where the file goes and how to load it in your test.

Describe the benefits of using JSON fixture files for test data.

Consider how separating data helps in real life, like keeping ingredients separate from cooking steps.

Practice

1. What is the main purpose of using JSON fixture files in Cypress tests?

easy

A. To store test data separately from test code for easy reuse

B. To write test assertions directly inside the JSON file

C. To configure Cypress plugins and environment variables

D. To define custom commands for Cypress tests

Solution

1. Step 1: Understand fixture file role

   Fixture files hold static data like user info or responses to use in tests.

2. Step 2: Identify purpose in Cypress

   They separate test data from code, making tests cleaner and reusable.

3. Final Answer:

   To store test data separately from test code for easy reuse -> Option A

4. Quick Check:

   Fixture files = test data storage [OK]

Hint: Fixtures hold test data, not code or configs [OK]

Common Mistakes:

• Thinking fixtures contain test logic
• Confusing fixtures with config files
• Using fixtures to write assertions

2. Which of the following is the correct way to load a JSON fixture file named user.json in a Cypress test?

easy

A. cy.getFixture('user.json').then((data) => { /* use data */ })

B. cy.loadFixture('user.json').then((data) => { /* use data */ })

C. cy.fixture('user.json').then((data) => { /* use data */ })

D. cy.readFile('user.json').then((data) => { /* use data */ })

Solution

1. Step 1: Recall Cypress fixture command

   Cypress uses cy.fixture() to load fixture files from the fixtures folder.

2. Step 2: Check method names

   Only cy.fixture() is the correct Cypress command; others do not exist or are incorrect.

3. Final Answer:

   cy.fixture('user.json').then((data) => { /* use data */ }) -> Option C

4. Quick Check:

   Use cy.fixture() to load JSON files [OK]

Hint: Use cy.fixture() to load JSON files in Cypress [OK]

Common Mistakes:

• Using non-existent commands like cy.loadFixture
• Confusing cy.readFile with cy.fixture
• Omitting the .then() to access data

3. Given the fixture file user.json with content:

{"name": "Alice", "age": 30}

What will the following Cypress code print to the console?

cy.fixture('user.json').then((user) => {
  console.log(user.name);
  console.log(user.age + 5);
})

medium

A. "user" and 35

B. "Alice" and 35

C. "Alice" and "35"

D. undefined and NaN

Solution

1. Step 1: Understand fixture data structure

   The JSON has keys "name" with value "Alice" and "age" with value 30 (number).

2. Step 2: Analyze console.log statements

   First logs user.name which is "Alice". Second logs user.age + 5, which is 30 + 5 = 35.

3. Final Answer:

   "Alice" and 35 -> Option B

4. Quick Check:

   Access JSON keys correctly = "Alice" and 35 [OK]

Hint: JSON values keep their types; numbers add normally [OK]

Common Mistakes:

• Treating numbers as strings and concatenating
• Using wrong keys or misspelling
• Expecting undefined from valid fixture keys

4. You wrote this Cypress test code to load a fixture:

cy.fixture('config.json').then((config) => {
  expect(config.timeout).to.equal(5000)
})

But the test fails with TypeError: Cannot read property 'timeout' of undefined. What is the most likely cause?

medium

A. The then callback is missing a parameter

B. The expect syntax is incorrect

C. The fixture file contains invalid JSON syntax

D. The fixture file config.json does not exist or is misnamed

Solution

1. Step 1: Analyze error message

   The error says config is undefined, so config.timeout fails.

2. Step 2: Check fixture loading causes

   If the fixture file is missing or misnamed, cy.fixture() returns undefined, causing this error.

3. Final Answer:

   The fixture file config.json does not exist or is misnamed -> Option D

4. Quick Check:

   Missing fixture file = undefined data [OK]

Hint: Check fixture file name and location first [OK]

Common Mistakes:

• Assuming expect syntax causes undefined error
• Ignoring fixture file path or name typos
• Not validating JSON file existence

5. You have a fixture file users.json containing an array of user objects:

[{"id":1,"name":"Bob"},{"id":2,"name":"Carol"},{"id":3,"name":"Dave"}]

How can you write a Cypress test to check that the user with id 2 has the name "Carol"?

hard

A. cy.fixture('users.json').then(users => { expect(users.find(u => u.id === 2).name).to.equal('Carol') })

B. cy.fixture('users.json').then(users => { expect(users[2].name).to.equal('Carol') })

C. cy.fixture('users.json').then(users => { expect(users.id === 2).to.equal('Carol') })

D. cy.fixture('users.json').then(users => { expect(users.name).to.include('Carol') })

Solution

1. Step 1: Understand fixture data structure

   The fixture is an array of objects, each with id and name.

2. Step 2: Find user with id 2 and check name

   Use find() to get the user object where id === 2, then check its name.

3. Final Answer:

   cy.fixture('users.json').then(users => { expect(users.find(u => u.id === 2).name).to.equal('Carol') }) -> Option A

4. Quick Check:

   Use find() to locate object by id [OK]

Hint: Use array.find() to locate object by property [OK]

Common Mistakes:

• Using wrong array index instead of find()
• Comparing id directly to name
• Accessing properties on the whole array