问变量无法在Cypress中的循环中更新
EN

Stack Overflow用户

提问于 2022-04-25 06:25:58

回答 2查看 117关注 0票数 1

在编写Cypress测试时，我遇到了这个问题，它不允许我更新所需的变量。我试图实现的是运行一个循环并更新循环中的questionId变量，以便进行一些API查询。所需的变量在每次迭代时都会发生变化，问题是它接受初始值0，但无法在循环中更新。我读过多篇关于Cypress异步/同步过程的文章，但似乎没有任何帮助。

下面是测试片段：

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()
                        })
            }
    
        })

javascript

typescript

iteration

cypress

回答 2

Stack Overflow用户

回答已采纳

发布于 2022-04-25 15:39:44

问题是同步循环像

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

在所有Cypress命令开始执行之前运行到完成。

这同样适用于Cypress._.times(9, () => {...})。

处理它的一种方法是使用递归函数。

这将等待每一步的异步代码完成，然后再转到下一步(这是至关重要的，因为下一步取决于上一步的结果)。

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

下一次迭代之前的检查可能需要一些调整。

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

此块用于等待页面处于下一个问题的就绪状态。

您还可以检查一些文本，这些文本指示就绪状态，如

cy.contains('Please submit your answer')

票数 0

Stack Overflow用户

发布于 2022-04-25 07:53:14

Cypress的行为与传统的for循环很奇怪。不要使用传统的for循环，而是尝试使用Cypress的times函数。(该链接指向一篇关于Lodash的times函数的文章，因为Cypress._只是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()
  })
});