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();

Solution 1

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)));

Solution 2

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.

Comments

[Elsid]

How do i select google after that? What is the syntax? driver.findElement(By.cssSelector("div.imageContainer > span[Google]"));

[Elsid]

Hi Alex, to mention there are multiple options, as this is a drop downlist, how do i point to Google as opposed to another option like yahoo.

[alecxe]

@Elsid okay, updated the answer, hope this is what you are trying to say.

[Elsid]

Hi Alex, I know i can use xpath easily, just trying to get it to work with css as the developers rarely make changes to it, as a more sound way of not breaking things in the future thanks.

[Elsid]

The issue is all the options are Span Google, Yahoo, they only change with <li ng-click="searchProvider(0)"> 0 is Google, 1 is Yahoo, ect.

[alecxe]

@Elsid well, there is contains(), but, from what I understand, this is not quite reliable especially if executed on multiple browsers. Give it a try: div.imageContainer > span:contains('Google').

[alecxe]

@Elsid I'd also try relying on ng-click: li[ng-click$="(0)"] > div.imageContainer > span.

[alecxe]

@Elsid okay, added to the answer.

[alecxe]

@Elsid okay, just a sanity check - can you try with li[ng-click$=(0)] > div.imageContainer > span CSS selector instead? Thanks.

[JacekM]

@Elsid What do you mean it did not work? Go to Chrome, open Dev Tools (press F12) and go to javascript console. Paste the following into console: $$("#providers-list li[ng-click='searchProvider(0)'] > .imageProvider > span") Does it return an element?

[Elsid]

hold on troubleshooting script

[Elsid]

troubleshooting one moment

[Elsid]

added more info, i think there might be an issue with the element not being visible even though I can click the main dropdown button and it activates. Check main question

[Elsid]

I originally tried with a thread.sleep to no avail, I just tried with your waiting method, still doesn't work. Throws this error: Unable to locate element: {"method":"id","selector":"custom_google_btn"}. Going to update my main question with the live website link, maybe you might be able to figure out what is going on, i'll update some more of my code also. Check main question