CODEWITHSUNDEEP
javascriptjsoncypressfixtures
pixelhead
pixelhead

Reputation: 59

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.

Upvotes: 0

Views: 2701

Answers (3)

pixelhead
pixelhead

Reputation: 59

I found a solution via this post:

How to Use cy.fixture along with Array when multiple records in JSON fixture file

I meant this part:

cy.fixture('testdata').then(testdata  => {

            const ModuleID = testdata[0].ModuleID 
            const LoginName = testdata[0].LoginName
            const gameid = testdata[0].gameid

        cy.get('#ModuleID').type(ModuleID)
        cy.get('#LoginName').type(LoginName)
        cy.get('#gameid').type(gameid)
        cy.get('#btnSubmit').click()

This way I can read from my .json file.

I did not do the beforeEach, I can work with this inside the test case.

Thanx for everybody helping me.

Case closed with this solution.

Upvotes: -1

Aladin Spaz
Aladin Spaz

Reputation: 9798

Unless you are only ever going to write one test, do not use this context to access fixture data.

Test Isolation will clear that data to ensure one test does not pollute the scope of the next test.

If you are only going to use userData for the login test, simplify by using cy.fixture() inside that test.

it('Login Test. User1', function() {
  cy.fixture('users').then(data => {

    userData = data.find(d => d.username === 'User1')

    cy.visit('/')
    onLoginPage.usernameInput(userData.username)
    onLoginPage.passwordInput(userData.password)
    onLoginPage.buttonGo()
  })
})

Upvotes: 3

Duroth
Duroth

Reputation: 6581

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.

Upvotes: 0

Related Questions