列表末尾的 cypress .next 产生 '' 但我需要中断

Question

我正在为具有动态 group/list 项的应用程序编写 Cypress 测试。每个项目都有一个详细信息 link，单击时会创建一个包含所述详细信息的弹出窗口。我需要关闭该弹出窗口并移至组中的下一个项目。

我首先尝试在组上使用 .each() 命令，然后 .click({multiple:true}) 详细信息，但弹出窗口会覆盖下一次点击。添加 {foce:true} 确实允许显示所有弹出窗口，但我认为这不符合应用程序应如何运行的精神。

我最近的尝试是使用 .next() 创建一个自定义命令来遍历组。这行得通，但是当 .next() 到达组的末尾时，它会产生 "" ，因此测试最终失败。我得到的实际错误是： Expected to find element: ``, but never found it. Queried from element: <div.groups.ng-star-inserted>

.spec.ts

describe('Can select incentives and view details', () => {
  it('Views incentive details', () => {
    cy.optionPop('section#Incentives div.groups:first')
  })
})

index.ts

Cypress.Commands.add('optionPop', (clickable) => {
    
    cy.get(clickable).find('[ng-reflect-track="Estimator, open_selection_dial"]').click()
    cy.get('mat-dialog-container i.close').click()
    cy.get(clickable).next().as('clicked').then(($clicked) => {
        //fails at .next ^ because '' is yielded at end of list
        cy.wrap($clicked).should('not.eq','')
    })
    cy.optionPop('@clicked')
})

Answer 1

你的想法基本上是正确的，但它可能在普通 JS 函数中比在自定义命令中工作得更好。

function openPopups(clickables) {

  if (clickables.length === 0) return   // exit when array is empty

  const clickable = clickables.pop()    // extract one and reduce array

  cy.wrap(clickable)
    .find('[ng-reflect-track="Estimator, open_selection_dial"]').click()

  cy.get('mat-dialog-container i.close')
    .should('be.visible')                // in case popup is slow
    .click()

  // wait for this popup to go, then proceed to next
  cy.get('mat-dialog-container')
    .should('not.be.visible')        
    .then(() => {
      openPopups(clickables)   // clickables now has one less item
    })        
}

cy.get('section#Incentives div.groups')  // get all the popups
  .then($popups => {
    const popupsArray = Array.from($popups)  // convert jQuery result to array
    openPopups(popupsArray)
  })

一些额外的注意事项：

使用Array.from($popups)因为我们不知道list有多少，想用array.pop()抓取每一项同时减少数组（它的长度将控制循环退出）。
clickables 是原始元素的列表，因此 cy.wrap(clickable) 使单个元素可用于 Cypress 命令，如 .find()
.should('be.visible') - 在处理弹出窗口时，DOM 通常会被打开它的点击事件改变，这相对于测试运行的速度来说可能很慢.添加 .should('be.visible') 是为了确保测试在某些运行中不会不稳定（例如，如果使用 CI）
.should('not.be.visible').then(() => ... - 由于多个重叠弹出窗口存在一些问题，这将确保在测试下一个弹出窗口之前每个弹出窗口都已消失。

列表末尾的 cypress .next 产生 '' 但我需要中断

cypress .next at end of list yields '' but I need to break instead

testing

each

list

break

cypress