1

I'm using this code to locate element in order to click into it but that jss403 change everytime

cy.get('.jss403 > .MuiButtonBase-root > .MuiButton-label').click()

How can I change the location strategy, I've just started in cypress, it's my very first test.

Emna Ayadi
  • 2,430
  • 8
  • 37
  • 77

3 Answers3

1

.jss403 is generated by React each time you build. The other two classes are fixed and supplied by the Material-UI library.

Since you have a label, can you search on the text of the label?

cy.contains('.MuiButton-label', 'the-label-text')

If you can inspect the page with devtools, copy the section of HTML (use the right-click option 'Edit as HTML') and add it to your question, can then give a more precise answer.

Based on the MUI docs page here, the element you would target for the first example button which has the text "Default" is

<span class="MuiButton-label">Default</span>

I cloned the page from the CodeSandbox link they give, and added a simple click handler to the Default button

App - demo.js

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

...

export default function OutlinedButtons() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Button variant="outlined" onClick={() => { alert('clicked') }}>Default</Button>

Test

it('clicks the MUI button', () => {

  cy.visit('http://localhost:3000')  // cloned the example and running it locally

  cy.contains('.MuiButton-label', 'Default')
    .click()                         // shows "(alert) clicked" 
                                     // in Cypress runner log

})

The alert does not actually show because Cypress suppresses it, but there is an entry in the log.

Ackroydd
  • 1,482
  • 1
  • 13
  • 14
1

Please take a look at Paper-Button always as upper case

The material design spec for buttons specifies that the text should be uppercase

which means the text shown in the DOM is what you should search for

cy.contains('.MuiButton-label', 'text in same case as DOM has')  // fails if wrong case

or with a regex that has case-insensitive option

cy.contains('.MuiButton-label', /text in ANY case/i )            // succeeds for any case
0

Finally, I solved it !

using this code,

 cy.get('.MuiButtonBase-root > .MuiButton-label').eq(4).click({force: true})

I find out that I have 5 elements so using eq(x) to the initial code (by removing the variable part related to react.

Emna Ayadi
  • 2,430
  • 8
  • 37
  • 77
  • I'd suggest that searching for label text is better than using position info, should be a lot less fragile. –  Jul 02 '21 at 11:22
  • 1
    You probably don't need `.MuiButtonBase-root` either, since `.MuiButton-label` is pretty specific. –  Jul 02 '21 at 11:24
  • Thanks for the idea: I tried this one 'cy.contains('.MuiButton-label', 'the-label-text')' but it was not working :( – Emna Ayadi Jul 02 '21 at 11:24
  • 1
    So, just out of interest, what text is on the label? What does the `` show? –  Jul 02 '21 at 11:25
  • 1
    the text I'm searching but it's in lower case do you think this is the reason why it's not working ? because the text is printed upper case in the UI level – Emna Ayadi Jul 02 '21 at 11:27
  • 1
    That sounds possible. Not sure how it's upper-cased. There will be a way to check it in case-insensitive way, will post an answer. –  Jul 02 '21 at 11:29