Selenium css selector span

How can i select this span element?

But I could not find another one suitable, besides the Xpath, but that looks like this ( //*[@id=\»Navigation\»]/div[2]/div[2]/ul/li[7]/span ), and that seems a bit fragile to me? EDIT: the span has the class ‘close’. It’s part of a menu, where there are 19 span’s with the class ‘close’ so it’s not a unique selector unfortunately.

Ah, good one, it has NOT, it has only no class when clicked on it, i’ll edit the question. However, it’s a menu item, and i checked it: i’ve got 19 span (menu items) with the class ‘close’ and the clicked item has the ‘close’ class removed from it.

is it correct that the PartialLinkText does not give a result? Is the PartialLinkText not suited for this?

3 Answers 3

//*[@id=\"Navigation\"]/descendant::span[text()='Matrices'] 

Note that if you can, be specific in your XPath queries, mainly to aid readability and improve performance. that is the * in your query will query all elements in the page. I don’t know what kind of element the Navigation element is, but you should put it’s exact element type in, for instance if it’s a div, make it:

//div[@id=\"Navigation\"]/descendant::span[text()='Matrices'] 

A slight explanation for this XPath is that it will grab the Navigation element, and simply look anywhere inside it to find a span element that has the text of Matrices . Without the descendant bit in the XPath, it would only search for direct children. That means elements that a child of Navigation , nothing else — so if an element is a child of TestDiv which is a child of Navigation , descendant would catch it, without it you won’t return any results.

As for why By.PartialLinkText would not work, this would only search for anchor links. It is common, as you have seen, that anchor links have a span element inside them or sometimes it is just a span on it’s own.

By.PartialLinkText and similarly By.LinkText would not ‘see’ this element, since it’s not an anchor element.

Источник

Selenium WebDriver Java cssSelector Span

What else have you tried other than just the one line of code? I would recommend you look at some CSS references and tutorials so that you can learn other ways to create selectors so you can try varying locator methods.

4 Answers 4

Instead of trying to escape the inner double quotes, just use a single quote instead.

driver.findElement(By.cssSelector("span[data-seleniumid='Address0']")).click(); 

Your original answer was too close to a code only answer which is not allowed. In the future, please just add a few comments on what your code does differently to solve the problem so that the OP and future readers can easily see and understand the difference.

I would try a different selector like «span.ATAddressLine» . Not sure if webdriver likes your attribute «data-seleniumid» .

Have a webdriver wait condition like waiting for an element to be clickable and then use your above code.

Thanks for you help all. The element wasn’t being found because it was in an iframe popup and Selenium was searching for it in the page behind.

For anyone in the future my code is now:

WebElement iFrame= driver.findElement(By.tagName("iframe")); driver.switchTo().frame(iFrame); // Select an address driver.findElement(By.cssSelector("span[data-seleniumid=\"Address0\"]")).click(); // Switch back to the default page driver.switchTo().defaultContent(); 

Источник

How to select value in a span element with Selenium testing?

The page I am trying to test has a span element that is actually functioning as a drop down select menu. The Selenium code for «select» elements does not work and throws the following:

Exception in thread "main" org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "span" 

This is how this looks like: EDIT 1: This is my Selenium code:

 // choose number of records. try < WebDriverWait wait = new WebDriverWait(driver, /*seconds=*/10); element = wait.until(presenceOfElementLocated(By.id("countVal"))); Select select = new Select(element); select.deselectAll(); select.selectByVisibleText("100"); >catch (NoSuchElementException ex)

This is how page source code looks around this element: I can add more details if required. Thanks.

4 Answers 4

So here is what’s happening:

When you click on JavaScript’s show_countSelector() is executed and the values are appended to the table. Those «select options» are actually «table rows».

So your steps are:
1) If there are no rows with class selec_option under div with id countSelect , then you need to click on that div first.
2) After that you click on the particular row.

So I’ll try to show the Java code (however, I use Python for Selenium):

WebElement selectorElement = driver.find(By.xpath('//*[@id="countSelect"]'))); WebElement elementOfInterest; try < //trying to get the "select option" elementOfInterest = selectorElement.findElement(By.xpath('//*[contains(@class,"selec_option")]/td[@text()="50"]')) >catch (NoSuchElementException e) < //so options are not visible, meaning we need to click first selectorElement.click() //good idea would be to put "wait for element" here elementOfInterest = selectorElement.findElement(By.xpath('//*[contains(@class,"selec_option")]/td[@text()="50"]')) >//this would select the option elementOfInterest.click() 

Источник

How to select element in span dropdown menu cssSelector webdriver Java

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

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

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

2 Answers 2

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

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

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.

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 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’) .

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

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

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

Источник

selenium.common.exceptions.InvalidSelectorException with «span:contains(‘string’)»

The pseudo-class was specific to the Sizzle Selector Engine that Selenium 1.0 relied on. But, it was decided that WebDriver was not going to support the Sizzle style CSS selectors that Selenium 1.0 used.

Now, an interesting fact is the :contains pseudo-class will work for browsers that don’t natively support CSS selectors (IE7, IE8, etc) which causes inconsistencies between browsers and selectors.

Hence a better solution would have been to go with any other attribute of the tag as follows :

element = "span[attribute_name=attribute_value]" 

Alternate Solution

You can use either of the following xpaths as per the prevailing DOM Tree:

element = my_driver.find_element_by_xpath("//span[text()='Control panel']") 

element = my_driver.find_element_by_xpath("//span[contains(.,'Control panel')]") 

element = my_driver.find_element_by_xpath("//span[normalize-space()='Control panel']") 

Using jQuery

You can also use jQuery as follows:

$('span:contains("Control panel")') 

Trivia :

A valuable comment from @FlorentB.

CSS selector is not supported by the console either, but JQuery supports it. The $(‘. ‘) from the console is a shorthand for document.querySelector which is generally overridden with JQuery when the page has it.

Источник