Variable fails to update inside a loop in Cypress-CodePudding

While writing Cypress test I've encountered this issue that won't let me update the desired variable. What I'm trying to achieve is to run a loop and update the questionId variable inside the loop for some API query. The desired variable changes with each iteration, the problem is that it takes the initial value 0 but fails to update within the loop. I've read multiple articles regarding Cypress async/sync procedures but nothing seems to help.

Here's the test snippet:

it('Should pass', function () {
            cy.visit(`${Cypress.env('appUrl')}/url`)
        
            let questionId: number = 0
            for (let index = 0; index < 9; index  ) {
                cy.intercept({ method: 'GET', path: `${questionId}` }).as('questionData')
    
                    cy.log('next question id: '   questionId)
    
                    cy.intercept({ method: 'POST', path: 'answers' }).as('answers')
                    cy.contains('button', 'Submit answer').click()
    
                    cy.wait('@answers')
                        .then((xhr: any) => {
                            expect(xhr.response.statusCode).to.eq(200)
    
                            questionId = xhr.response.body.data.next_question_id
                            cy.log('new question id: '   questionId)
                            cy.contains('span', 'You are correct!').should('be.visible')
                            cy.contains('button', 'view solution').click()
                            cy.contains('button', 'continue').click()
                        })
            }
    
        })

CodePudding user response：

Cypress behaves weird with traditional for loops. Instead of using a traditional for loop, try using Cypress lodash's times function. (The link goes to an article on Lodash's times function, since Cypress._ is just a wrapper around Lodash.)

...
let questionId = 0;
Cypress._.times(9, () => {
  cy.intercept({ method: 'GET', path: `${questionId}` }).as('questionData')
    
  cy.log('next question id: '   questionId)
    
  cy.intercept({ method: 'POST', path: 'answers' }).as('answers')
  cy.contains('button', 'Submit answer').click()
    
  cy.wait('@answers')
    .then((xhr: any) => {
       expect(xhr.response.statusCode).to.eq(200)
    
        questionId = xhr.response.body.data.next_question_id
        cy.log('new question id: '   questionId)
        cy.contains('span', 'You are correct!').should('be.visible')
        cy.contains('button', 'view solution').click()
        cy.contains('button', 'continue').click()
  })
});

CodePudding user response：

The problem is that synchronous loops like

for (let index = 0; index < 9; index  ) {...}

run to completion before any Cypress commands start executing.

The same applies to Cypress._.times(9, () => {...}).

One way to handle it is with a recursive function.

This will wait for asynchronous code at each step to complete before moving on to the next (which is vital since the next step depends on the results of the previous)

const handleQuestion = (questionId, iteration=0) => {

  if (iteration === 9) return    // finished, exit

  cy.intercept({ method: 'GET', path: `${questionId}` }).as('questionData')
  // what does the intercept above do? 
  // Do you need to wait on it, and what triggers the GET?
  

  cy.log('next question id: '   questionId)
  cy.intercept({ method: 'POST', path: 'answers' }).as('answers')
  cy.contains('button', 'Submit answer').click()
    
  cy.wait('@answers').then((xhr: any) => {
    expect(xhr.response.statusCode).to.eq(200)
    const nextQuestionId = xhr.response.body.data.next_question_id
    cy.log('new question id: '   nextQuestionId)
    cy.contains('span', 'You are correct!').should('be.visible')
    cy.contains('button', 'view solution').click()
    cy.contains('button', 'continue').click()
      .then(() => {
        cy.contains('button', 'Submit answer')    // check that the submit button
          .should('be.visible')                   // is ready for the next question
          .and('be.enabled')
        handleQuestion(nextQuestionId,   iteration)  // move on to next question
      })
  })
}

handleQuestion(0)  // start with question #0

The check before next iteration may need some adjustment

cy.contains('button', 'Submit answer')    
  .should('be.visible')                   
  .and('be.enabled')

This block is intended to wait for the page to be in a ready state for the next question.

You may also check for some text that indicates the ready state like

cy.contains('Please submit your answer')