Search code examples
javascriptautomated-testscypressshadow-dom

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

Solution

  • 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
}