cy.fixture() for loading data in Cypress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this Cypress test snippet?

Consider the following Cypress test code that loads a fixture file named user.json and logs the user's name. What will be printed in the test runner console?

Cypress

cy.fixture('user.json').then((user) => {
  cy.log(`User name is: ${user.name}`)
})

A User name is: Alice

B User name is: undefined

C SyntaxError: Unexpected token in fixture file

D Error: Fixture file not found

💡 Hint

Check the content of the fixture file user.json and how cy.fixture() loads it.

The fixture file user.json contains a JSON object with a name property set to "Alice". The cy.fixture() command loads this file asynchronously and passes the parsed object to the then callback. The cy.log() prints the user's name correctly.

❓ assertion

intermediate

Which assertion correctly verifies fixture data in Cypress?

You have loaded a fixture settings.json with cy.fixture('settings.json'). Which assertion correctly checks that the theme property equals dark?

Cypress

cy.fixture('settings.json').then((settings) => {
  // Insert assertion here
})

A expect(settings.theme).to.equal('dark')

B assert.equal(settings['theme'], 'light')

C expect(settings.theme).to.be.undefined

D assert.isTrue(settings.theme === 'light')

💡 Hint

Use the correct expected value and assertion style.

The fixture settings.json has a theme property set to "dark". Option A uses expect with to.equal to check the correct value. Options B and D check for "light" which is incorrect. Option A checks for undefined which is wrong.

🔧 Debug

advanced

Why does this Cypress test fail to load the fixture data?

Given this test code, why does the test fail with Error: Fixture file not found?

Cypress

cy.fixture('nonexistent.json').then((data) => {
  cy.log(data)
})

A The <code>cy.fixture()</code> command requires an absolute path

B The fixture file <code>nonexistent.json</code> does not exist in the fixtures folder

C The <code>then</code> callback is missing a return statement

D The fixture file must be imported with <code>import</code> before use

💡 Hint

Check the file name and location in the Cypress project structure.

The error occurs because the file nonexistent.json is not found in the cypress/fixtures folder. cy.fixture() expects the file to be present there. Options B, C, and D are incorrect because cy.fixture() uses relative paths from the fixtures folder, the callback does not require a return, and no import is needed.

❓ framework

advanced

How to use cy.fixture() with beforeEach to load data once per test?

Which code snippet correctly loads data.json fixture once before each test and makes it available as this.data inside tests?

A

beforeEach(() => {
  cy.fixture('data.json').then((data) => {
    this.data = data
  })
})

B

beforeEach(function() {
  cy.fixture('data.json').then((data) => {
    this.data = data
  })
})

C

beforeEach(function() {
  cy.fixture('data.json').then(function(data) {
    this.data = data
  })
})

D

beforeEach(() => {
  cy.fixture('data.json').then(function(data) {
    this.data = data
  })
})

💡 Hint

Remember how this behaves in arrow functions vs regular functions in JavaScript.

Option C uses regular functions for both beforeEach and the then callback, so this correctly refers to the Mocha context, allowing this.data to be set and accessed in tests. Arrow functions do not bind their own this, so options A, B, and C fail to set this.data properly.

🧠 Conceptual

expert

What is the main advantage of using cy.fixture() in Cypress tests?

Choose the best explanation for why cy.fixture() is used in Cypress testing.

A It speeds up test execution by caching all network requests

B It automatically generates random test data for each test run to increase coverage

C It replaces the need for assertions by validating data automatically

D It allows loading external static data files to use consistent test data across multiple tests

💡 Hint

Think about how test data management helps testing.

cy.fixture() loads static data files (like JSON) so tests can use consistent, reusable data. This helps keep tests clean and maintainable. It does not generate random data (B), replace assertions (C), or cache network requests (D).

Practice

1. What is the primary purpose of cy.fixture() in Cypress testing?

easy

A. To start the Cypress test runner

B. To load external test data files for use in tests

C. To perform assertions on page content

D. To locate elements on the web page

Solution

1. Step 1: Understand the role of cy.fixture()

   cy.fixture() is used to load data from external files like JSON, which can be reused in tests.

2. Step 2: Compare with other Cypress commands

   Locating elements is done by cy.get(), assertions by should(), and starting tests is automatic or via CLI, not cy.fixture().

3. Final Answer:

   To load external test data files for use in tests -> Option B

