Why external test data improves maintainability in Cypress - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to load external test data using Cypress.

Cypress

cy.fixture('[1]').then((data) => { cy.log(data.username); });

Drag options to blanks, or click blank then click option'

AtestData.json

Bdata.js

Cconfig.yaml

Dinput.txt

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-JSON file like .txt or .yaml with cy.fixture causes errors.

Forgetting to include the file extension in the fixture name.

Using cy.fixture with a JSON file like 'testData.json' loads external test data correctly in Cypress.

2fill in blank

medium

Complete the code to use external test data for filling a login form.

Cypress

cy.fixture('users.json').then((users) => { cy.get('#username').type(users.[1]); });

Drag options to blanks, or click blank then click option'

Apassword

Busername

Cemail

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'password' or 'email' when the input expects username.

Using keys that do not exist in the fixture data.

The 'username' field from the external data is used to fill the username input.

3fill in blank

hard

Fix the error in the code to correctly assert the loaded test data.

Cypress

cy.fixture('data.json').then((data) => { expect(data.[1]).to.equal('admin'); });

Drag options to blanks, or click blank then click option'

Auser

Bpassword

Cusername

Drole

Attempts:

3 left

💡 Hint

Common Mistakes

Using keys like 'user' or 'role' that do not match the expected value.

Typos in the key name causing undefined values.

The 'username' key holds the value 'admin' in the test data, so the assertion passes.

4fill in blank

hard

Fill both blanks to create a reusable test that uses external data for login and asserts the welcome message.

Cypress

cy.fixture('[1]').then((user) => { cy.get('#username').type(user.username); cy.get('#password').type(user.[2]); cy.get('#loginBtn').click(); cy.contains('Welcome').should('be.visible'); });

Drag options to blanks, or click blank then click option'

AloginData.json

Bpassword

Cemail

DuserData.json

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect fixture file names like 'userData.json' when the file is 'loginData.json'.

Using 'email' instead of 'password' for the password input.

The fixture file 'loginData.json' contains the user data, and 'password' is the correct key for the password field.

5fill in blank

hard

Fill all three blanks to load external test data, perform login, and verify the user role on the dashboard.

Cypress

cy.fixture('[1]').then((user) => { cy.get('#username').type(user.[2]); cy.get('#password').type(user.password); cy.get('#loginBtn').click(); cy.get('.role').should('contain.text', user.[3]); });

Drag options to blanks, or click blank then click option'

Ausers.json

Busername

Crole

Dlogin.json

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong fixture file names like 'login.json'.

Using incorrect keys like 'email' or 'id' instead of 'username' or 'role'.

The fixture file 'users.json' contains user data; 'username' is used for login input, and 'role' is checked on the dashboard.

Practice

1. Why is using external test data considered better for maintainability in Cypress tests?

easy

A. It separates test logic from data, making updates easier without changing code.

B. It makes tests run faster by loading data from external files.

C. It reduces the number of test cases needed.

D. It automatically fixes broken tests when data changes.

Solution

1. Step 1: Understand separation of concerns

   External test data keeps test logic and data separate, so changing data doesn't require code edits.

2. Step 2: Recognize maintainability benefits

   This separation makes tests easier to update and maintain over time.

3. Final Answer:

   It separates test logic from data, making updates easier without changing code. -> Option A

4. Quick Check:

   Separation of logic and data = easier maintenance [OK]

Hint: Separate data from code to update tests easily [OK]

Common Mistakes:

• Thinking external data speeds up tests
• Believing external data reduces test count
• Assuming external data auto-fixes tests

2. Which of the following is the correct way to load external JSON test data in a Cypress test?

easy

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

B. import data from './data.json';

C. const data = require('./data.json');

D. fetch('./data.json').then(response => response.json());

Solution

1. Step 1: Identify Cypress method for external data

   Cypress uses cy.fixture() to load external test data files.

2. Step 2: Confirm correct usage

   The cy.fixture('data.json').then((data) => { ... }) syntax loads and uses the data asynchronously.

3. Final Answer:

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

4. Quick Check:

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

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

Common Mistakes:

• Using require() which is not recommended in Cypress tests
• Using import which may not work for JSON in Cypress
• Using fetch which is not Cypress standard for fixtures

3. Given this Cypress test snippet using external data:

cy.fixture('user.json').then((user) => {
  cy.get('#username').type(user.name);
  cy.get('#password').type(user.password);
  cy.get('#login').click();
  cy.contains(user.welcomeMessage).should('be.visible');
});

What will happen if the user.json file changes the welcomeMessage text?

medium

A. The test will automatically update the app's welcome message.

B. The test will ignore the change and always pass.

C. The test will fail if the welcome message in the app does not match the new text.

D. The test will throw a syntax error.

Solution

1. Step 1: Understand test assertion with external data

   The test checks if the app shows the welcome message from the external data file.

2. Step 2: Effect of changing external data

   If the welcomeMessage changes in user.json, the test expects the new message in the app.

3. Final Answer:

   The test will fail if the welcome message in the app does not match the new text. -> Option C

4. Quick Check:

   Changed data means test expects new message [OK]

Hint: Test expects app text to match external data exactly [OK]

Common Mistakes:

• Thinking test ignores data changes
• Believing test auto-updates app content
• Confusing syntax errors with data mismatches

4. You have this Cypress test code:

cy.fixture('data.json').then((data) => {
  cy.get('#email').type(data.email);
  cy.get('#submit').click();
  cy.contains('Thank you, ' + data.name).should('be.visible');
});

But the test fails because data.name is undefined. What is the most likely cause?

medium

A. The cy.fixture() method cannot load JSON files.

B. The data.json file does not have a name property.

C. The cy.contains() syntax is invalid.

D. The cy.get() selector is incorrect.

Solution

1. Step 1: Check the undefined property cause

   If data.name is undefined, the JSON file likely lacks the name key.

2. Step 2: Verify other code parts

   The selectors and syntax are valid; cy.fixture() loads JSON correctly in Cypress.

3. Final Answer:

   The data.json file does not have a name property. -> Option B

4. Quick Check:

   Undefined property means missing key in JSON [OK]

Hint: Check JSON keys if data properties are undefined [OK]

Common Mistakes:

• Blaming selectors for undefined data
• Assuming cy.contains() syntax error
• Thinking cy.fixture() can't load JSON

5. You want to improve maintainability by moving test data out of your Cypress test code. Which approach best supports this goal while allowing easy updates for multiple test cases?

hard

A. Write test data directly in the Cypress commands without external files.

B. Hardcode test data inside each test to keep it close to the test steps.

C. Use inline variables inside tests and update them manually when needed.

D. Store all test data in a single external JSON file and load it with cy.fixture() in tests.

Solution

1. Step 1: Identify maintainability best practice

   Keeping test data in a single external JSON file separates data from code and centralizes updates.

2. Step 2: Compare with other options

   Hardcoding or inline variables mix data with code, making updates harder and error-prone.

3. Final Answer:

   Store all test data in a single external JSON file and load it with cy.fixture() in tests. -> Option D

4. Quick Check:

   Centralized external data = easier maintenance [OK]

Hint: Centralize data in one external file for easy updates [OK]

Common Mistakes:

• Hardcoding data inside tests
• Using inline variables for all data
• Ignoring external files for test data