How to select element in span dropdown menu cssSelector webdriver Java

Question

I am trying to select these elements in webdriver, after I click a button which opens a drop down menu. I can click the button fine and it drops down with.

WebElement providers = driver.findElement(By.id("providers"));
      providers.click();

HTML

<input id="providers" class="providersOff" type="button">
<div id="providers-list" class="">
    <ul>
        <li ng-click="searchProvider(0)">
            <div class="imageContainer">
                <span>Google</span> <--TRYING TO SELECT THIS

I'm trying to select the Google element.

I have tried both of these and it doesn't work:

driver.findElement(By.cssSelector(".imageContainer[Google]"));
driver.findElement(By.cssSelector(".providers-list > li[ng-click*= searchProvider(0)]"));

It runs these perfectly fine:

  // Assign search-bar & send keys
      WebElement searchbar = driver.findElement(By.id("txtSearch"));
      searchbar.sendKeys("Pizza");


      // Assign provider drop-down & click
      WebElement providers = driver.findElement(By.id("providers"));
      providers.click();

Answer 1

It should be:

div.imageContainer > span

which basically means:

give me the span element which is a direct child of a div element with class="imageContainer" .

To get the actual text, use .text :

WebElement span = driver.findElement(By.cssSelector("div.imageContainer > span"));
System.out.println(span.text);

---

If you want to match the span by text , you can approach it with xpath :

WebElement google = driver.findElement(By.xpath("//div[@class='imageContainer']/span[. = 'Google']"));
google.click();

---

Or, you can also rely on ng-click attribute of the li element:

WebElement span = driver.findElement(By.cssSelector("li[ng-click$='(0)'] > div.imageContainer > span"));

where $= is an ends-with selector .

Answer 2

It may be good for you to familiarize yourself with basic CSS selectors. Try playing this game, I've learned a lot from it: https://flukeout.github.io/

Now back to your original question. Based on the part of the code you provided the shortest possible selector is simply span

driver.findElement(By.cssSelector("span")); - it says give me a html tag But I assume you have a lot of spans on your page so this selector may not be unique.

driver.findElement(By.cssSelector("#providers-list span")); - search for an element with id=providers-list and within this element search for a tag span. This probably will be enough, but in case you have many spans within this particular div you may do:

driver.findElement(By.cssSelector("#providers-list .imageContainer span")); - search for element with id=providers-list, within this element search for a descendant with class attribute containing imageContainer and then for a tag span.

You may also provide the full path to the element: driver.findElement(By.cssSelector("#providers-list > ul > li > .imageContainer > span")); - '>' says go to direct child while space means go to a descendant (no matter how deep).

EDIT

If ng-click is the only unique attribute then the code will look like this driver.findElement(By.cssSelector("#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span"));

EDIT2

You probably need to wait for element to become visible after you expand dropdown (after you do providers.click())

WebDriverWait wait = new WebDriverWait(driver, 10);
String selector = "#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span";
WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector(selector)));