Select element by containing text without XPath in Selenium

Question

There is a great discussion on what makes a good Selenium locator here.

It seems many testers prefer CSS to XPath for locators, for various reasons. And that goes for me, too.

But, it is often very convenient to use XPath's //*[contains(.,'some text')], especially when selecting dynamic elements from a table. For example, you wish to enter a new element to a table and click a button next to it. You can make a generic locator of type "//*[contains(.,"'+new_element_name+'")]/button".

How can you do that without using XPath?

Answer 1

There is no CSS way to find an element by its text, unless you inject jQuery into the page.

Personally I do not see any issue with using XPaths to find elements containing a text. I would consider adding classes or id's to the elements you are trying to find.

For the button part, I think you are looking to find childs within a CSS query:

div:contains('new_element_name') > button

• https://css-tricks.com/child-and-sibling-selectors/

Answer 2

When there really is no better way, you can always find all elements and search for the text

driver.findElements(By.cssSelector("button")).stream()
      .filter(e -> e.getText().contains("search text"))
      .findFirst();

Answer 3

There isn't a contains() option for CSS, but you do still have:

Starts With ^=

Ends with $=

e.g.

By element = By.cssSelector("div[class^='logo-name']");

= Will match anything that starts with "logo-name".

So you can usually make use of that to still find the element (as it's likely you know the start or end and are just trying to find an element that is appending a prefix / suffix).