Cypress - Select button that contains text

user_15782119 0
Viewed 6292

I'm using material-ui as my css framework and I want to select button that contains a specific text. My current code:

cy.get('button').contains('Edit Claim').should('be.disabled');

It fails because the button component of material ui outputs the text inside a div so cypress is asserting the disabled attr to the div. I want it to assert to the button.

Edit: enter image description here

material-ui cypress reactjs button
2 Answers

I solved it using cy.contains('button', 'Edit Claim').should('be.disabled');

user_157821190

On the Material-UI demo page the label is in a child <span> (not <div>),

<button class="MuiButtonBase-root MuiButton-root MuiButton-contained Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled="">
  <span class="MuiButton-label">Disabled</span>
</button>

but there may be variations - in any case, you can reference the button by adding .parent() to the test

cy.visit('https://material-ui.com/components/buttons/');
cy.get('button')
  .contains('Disabled')      // span is the subject
  .parent()                  // move up to the button
  .should('be.disabled');
Admin1
Related