The website I am interacting with uses shadow DOMs. I can successfully interact with them for clicking buttons and in some cases can input text but I am currently stumped on this one.
The HTML looks like this firefox html inspector view of one shadow dom input text box
I can input in the text fields with the following but the continue button doesn't enable for me to go to the next screen and if I manually click and place a space in the first box I get an error saying that to continue to the next page I need to fill in the second and third boxes (which have text but for some reason the webpage doesn't recognize that text is present). table with shadow dom inputs
shadowDOM1 = driver_local.execute_script("return document.querySelector('WN-input').shadowRoot.querySelector('input')")
str_valToSet = "arguments[0].value = '" + partNum + "';"
driver_local.execute_script(str_valToSet, shadowDOM1)
shadowDOM2 = driver_local.execute_script("return document.querySelectorAll('WN-input')[2].shadowRoot.querySelector('input')")
str_valToSet = "arguments[0].value = '" + str(num2buy) + "';"
driver_local.execute_script(str_valToSet, shadowDOM2)
shadowDOM3 = driver_local.execute_script("return document.querySelectorAll('WN-input')[1].shadowRoot.querySelector('input')")
str_valToSet = "arguments[0].value = '" + "CUSTX" + "';"
driver_local.execute_script(str_valToSet, shadowDOM3)
I was also able to click the text box input that is in the shadow root but when i go to send keys i get an error that "element is not reachable by keyboard". There is not a temporary overlay preventing me from typing, as far as i can tell there is not a permanent overlay, and I see no evidence of any attributes that would make it invisible to selenium (org.openqa.selenium.ElementNotInteractableException: Element is not reachable by keyboard: while sending text to FirstName field in Facebook)
fields = driver.find_elements(By.XPATH, '//tbody/tr/td/WN-input')
print("fields", fields)
print("field", fields[0])
shadowEl = expand_shadow_element(driver_local, fields[0])
print("shadowEl", shadowEl)
isVisible = WebDriverWait(shadowEl[1], maxDelay).until(EC.visibility_of_element_located((By.XPATH, "//input")))
print("isVisible", isVisible)
shadowEl[1].click()
time.sleep(2)
shadowEl[1].send_keys("blahblah")
In a different location within my code I successfully interact with a similar object this this (WN-input tag name) and was able to get it to open up the "next" button by typing some garbage text in a different input field that wasn't within a shadow DOM. When I try that technique for this case it blows away my text within my shadow DOM text input fields. I am not sure why this case seems to work and the case in question doesn't.
shadowDOM1 = driver_local.execute_script("return document.querySelector('WN-add-to-cart').shadowRoot.querySelector('WN-input')")
str_valToSet = "arguments[0].value = '" + str(num2buy) + "';"
driver_local.execute_script(str_valToSet, shadowDOM1)
try:
inputBox = WebDriverWait(driver_local, maxDelay).until(EC.element_to_be_clickable((By.XPATH, "//input[@placeholder='Search']")))
#inputBox = local_driver.find_element_by_xpath("//input[@placeholder='Search']")
inputBox.click()
inputBox.send_keys("text")
time.sleep(3)
After days of failed attempts and google search after google search I am finally ready to ask for help. Any thoughts?
