Cypress:获取包含给定字符串/正则表达式的所有元素

Question

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

我想断言仅在此栏中包含数字的按钮的数量，而忽略其他按钮(上一页，下一页…)

按钮看起来像这样:

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

我第一次尝试这个测试:

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

但是这给了我一个警告，即contains将只返回一个元素，使得"length"测试无用。

我还尝试了许多基于过滤器的组合，";Jquery关键字，但没有工作:

.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

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

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

Answer 2

nextAll()可能在这种情况下工作:

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

另一个解决方案可能是用其他东西来区分分页按钮，比如一个类，或者一些对它们唯一的html属性。

Answer 3

可以使用循环遍历元素并匹配元素文本，然后增加count变量，然后再验证它，如:

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

你也可以这样做:

1. 断言

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

2. 执行点击

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

3. 验证内部文本

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

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结构。