CODEWITHSUNDEEP
javascriptclassselectcypress
user1868774
user1868774

Reputation: 111

Cypress: Select only one type of elements but almost with the same class as the rest of the elements

Please In one container I have 3 different types of buttons. How do I select those buttons, which match the exact class? Because when I go for cy.get('.MuiButtonBase-root.MuiIconButton-root.MuiPickersDay-day'), it will select all the buttons, because the two other types contain the same class as well. Unfortunately there is no ID to better catch the element. Thank you.

<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">

Upvotes: 0

Views: 2159

Answers (2)

user14783414
user14783414

Reputation:

If I understand correctly, you want to select all buttons that are not disabled or hidden?

Take a look at jQuery :not() Selector, you can use it like this

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

Alternatively you can apply a filter function to the elements

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

Testing with

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

Upvotes: 1

Alapan Das
Alapan Das

Reputation: 18624

1.You can use the eq() command to select the first or second or third.

//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.Or, If you have unique Text for these three elements, you can use contains() as well to find the unique element and then click it -

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

For example, if they are numbers you can use:

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

3.To select all buttons in one go you can use click({multiple: true})

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

4.Or, you can use each() as well to iterate over all the elements and click all of them:

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

Upvotes: 1

Related Questions