Cant find placeholder element using Selenium Python

Question

I've trying to find the element 'Search' in the code above, but everytime I receive Unable to locate element. I already tried with xpath and css

<div class="wrapper-customer-search">
    <search-customers class="hydrated">
        #shadow-root (open)
            <input type="text" placeholder="Search">
    </search-customers>

Answer 1

The <input> element with placeholder value as Search is within #shadow-root (open).

---

Solution

To locate the element you have to use shadowRoot.querySelector() and you can use the following solution:

• Code Block:

  time.sleep(3)
  element = driver.execute_script("""return document.querySelector('search-customers').shadowRoot.querySelector("input[placeholder='Search']")""")
  

---

Reference

You can find a couple of relevant detailed discussions in:

• How to handle the popup "Accepting all cookies" when the element is data-testid - Using Selenium in Python

Answer 2

you can try using io.github.sukgu that helps you to work on the shadow elements. I was able to automate the scenario that you mentioned. Below is the detailed code.

Step 1 add the below dependency

<!-- https://mvnrepository.com/artifact/io.github.sukgu/automation -->
<dependency>
    <groupId>io.github.sukgu</groupId>
    <artifactId>automation</artifactId>
    <version>0.1.3</version>
</dependency>

Step 2 use the below import in the test file

import io.github.sukgu.*;

Step 3 Below is the entire code that worked for me

        WebDriver driver = new ChromeDriver();
        driver.get("<your_webpage>");
        

        Shadow shadow = new Shadow(driver);
        WebElement searchField = shadow.findElement("input[placeholder='Search']");