4. Quick Check:

   Purpose of cy.fixture() = Load test data [OK]

Hint: Remember: fixture means fixed data file loading [OK]

Common Mistakes:

• Confusing cy.fixture() with element selectors
• Thinking it runs tests instead of loading data
• Using it for assertions instead of data loading

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

easy

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

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

C. cy.readFile('user.json').then((data) => { ... })

D. cy.fixture('user.json').then((data) => { ... })

Solution

1. Step 1: Recall the correct Cypress command for fixtures

   The correct command is cy.fixture() to load fixture files.

2. Step 2: Check the syntax for loading and using data

   The syntax uses cy.fixture('filename').then((data) => { ... }) to access the loaded data.

3. Final Answer:

   cy.fixture('user.json').then((data) => { ... }) -> Option D

4. Quick Check:

   Correct fixture syntax = cy.fixture('user.json').then((data) => { ... }) [OK]

Hint: Use cy.fixture('file').then() to load data [OK]

Common Mistakes:

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

3. Given the fixture file user.json contains { "name": "Alice", "age": 30 }, what will the following Cypress code print?

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

medium

A. Alice and 30

B. user.name and user.age

C. undefined and undefined

D. Error: fixture not found

Solution

1. Step 1: Understand the fixture data structure

   The fixture file contains a JSON object with keys "name" and "age" having values "Alice" and 30 respectively.

2. Step 2: Analyze the Cypress code output

   The code logs user.name and user.age, so it will print "Alice" and 30 in the Cypress log.

3. Final Answer:

   Alice and 30 -> Option A

4. Quick Check:

   Fixture data accessed correctly = Alice, 30 [OK]

Hint: Fixture data keys map to object properties [OK]

Common Mistakes:

• Expecting literal strings instead of values
• Confusing variable names with strings
• Assuming fixture file is missing causing error

4. What is wrong with this Cypress code snippet that tries to load a fixture?

cy.fixture('config').then((data) => {
  cy.log(data.url);
});

Assuming the fixture file is named config.json and is located in the default fixtures folder.

medium

A. There is no error; the code is correct

B. The file extension .json must be included in the fixture name

C. The fixture file must be imported before using cy.fixture()

D. The cy.log command cannot access fixture data

Solution

1. Step 1: Check if file extension is required in cy.fixture()

   Cypress automatically adds .json if omitted, so 'config' works for config.json.

2. Step 2: Verify usage of cy.log() with fixture data

   cy.log() can log any string, including values from fixture data, so this is valid.

3. Final Answer:

   There is no error; the code is correct -> Option A

4. Quick Check:

   Omitting .json is allowed = Code correct [OK]

Hint: Omit .json in fixture name; Cypress adds it automatically [OK]

Common Mistakes:

• Adding .json causes no error but is optional
• Thinking cy.log can't print fixture data
• Trying to import fixture files manually

5. You want to use fixture data to fill a login form in Cypress. The fixture user.json contains { "username": "testuser", "password": "pass123" }. Which code snippet correctly uses cy.fixture() to fill the form fields with IDs #user and #pass?

hard

A. cy.fixture('user').then((data) => { cy.get('#user').type(data.user); cy.get('#pass').type(data.pass); });

B. cy.get('#user').type(user.username); cy.get('#pass').type(user.password); cy.fixture('user');

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

D. cy.loadFixture('user').then((user) => { cy.get('#user').type(user.username); cy.get('#pass').type(user.password); });

Solution

1. Step 1: Identify correct fixture loading and data usage

   cy.fixture('user').then((user) => { cy.get('#user').type(user.username); cy.get('#pass').type(user.password); }); correctly uses cy.fixture('user').then((user) => { ... }) and accesses user.username and user.password.

2. Step 2: Check form field selectors and typing commands

   It uses cy.get('#user').type() and cy.get('#pass').type() correctly to fill inputs.

3. Final Answer:

   cy.fixture('user').then((user) => { cy.get('#user').type(user.username); cy.get('#pass').type(user.password); }); -> Option C

4. Quick Check:

   Load fixture then fill fields = cy.fixture('user').then((user) => { cy.get('#user').type(user.username); cy.get('#pass').type(user.password); }); [OK]

Hint: Load fixture first, then use data inside .then() callback [OK]

Common Mistakes:

• Using wrong property names like data.user instead of data.username
• Calling cy.fixture() after typing commands
• Using non-existent commands like cy.loadFixture()