Defining an Array in the fixtures and utilizing it in the main test case. Cypress Fixture throws a T-CodePudding

I am trying a test case with the help of the fixtures in Cypress. I have got the userdata.json folder under the ../cypress/fixtures folder. When I try to run the test I always get this error TypeError Cannot read properties of undefined (reading 'assets') Please find the code and other details here:

The .json file looks like this:

{
 "email" : "****",
 "password" : "****",
 "title" : "dashboard",
 "number" : "12",
 "assets" : ["birthday-cake.jpg","cupcake.jpg","cake-black.jpg","building-1.jpg","building-2.jpg","cake-1.jpg","cake-2.jpg","cake-3.jpg","cake-4.jpg","car-1.jpg","car-2.jpg","car-3.png","longvideo.mp4","shortvideo.mp4","skyscrapper.jpg"]
}

My code looks like this :

/// <reference types="cypress" />

describe('Getting the names of the assets and iterating to find repeated names', ()=> {
    
    before(function() {
        cy.fixture('userdata').then(function(value){
            this.value=value
        })
    })
    it('login',function() {
        cy.visit('https://sample-staging.com/login')
        cy.url().should('include','staging')
        cy.get('input[type="email"]').type(this.value.email).should('have.value',this.value.email)
        cy.get('input[type="password"]').type(this.value.password).should('have.value',this.value.password)
        cy.get('button').contains('Login').click()
        cy.wait(5000)
        cy.url().should('include',this.value.title) 
    })
    it('Creating a new playlist', function() {
        cy.get('.text-xfm').contains('PLAYLISTS').click()
        cy.wait(5000)
        cy.get('div.text-xfs').contains('Add New').click()
        cy.get('label.text-xfx').should('contain','Playlist name is required')
        cy.get('#playlistName').type('Test-Playlist').should('have.value','Test-Playlist')
        cy.get('span.text-xfs').should('have.text','Choose assets to add to playlist').click()
        cy.wait(5000)
        cy.get('div.overflow-scroll').should('be.visible')
        cy.log(this.value.assets)
        this.value.assets.forEach(function(element)  {
            cy.selectAsset(element)
        });

        
            
    })
})

I have also created a custom command - selectAsset which is in the commands.json

I am not sure what I missed I tried all the answers that I have seen so far but always I get this error. Find the screenshot here - Test case passing Throwing error

As it can be seen all the places where I use the fixture like email, password, title are all passing except the array - assets. Help is much appreciated. Thanks in advance.

CodePudding user response：

Instead of before you have to use beforeEach because cypress clears aliases between tests. So your first it block is able to access the fixture values where as the second one isn't.

From Cypress Docs

Under the hood, aliasing basic objects and primitives utilizes Mocha's shared context object: that is, aliases are available as this.*.

Mocha automatically shares contexts for us across all applicable hooks for each test. Additionally these aliases and properties are automatically cleaned up after each test.

describe('Getting the names of the assets and iterating to find repeated names', () => {
  beforeEach(function () {
    cy.fixture('userdata').then(function (value) {
      this.value = value
    })
  })

  it('login', function () {
    cy.visit('https://manager-staging.xogo.io/login')
    cy.url().should('include', 'staging')
    cy.get('input[type="email"]')
      .type(this.value.email)
      .should('have.value', this.value.email)
    cy.get('input[type="password"]')
      .type(this.value.password)
      .should('have.value', this.value.password)
    cy.get('button').contains('Login').click()
    cy.wait(5000)
    cy.url().should('include', this.value.title)
  })

  it('Creating a new playlist', function () {
    cy.get('.text-xfm').contains('PLAYLISTS').click()
    cy.wait(5000)
    cy.get('div.text-xfs').contains('Add New').click()
    cy.get('label.text-xfx').should('contain', 'Playlist name is required')
    cy.get('#playlistName')
      .type('Test-Playlist')
      .should('have.value', 'Test-Playlist')
    cy.get('span.text-xfs')
      .should('have.text', 'Choose assets to add to playlist')
      .click()
    cy.wait(5000)
    cy.get('div.overflow-scroll').should('be.visible')
    cy.log(this.value.assets)
    this.value.assets.forEach(function (element) {
      cy.selectAsset(element)
    })
  })
})