Cypress:只选择一种类型的元素，但几乎与其他元素具有相同的类

Question

请在一个容器中，我有3种不同类型的按钮。如何选择那些与确切类别匹配的按钮？因为当我选择cy.get('.MuiButtonBaseroot.MuiIconButtonroot.MuiPickersDay'(时，它会选择所有按钮，因为其他两种类型也包含相同的类。不幸的是，没有ID可以更好地捕捉元素。非常感谢。

<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" type="button">
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" type="button">
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled MuiPickersDay-hidden" type="button">

Answer 1

1.您可以使用eq()命令来选择第一个、第二个或第三个。

//Clicks first button
cy.get('.MuiButtonBase-root.MuiIconButton-root.MuiPickersDay-day').eq(1).click() 
//Clicks second button
cy.get('.MuiButtonBase-root.MuiIconButton-root.MuiPickersDay-day').eq(2).click() 
//Clicks third button
cy.get('.MuiButtonBase-root.MuiIconButton-root.MuiPickersDay-day').eq(3).click() 

2.或者，如果你有这三个元素的唯一文本，你也可以使用contains()找到唯一元素，然后点击它-

cy.contains('some text').cilck()

例如，如果它们是可以使用的数字：

cy.contains('1').cilck()

3.要一次性选择所有按钮，可以使用click({multiple: true})

cy.get('.MuiButtonBase-root.MuiIconButton-root.MuiPickersDay-day').click({multiple: true}) 

4.或者，您也可以使用each()对所有元素进行迭代，然后单击所有元素：

cy.get('.MuiButtonBase-root.MuiIconButton-root.MuiPickersDay-day').each(($ele) => {
cy.wrap($ele).click()
})

Answer 2

如果我理解正确，你想选择所有未禁用或隐藏的按钮吗？

看看jQuery:not((Selector，你可以像这个一样使用它

cy.get('.MuiPickersDay-day:not(.MuiPickersDay-dayDisabled):not(.MuiPickersDay-hidden)')

---

或者，您可以将过滤功能应用于元素

cy.get('.MuiPickersDay-day')
.filter((index, el) => {
return !el.classList.contains('MuiPickersDay-dayDisabled') &&
!el.classList.contains('MuiPickersDay-hidden')
})

---

测试

<container>
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" type="button"></button>
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" type="button"></button>
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled MuiPickersDay-hidden" type="button"></button>
</container>
<container>
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" type="button"></button>
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" type="button"></button>
<button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled MuiPickersDay-hidden" type="button"></button>
</container>

it('finds all buttons not type disabled or hidden', () => {
cy.get('.MuiPickersDay-day:not(.MuiPickersDay-dayDisabled):not(.MuiPickersDay-hidden)')
.should('have.length', 2)                                       // passes
cy.get('.MuiPickersDay-day')
.filter((index, el) => {
return !el.classList.contains('MuiPickersDay-dayDisabled') &&
!el.classList.contains('MuiPickersDay-hidden')
})
.should('have.length', 2)                                       // passes
})