How to Access Shadow DOM elements in
Cypress Automation

Cypress has provided Shadow DOM support in the 4.8.0 release version. Asking to configure the:-
1. experimentalShadowDomSupport : true (in cypress.json file)
2. import 'cypress-shadow-dom'; (in command.js file)

3. By including the addition of a new command .shadow() and an includeShadowDom option for some DOM commands.

Yet somehow, I found it difficult to fetch the Shadow Elements using .shadow() command. I followed the below-mentioned implementation installing the cypress Plug-in, where we use cy.get() command. Hope it might help you too.

Example:

Let's say am working on this Date field where we need to fetch the existing input value "date & time".

With reference to this additional Cypress Plugin: https://github.com/abramenal/cypress-shadow-dom#installation

1. Install: npm install --save-dev cypress-shadow-dom

2. Save: import 'cypress-shadow-dom'; (in command.js file)
3. Save: "experimentalShadowDomSupport": true, (in cypress.json file)

I'm trying to Get the "Date & Time" input value, so retrieving the "Value" from the shadow element.

Implementation:

I mentioned the parent element of shadow-root: cy.get('#id')

As we are aiming for the value inside the element, mentioned: .invoke('val') [ Tip: If you are retrieving text, then give as .invoke('text') ]

Cypress Script to retrieve "value" from Shadow Element:

cy.get('#booking-edit-form_due')     //targeting the parent of Shadow
  .invoke('val')                     //Invoking the value of shadow
  .then((text) => {                  //Get the date&time text from shadow element, 
                  cy.log(text)        //so storing the text in variable
                  })                //this logs the text that is inside the Shadow element 

Result will be log capturing the text value:  2020-10-23 09:00:00

Cypress Script to input "value" into Shadow Element:

If you are trying to 'input' the 'value' into the shadow field:

cy.get('#booking-edit-form_due')  
  .invoke('val','input text into shadow element')        
//invoking shadow element referring its value & the input new value

Result:  previous text "2020-10-23 09:00:00" text will be replaced by "input text into shadow element"
This can implementation be used in case of Input fields or so.

Cypress Script to verify Shadow Element using shadowFind():

If you have a child shadow element like List of items, where you want to retrieve or find, maybe you can try like:

reference: from https://adambien.blog/roller/abien/entry/accessing_shadow_dom_insides_a

I didn't get a chance to try shadowGet() or shadowFind( ) , yet I'm posting for reference. Let me know :)

cy.shadowGet('todo-list')
  .shadowFind('todo-list-item')
  .its('length')
  .should('eq', 4);

This worked for me. hope it helps in your implementations too. Thank you :)

Regards,
Sahithi Gundu
gsahithi.cse@gmail.com

Understanding How to Access Shadow DOM elements in Cypress

Sunday, September 6, 2020