Before in a forEach loop

[Ilie-c]

Hello,

I am studying cypress atm and I had a curiosity about a test.

The scenario:

Based on the datasheet provided in the envoirment, in this case array of paths, I want to do in the same context, a suite of tests for every element of the array. Since I want a suite of tests I am in need of some before and/or beforeEatch to eliminate 'boiler' effect etc.
Code example:

let array = Cypress.env("paths")
context('Verify navbar contents on all paths of app', function() {
    array.forEach((path)=>{
        before(()=>{
            cy.visit(path)
        })
        it('check navbar contains title for '+ path, () => {
            cy.get('.container').first().contains('cypress.io').should('exist')
        })
          it('show active class for current page '+ path, () => {
              cy.get('.container').first().find('[href="'+path+'"]').parent().should('have.class','active')
          })

    })
})

The problem:

I use a before in a forEach function and since there is the async difference between js and cypress on every iteration the before will be runned for the entirety of the array:


This means every time the active class will be the last one, that is the dropdown of 'commands' resulting in mostly test fail.

I know that if put the forEach outside of context it will work somewhat as intended. The issue will be that I'll have a big number of contexts based only on this test data....

Any ideas how I can do it in the same context?

[jjhelguero]

It sounds like cypress-each would help you out here. You'll have the visit inside the it block and group all your tests together.

import 'cypress-each'

const array = [
    ['/', 'Home page'],
    ['/about', 'About Page'],
    ['/contact', 'Contact Page']
]

describe('iterate and hit each page', () => {
    it.each(array)('%s page has %s header', (page, header) => {
        cy.visit(page)
        cy.contains('h1', header).should('be.visible')
    })
})

[Ilie-c]

Thank you, gonna give it a shot tomorrow and come back with an update.

[Ilie-c]

It did helped me, thanks!
Yet I wanted to understand things a bit more and found that:
In this case it will be equally good to use array.forEatch since is only one it:

context('Verify navbar contents on all paths of app using array.foreach', ()=> {
    array.forEach((path)=>{
        it('check navbar contains title for '+path, () => {
            cy.visit(path)
            cy.get('.container').first().contains('cypress.io').should('exist')
            if(path!='/'){
                cy.get('.container').first().find('[href="'+path+'"]').parent().should('have.class','active')
            }
        })
    })
})

This library will help me in the future on other issues witch is great. Thank you

[muratkeremozcan]

100% this

Try a tutorial

https://dev.to/muratkeremozcan/crud-api-testing-a-deployed-service-with-cypress-using-cy-api-spok-cypress-data-session-cypress-each-4mlg