0

Webdriver.io: Input text/value on shadow element not working in web application using chrome browser

I am using webdriver io for automating web application. Please refer below screenshot which is opened after click action. And I have to enter value in the textbox which is inside of nested shadow elements-

enter image description here

Solution Tried-

  1. I tried to input text using shadow element

    status=await driver.execute("document.querySelector('csv-header-desktop').shadowRoot.querySelector('csv-header-store-search').shadowRoot.querySelector('csv-header-modal').shadowRoot.querySelector('input').setValue('12345')");

Solution first not worked

  1. I tried to use Tab and setValue

    browser.setValue('input', ['Tab']) browser.setValue('input', '12345')

  2. Directly providing XPATH of that element is not working

Solution #2 also not worked

This is blocker for me now, Can someone please help me how to input text on shadow element. Thanks in advance

simond
  • 684
  • 1
  • 10
  • 36

1 Answers1

-1

Try the below. document.querySelector('cvs-header-desktop').shadowRoot.querySelector("cvs-header-store-search").shadowRoot.querySelector("cvs-header-modal").querySelector("input")

enter image description here

supputuri
  • 13,644
  • 2
  • 21
  • 39
  • You can find more details on how to work with ShadowDom - https://stackoverflow.com/questions/56380091/how-to-interact-with-the-elements-within-shadow-root-open-while-clearing-brow/56381495#56381495 – supputuri Dec 07 '22 at 05:07
  • How to setValue with this on the search input value? – simond Dec 07 '22 at 06:40
  • will this work ? - status=await driver.execute("document.querySelector('cvs-header-desktop').shadowRoot.querySelector("cvs-header-store-search").shadowRoot.querySelector("cvs-header-modal").querySelector("input").setValue('12345')"); – simond Dec 07 '22 at 06:42
  • setValue is not a function error with above code – simond Dec 08 '22 at 02:38
  • For this code - document.querySelector('cvs-header-desktop').shadowRoot.querySelector("cvs-header-store-search").shadowRoot.querySelector("cvs-header-modal").querySelector("input") ....I am getting DevToolError...Element with Selector not found – simond Dec 08 '22 at 03:03
  • It is returning element in console but when I am executing code in webdriver io its saying element not found with this selector @supputuri – simond Dec 08 '22 at 03:20