Question 252900 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to read the fixture JSON file in Cypress?

I want to read data from a JSON fixture file in Cypress in my test cases.

For whatever reason it does not work. I followed several instructions and examples and simply do not make it work. What am I doing wrong?

Here are my files and code snippets.

TEST CASE:

describe('Test for user data via JSON', ()=> {

 
    // Use the cy.fixture() method to pull data from fixture file
    before(function () {
        cy.fixture('users').then(function (userData) {
            this.userData = userData;
            })
        })

    it.only('Login Test. User1', () => {
        
        cy.wait(500)
        cy.visit('http://localhost/')

        cy.wait(500)

        onLoginPage.usernameInput(this.userData[0].username)
        onLoginPage.passwordInput(this.userData[0].password)
        onLoginPage.buttonGo()

    })
})

JSON FILE

file name: users.json

[
    {
        "id": 0,
        "username": "User1",
        "password": "password1",
        "_comment": "All rights"
    },
    {
        "id": 1,
        "username": "User2",
        "password": "password2",
        "_comment": "All rights"
    },
    {
        "id": 2,
        "username": "User3",
        "password": "password3",
        "_comment": "Reading only"
    }
]

The error message is:
"Cannot read properties of undefined (reading ‘users’)"
The error message marks the "u" oder "userData" from this:

onLoginPage.usernameInput(this.**u**serData[0].username)

The fixture folder is hierarchically here:
"../fixtures/users"

The examples that I have seen look so simple. No idea what am I missing here.

Thank you very much.

Tags:

2

Answers


  1. 0

    Try using an arrow function inside then(), as you do inside only() later on. Scoping works differently between arrow functions and ‘regular’ anonymous functions, meaning this inside that function refers to a different scope. So you’re likely setting the userData property on a different object than the one you’re accessing later on.

    Note: I’m assuming your error message refers to this.userData, not this.users, since you never actually read this property in your code.

    Login or Signup to reply.
  2. 0

    Refactor arrow functions:
    Replace the arrow functions with regular functions for the describe, before, and it blocks:

    describe('Test for user data via JSON', function() {

before(function() {
    cy.fixture('users').then(function(userData) {
        this.userData = userData;
    });
});

it.only('Login Test. User1', function() {
    cy.wait(500);
    cy.visit('http://localhost/');

    cy.wait(500);

    onLoginPage.usernameInput(this.userData[0].username);
    onLoginPage.passwordInput(this.userData[0].password);
    onLoginPage.buttonGo();
});
});

    Accessing fixtures:
    Your current code seems correct. Just ensure that the users.json file is directly inside the fixtures folder.

    Custom commands:
    Ensure that the custom commands (onLoginPage.usernameInput, etc.) are correctly defined in your commands.js file and that you’ve imported them correctly.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search