I am trying to select the drop-down value inside my shadow element using the below code, I went to the last point but the selection has not happened.

I want to select any dropdown item from the screen based on text (trip.com, priceline.com, etc), please help.

WebElement shadowRoot1 = expandRootElement(root1);
WebElement root2 = shadowRoot1.findElement(By.id("hotels-search"));
WebElement shadowRoot2 = expandRootElement(root2);
WebElement root3 = shadowRoot2.findElement(By.id("detail"));
WebElement shadowRoot3 = expandRootElement(root3);
WebElement root4 = shadowRoot3.findElement(By.id("rates"));
WebElement shadowRoot4 = expandRootElement(root4);
WebElement root5 = shadowRoot4.findElement(By.tagName("hotel-rates-sort-bar"));
WebElement shadowRoot5 = expandRootElement(root5); 
WebElement element = shadowRoot5.findElement(By.cssSelector("#__providersDropdown > div.dropdown > div"));  
Select select= new Select(element);

My elements in the below screenshot Screenshot of HTML code

  • is the webpage built using the PolymerJS framework?
    – Alok
    Commented Mar 25, 2020 at 3:50
  • Yes Alok,as per developer they are using PolymerJS
    – Sinu Reddy
    Commented Mar 25, 2020 at 4:10
  • Any suggestion how to handle this scenario?
    – Sinu Reddy
    Commented Mar 25, 2020 at 10:24
  • How to handle Shadow root this link should be helpful to you.
    – Alok
    Commented Mar 26, 2020 at 6:17
  • Thanks Alok,i am able to handle all other functions,except the drop down i tried same way which provided in docs,is there any specific tutorial or doc related to shadow elements for all functions?
    – Sinu Reddy
    Commented Mar 26, 2020 at 6:24


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.