CODEWITHSUNDEEP
javascriptautomated-testscypressshadow-dom
Dhamo
Dhamo

Reputation: 1251

How to check nested shadow elements using cypress.io

How to locate the search box which is located inside the nested shadow DOMs?

enter image description here

So far, I have tried few different approaches to locate and below is one of them but it didn't work:

Locators:

//Shadow roots
const SDW_MAINAPP_G1 = "main-app"
const SDW_VOYAGETOPBAR_G2A = "voyage-topbar"
const SDW_VOYAGEPANEL_G2B = "voyage-float-panel"
const SDW_VESSELLIST_G3B = "voyage-vessel-list"
const SDW_VOYAGEFILTER_G4B1 = "voyage-filter"
const SDW_LISTSORT_G4B2 = "voyage-vessel-list-sort"

//Left Panel - Search Box
const INP_SEARCH_VESSEL = "#filter"

Actual code:

class SearchComponents {
    static validateSearchBar() {
         cy.get(SDW_MAINAPP_G1)
        .shadow()
        .find(SDW_VOYAGEPANEL_G2B)
        .find(SDW_VESSELLIST_G3B)
        .find(SDW_VOYAGEFILTER_G4B1)
        .find(INP_SEARCH_VESSEL)
        .should('be.visible')
        .should('be.enabled')
    }
   //...
   }

Error in Test Runner: enter image description here

Upvotes: 2

Views: 2157

Answers (3)

Aladin Spaz
Aladin Spaz

Reputation: 9818

In Cypress v13 there are four options for handling nested shadow DOM

  • Globally as mentioned above, but in cypress.config.js see Global Options

  • In the context or test level

    decribe('my context', {includeShadowDom:true}, () => {
  test('my test', {includeShadowDom:true}, () => {

  • Inline, in the command sequence

    cy.get(SDW_MAINAPP_G1).shadow()
  .find(SDW_VOYAGEPANEL_G2B).shadow()

  • Inline in the command options

    cy.get(SDW_MAINAPP_G1, {includeShadowDom:true})
  .find(SDW_VOYAGEPANEL_G2B, {includeShadowDom:true})

Upvotes: 1

Gabriel Ferraz
Gabriel Ferraz

Reputation: 632

For nested shadow dom elements you need to first get the shadow element then call the find method on it:

 cy.get('parent')
     .shadow()
     .find('child')
     .shadow()
     .find('grandchild')
     .should('exist');

Upvotes: 0

user15544695
user15544695

Reputation:

The nested shadow-root's make it difficult to pinpoint where the .shadow() command should be added, but you can enable shadow DOM searches globally in config (cypress.json)

includeShadowDom

Whether to traverse shadow DOM boundaries and include elements within the shadow DOM in the results of query commands (e.g. cy.get())

cypress.json

{
  ...
  includeShadowDom: true
}

Upvotes: 6

Related Questions