赛普拉斯：获取包含给定字符串/正则表达式的所有元素

Question

我正在尝试使用 cypress 测试分页栏。

我只想在这个栏中断言包含数字的按钮数量，而忽略其他按钮（上一页，下一页...）

按钮看起来像这样：

<button class="...">33</button>

我第一次尝试这个测试：

cy.get('.pagination')
  .find('button')
  .contains(/\d+/)
  .should('have.length.gte', 2)

但这给了我一个警告，即只包含 return 一个元素，使“长度”测试无用。

我还尝试了很多基于过滤器的组合，“:contains”jquery 关键字，但 none 有效：

.filter(`:contains('/\d+\')`) 
// >> finds nothing

.filter((elt) => { return elt.contains(rx) })  
// >> throws 'elt.contains is not a function'

.filter((elt) => { return rx.test(elt.text()) }) 
// >> throws 'elt.text is not a function'

.filter(() => { return rx.test(Cypress.$(this).text()) }) 
// filter everything and return nothing, even the buttons containing the text '1'

Answer 1

nextAll() 可能适用于这种情况：

cy
  .get('.pagination')
  .find('button')
  .contains(/\d+/)
  .nextAll()
  .should('have.length.gte', 2);

另一种解决方案可能是通过其他东西来区分分页按钮，例如 class，或者它们独有的某些 html 属性。

Answer 2

您可以使用循环遍历元素并匹配元素文本，然后递增计数变量，然后验证它，例如：

var count =0
  cy.get('.pagination').find('button').each(($ele) => {
  if(/\d+/.test($ele.text()){
    count++
  }
})
expect(count).to.be.greaterThan(2)

您还可以做其他事情，例如：

断言

cy.get('.pagination').find('button').each(($ele) => {
  if(/\d+/.test($ele.text()){
    expect(+$ele.text().trim()).to.be.a('number')
  }
})

执行点击

cy.get('.pagination').find('button').each(($ele) => {
  if(/\d+/.test($ele.text()){
    cy.wrap($ele).click()
  }
})

验证内部文本

cy.get('.pagination').find('button').each(($ele) => {
  if(/\d+/.test($ele.text()){
    cy.wrap($ele).should('have.text', 'sometext')
  }
})

Answer 3

.filter() 回调有参数 (index, elt) => {} 这意味着你可以像这样使用它

cy.get('.pagination')
  .find('button')
  .filter((index, elt) => { return elt.innerText.match(/\d+/) }) 
  .should('have.length.gte', 2)

Answer 4

nextAll() 如果有元素包装按钮，则失败，但您可以计算包装器。

cy.get('.pagination')
  .find('button')     // presume this is 'Prev' button
  .parent()
  .nextAll(':not(:contains(Next))')
  .should('have.length.gte', 2)

或.nextUntil()

cy.get('.pagination')
  .find('button')     // presume this is 'Prev' button
  .parent()
  .nextUntil(':contains(Next)')
  .should('have.length.gte', 2)

或.children()

cy.get('.pagination')
  .children(':not(:contains(Prev)):not(:contains(Next))')
  .should('have.length.gte', 2)

总体而言，.filter() 更好，因为它不采用 HTML 结构。

赛普拉斯：获取包含给定字符串/正则表达式的所有元素

Cypress: Get all elements containing a given string / regex

cypress