0

HTML screen shot

html screen shot

I am unable to interact with a shadow dom button using cypress I have tried with and without adding "includeShadowDom": true to the cypress.json.

I have tried various permutations of the code below and it continually fails to locate the element.

Just using .shadow() with the parent displays an error stating a shadow dom can't be found.

cy.get('#r-searchField').shadow().find('#text-field-container').find('#search-clear').click()
Paolo
  • 3,530
  • 7
  • 21
GingerBeered
  • 1
  • 5
  • How about you use `cy.get('#r-searchField').shadow().find('#search-clear').click({force: true})` ? – Alapan Das Sep 16 '21 at 15:46
  • Unfortunately that does not work. "Timed out retrying after 15000ms: Expected the subject to host a shadow root, but never found it." – GingerBeered Sep 16 '21 at 16:14

1 Answers1

5

You have #shadow-root (user-agent), which means the browser is creating the shadow DOM.

According to this answer How to get element in user-agent shadow root with JavaScript you cannot get to this type of shadow DOM with javascript.

You cannot access a Shadow DOM created by the browser to display a control, that is called a #shadow-root (user-agent) in the Dev Tools. <input> is one example.

You can only access open custom Shadow DOM (the ones that you create yourself), with the { mode: 'open' } option.

Try clicking the input instead

cy.get('input#r-searchField').click()
Michael Hines
  • 928
  • 1
  • 7