Not able to click on a button inside iframe using cypress

Question

Not able to click on the button inside iframe using cypress

HTML

<button class="MuiButtonBase-root MuiCardActionArea-root jss9" tabindex="0" type="button">
   <div class="MuiPaper-root MuiCard-root jss11 MuiPaper-elevation1 MuiPaper-rounded">
      <div class="MuiBox-root jss25 jss12">
         <div class="MuiCardContent-root">
            <div class="MuiBox-root jss26 jss13"><i class="icon-ehr"></i></div>
            <div class="MuiBox-root jss27">
               <h5 class="MuiTypography-root jss14 MuiTypography-h5">SOME HEADER</h5>
            </div>
            <p class="MuiTypography-root MuiTypography-body2">SOME TEXT</p>
         </div>
      </div>
   </div>
   <span class="MuiCardActionArea-focusHighlight jss10"></span><span class="MuiTouchRipple-root"></span>
</button>

code:

it('Open Product Dashboard and EHR App ', function () {
  cy.get('#dashboardMfcApp').then(($iframe) => {
    const $doc = $iframe.contents()
    cy.wrap($doc.find('button'))
      .get('.MuiButtonBase-root')
      .children()
      .within(() => {
        cy.find('.MuiButtonBase-root')
          .get('.MuiTypography-root')
          .contains('SOME HEADER')
          .click()
      })
  })
})

Error:

Timed out retrying after 4000ms: Expected to find element: MuiTypography-root, but never found it.

Answer 1

Try using xpath for the button. I had the same issue and it worked when I used the xpath in cypress.

Answer 2

Issue #2664: A closed issue on Cypress' GitHub repo where other users also run into similar issues. This comment from a user named aldocd4, claims that adding the following configuration to our cypress.json resolves the issue.

{ "modifyObstructiveCode": false }