CODEWITHSUNDEEP
automationcypress
Emna Ayadi
Emna Ayadi

Reputation: 2460

I can't locate element in cypress because the css selector is changing each time

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.

Upvotes: 1

Views: 1837

Answers (3)

user9622173
user9622173

Reputation:

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

Upvotes: 1

Emna Ayadi
Emna Ayadi

Reputation: 2460

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.

Upvotes: 0

Ackroydd
Ackroydd

Reputation: 1610

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

Upvotes: 1

Related Questions