A way to match on text using CSS locators

Question

So I use xpath locators and slowly converting to CSS.
I haven't found a way to do an exact match based on text.

For example converting //a[text()='Log Out'].

I know you can do css=a:contains('Log Out') but I want to match exactly to the text. Also I know I can do link=Log Out but looking for a solution with CSS.

Answer 1

css=a[text='Log Out'] or a[innertext='Log Out']

Can you please try this one out?

Or if that doesn't work and you still don't want to use xpath because it's slow, you can always try: link=Log Out. That's still better then xpath.

EDIT:

So i found a possible solution for you mate. If you are trying to find an exact String you could always use Regular expression like this:

css=div:contains("^ab$") 

Just replace div with a and there you go. This will find ONLY AB in whatever text div it looks for. OFC if you have more then one links with text AB (which is a bad thing :P ) then it will find them all..

Try this and see if it helps. :)

Answer 2

This is a nice place for a few CSS selectors.

http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

Thought it might be useful for people following this thread.

Answer 3

For those who are looking to do Selenium css text selections this script might be of some use

Trick is to select parent of element of one that you are looking for and then search for child that has the text.

public static IWebElement FindByText(this IWebDriver driver, string text)
{
    var list = driver.FindElement(By.CssSelector("#RiskAddressList"));
    var element = ((IJavaScriptExecutor)driver).ExecuteScript(string.Format(" var x = $(arguments[0]).find(\":contains('{0}')\"); return x;", text), list);
    return ((System.Collections.ObjectModel.ReadOnlyCollection<IWebElement>)element)[0];
}

this will return first element if there is more than one since it's always one element in my case.

Answer 4

As per the following discussions:

• CSS selector :contains doesn't work with Selenium
• css pseudo-class :contains() no longer allows anchors

The :contains pseudo-class isn't in the CSS Spec and is not supported by either Firefox or Chrome (even outside WebDriver).

---

Python based solution

To locate the element with text as Log Out you can use either of the following Locator Strategies:

• Using link_text:

  element = driver.find_element(By.LINK_TEXT, "Log Out")
  

• Using xpath:

  element = driver.find_element(By.XPATH, "//a[text()='Log Out']")
  

Ideally, to locate the element you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:

• Using LINK_TEXT:

  element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.LINK_TEXT, "Log Out")))
  

• Using XPATH:

  element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//a[text()='Log Out']")))
  

• Note : You have to add the following imports :

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

---

Java based solution

To identify the element with text as Log Out you can use either of the following Locator Strategies:

• linkText:

  WebElement element = driver.findElement(By.linkText("Log Out"));
  

• xpath:

  WebElement element = driver.findElement(By.xpath("//a[text()='Log Out']"));
  

Ideally, to identify the element you need to induce WebDriverWait for the visibilityOfElementLocated() and you can use either of the following Locator Strategies:

• linkText:

  WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.linkText("Log Out")));
  

• xpath:

  WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//a[text()='Log Out']")));
  

---

References

You can find a couple of relevant detailed discussions in:

• selenium.common.exceptions.InvalidSelectorException with “span:contains('string')”
• Finding link using text in CSS Selector is not working

Answer 5

Angular, Protractor:

If you have any class or Id it would be easy like this:

element(by.cssContainingText('.anyClass', 'Log Out'));

Answer 6

Per https://www.selenium.dev/documentation/webdriver/elements/finders/#get-element, you should get all elements that might contain your text, and then run a for loop to search for which of them match your text.

For example, in Python one could do:

elements = driver.find_elements(By.CSS_SELECTOR, '.a') # try to narrow this down more if you can
for element in elements:
    if element.text == 'Log Out':
    break