How to select element in span dropdown menu cssSelector webdriver Java
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 adiv
element withclass="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.
Elsid
Updated on June 04, 2022Comments
-
Elsid almost 2 years
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();
-
Elsid about 9 yearsHow do i select google after that? What is the syntax? driver.findElement(By.cssSelector("div.imageContainer > span[Google]"));
-
Elsid about 9 yearsHi 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 about 9 years@Elsid okay, updated the answer, hope this is what you are trying to say.
-
Elsid about 9 yearsHi 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 about 9 yearsThe 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 about 9 years@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 about 9 years@Elsid I'd also try relying on
ng-click
:li[ng-click$="(0)"] > div.imageContainer > span
. -
alecxe about 9 years@Elsid okay, added to the answer.
-
alecxe about 9 years@Elsid okay, just a sanity check - can you try with
li[ng-click$=(0)] > div.imageContainer > span
CSS selector instead? Thanks. -
JacekM about 9 years@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 about 9 yearshold on troubleshooting script
-
Elsid about 9 yearstroubleshooting one moment
-
Elsid about 9 yearsadded 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 about 9 yearsI 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