0

I am try to automation a screen that has multiple shadow elements. For example, I have to set data for a text field called 'Student Name'. This field has to traverse through multiple shadow elements.

cy.get('app-screen)
.shadow()
.find('app-toolbar')
.shadow()
.find('student-container')
.shadow()
.find('input[id="studentName"]')
.type("Viola");

Is there an alternative where I can specify like this:

cy.get('app-screen app-toolbar student-container input[id="studentName"]').type('Viola');

I came through a solution for similar one for protractor. Is there a solution available for Cypress like adding customer locator? Protractor: Unable select input element inside a shadow DOM (Polymer) using by.deepCss('input')

Thanks

rino
  • 293
  • 1
  • 4
  • 13

1 Answers1

0

Go to cypress.json and write. This makes sure that all your get and find queries automatically go through shadow dom's without explicitly mentioning it.

includeShadowDom: true

And then in your test write:

cy.get('app-screen).find('input[id="studentName"]').type("Viola")
Alapan Das
  • 17,144
  • 3
  • 29
  • 52
  • Hi, I updated 'cypress.json' as you suggested and this works fine. But, I want the statement to be like this. cy.get('app-screen input[id="studentName"]').type("Viola"); When I execute this statement, it's saying element not found. – rino Jan 13 '22 at 16:41
  • You can try this. I am not sure if this will work. Assuming the sequence and the nested elements are correct. `cy.get('app-screen > app-toolbar > student-container > input[id="studentName"]).type('voila')` – Alapan Das Jan 13 '22 at 16:51
  • Yes, I tried this. The sequence of the nested elements are correct. I checked that using JavaScript query selector in console of the chrome browser. But, the step fails while running through cypress, stating element never found. – rino Jan 13 '22 at 17:05
  • Yes thats what I thought. Then I guess using `get` and `find` is the only way i could think of to work for this use case. – Alapan Das Jan 13 '22 at 17:10
  • Hi, is there any other option to write all nested shadow elements under 'get' and without setting 'includeShadowDom: true' in cypress.json? – rino Jan 21 '22 at 16:31