0

I am trying to click the search bar either on the sidebar <im-sidebar class="hydrated"> or top menu <nav_class = "top-menu">. This is the code

enter image description here

So I tried: cy.get('.moduleSearchbar').click() But Cypress does not find it.

I also used the Cypress recorder, but using this plugin, it records the same code cy.get('.dx-viewport > app-root > .ng-star-inserted > .hydrated').click() several times, regardless of where I click. It seems the sidebar and top menu are hiding the buttons and Cypress just see the same element all over the page. I really appreciate any suggestion.

Improve this question

1 Answer 1

Reset to default
1

Take note that the .moduleSearchbar element is inside a shadow-root. This means that these elements are part of a "Shadow DOM" (see the W3C note about Shadow DOM and the top answer in this StackOverflow question for more about this).

According to the Cypress documentation, you cannot "just" click (or generally interact with) an element in a shadow DOM. You'll need to use the .shadow() command to get "inside" the shadow DOM. In your case, you would probably need to write something like this:

cy
.get('im-sidebar')
.shadow()
.find('.moduleSearchbar')
.click()
Improve this answer
3
  • tks for your tip. I used cy.get('im-root.hydrated').shadow().find('div #container').click() . Now at least cypress is finding the Shadow Dom, but it can not finding yet any element inside it.
    – Ingridd Brito
    Feb 22, 2021 at 10:03
  • @IngriddBrito most of the stuff inside the im-root, and notably the searchbar, also are in their own shadow DOMs. You'll probably need to chain multiple .shadow() calls at some point. A good way to check if .shadow() works as expected is to see if it can find the div#root, div#main, or the im-sidebar that are immediately in the first shadow DOM.
    – Cycy
    Feb 22, 2021 at 10:25
  • 1
    My previous comment was almost correct. Before, it was .find('div #container'). Cypress didn't find it because there was a space before #. I fixed it to ('div#container'), and it is working now. Tks!
    – Ingridd Brito
    Feb 22, 2021 at 10:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.