Cannot find a button inside the shadow DOM using Cypress.io

user_16332322 0
Viewed 543

I'm trying to find and click on a button inside the shadow DOM using Cypress.io.

I've tried various class names, with combinations of get/find and the .shadow() command.

I'm getting this error in Cypress:

"Timed out retrying after 4000ms: Expected the subject to host a shadow root, but never found it."

Here is some code of the react app I'm testing (with the button id highlighted)

app code screenshot

Below is the latest Cy code I've tried.

    cy.get('*[class^="MuiInputBase-input"]').shadow()
    cy.find('div[id="search-clear"]')
      .invoke('show')
      .click()

The button I'm trying to find and click on (it becomes visible upon mouse-over).

button screenshot

Any ideas on how to target this element?

shadow-dom javascript
1 Answers

You have to chain .find(selector) after .shadow()

like:

cy.get('.MuiInputBase-input').shadow()
    .find('#search-clear')
    .invoke('show')
    .click()

example in documentation

side note:
Why are you using *[class^="MuiInputBase-input"] and div[id="search-clear"]
instead of .MuiInputBase-input and #search-clear?

user_90742720
Related