How to Find an Element by CSS Class With Xpath

How can I find an element by CSS class with XPath?

This selector should work but will be more efficient if you replace it with your suited markup:

//*[contains(@class, 'Test')]

Or, since we know the sought element is a div:

//div[contains(@class, 'Test')]

But since this will also match cases like class="Testvalue" or class="newTest", @Tomalak's version provided in the comments is better:

//div[contains(concat(' ', @class, ' '), ' Test ')]

If you wished to be really certain that it will match correctly, you could also use the normalize-space function to clean up stray whitespace characters around the class name (as mentioned by @Terry):

//div[contains(concat(' ', normalize-space(@class), ' '), ' Test ')]

Note that in all these versions, the * should best be replaced by whatever element name you actually wish to match, unless you wish to search each and every element in the document for the given condition.

Selecting a css class with xpath

I want to write the canonical answer to this question because the answer above has a problem.

Our problem

The CSS selector:

.foo

will select any element that has the class foo.

How do you do this in XPath?

Although XPath is more powerful than CSS, XPath doesn't have a native equivalent of a CSS class selector. However, there is a solution.

The right way to do it

The equivalent selector in XPath is:

//*[contains(concat(" ", normalize-space(@class), " "), " foo ")]

The function normalize-space strips leading and trailing whitespace (and also replaces sequences of whitespace characters by a single space).

(In a more general sense) this is also the equivalent of the CSS selector:

*[class~="foo"]

which will match any element whose class attribute value is a list of whitespace-separated values, one of which is exactly equal to foo.

A couple of obvious, but wrong ways to do it

The XPath selector:

//*[@class="foo"]

doesn't work! because it won't match an element that has more than one class, for example

<div class="foo bar">

It also won't match if there is any extra whitespace around the class name:

<div class="  foo ">

The 'improved' XPath selector

//*[contains(@class, "foo")]

doesn't work either! because it wrongly matches elements with the class foobar, for example

<div class="foobar">

Credit goes to this fella, who was the earliest published solution to this problem that I found on the web:
http://dubinko.info/blog/2007/10/01/simple-parsing-of-space-seprated-attributes-in-xpathxslt/

Finding a element from a website with, using classname, css-selector and xpath

You should use WebDriverWait:

for example XPath:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC


driver = webdriver.Chrome('/home/cena/Downloads/chromedriver')
url = "https://webwinkel.poiesz-supermarkten.nl/boodschappen/producten/631258"
driver.get(url)
my_el = WebDriverWait(driver, 20).until(EC.presence_of_element_located((By.XPATH, '//div[@id="products"]//*[@class="full-product full-product--price__for"]')))
print(my_el.text)

The output is:

0 99

The better way to use WebDriverWait is to use it as a var:

wait = WebDriverWait(driver, 20)
my_el = wait.until(EC.presence_of_element_located((By.XPATH, '//div[@id="products"]//*[@class="full-product full-product--price__for"]')))

As @DebanjanB has commented you might want to use visibility_of_element_located() not presence_of_element_located.

Hope this helps you!

Selenium - cannot find element via XPath, css selector, class name, tag name, id, checking for iframe, checking if element is loaded

Your element target inside a <iframe> tag, you need switch it first.

Please use .frame_to_be_available_and_switch_to_it method to handle. And for your element, you can use this xpath //span[text()="call"]

#go to contacts
driver.get('https://app.nimble.com/#app/contacts/list')
wait = WebDriverWait(driver, 20)
wait.until(EC.frame_to_be_available_and_switch_to_it((By.ID, 'reactContactListFrame')))
element = wait.until(EC.element_to_be_clickable((By.XPATH, '//span[text()="call"]')))
element.click()

Python selenium find element by xpath or css selector

Try this one, should work for you:

ele=driver.find_element_by_xpath("//*[@id='breadcrumb']//span")
ele.click()

Selenium C# Find Both Attribute And CSS Class, Using XPath or CssSelector

I prefer using CSS selectors because of the better support and speed over XPath. I've tested the below with the HTML you provided and it works.

private By PhoneError => By.CssSelector("input[ng-invalid][data-qa='homephone-update']");

XPath how to find second element with CSS class name

Just access it by index (indexing starts with 1 in XPath):

(//*[contains(@class, 't-ticket-category-select-trigger')])[2]

Or, if it is the last one:

(//*[contains(@class, 't-ticket-category-select-trigger')])[last()]

---

Related Topics