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

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-

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

2. I tried to use Tab and s开发者_开发知识库etValue

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

3. 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

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