For locating elements by using their text contents, CSS selectors and XPath provide methods to find text within the elements. If an element contains specific text, this will return the element back to the test.

Using CSS selector Contains Pseudo-Class

CSS selectors provide the contains() pseudo-class which can be used to see if an element contains the specified text. For example, a test wants to locate the cell of a table using its contents in the following way:

WebElement cell = driver.findElement(By.cssSelector("td:contains('Item 1')"));

The contains()pseudo-class accepts the text to be searched as a parameter. It then checks all the <td> elements in DOM for the specified text.

As an alternative for contains() pseudo-class, you can use the innerText attribute (does not work with Firefox) or textContent attribute (for Firefox) in the following ways:

WebElement cell = driver.findElement(By.cssSelector("td[innerText='Item 1']"));

Or

WebElement cell = driver.findElement(By.cssSelector("td[textContent='Item 1']"));

You can also use jQuery selectors which support the contains() pseudo-class.

Using XPath text function

XPath provides the text() function which can be used to see if an element contains the specified text in the following way:

WebElement cell = driver.findElement(By.xpath("//td[contains(text(),'Item 1')]"));

Here we are using the contains function along with the text() function. The text() function returns the complete text from the element and the contains() function checks for the specific value that we have mentioned.

Finding elements using exact text value in XPath

With XPath, elements can be located by exact text value in the following way:

WebElement cell = driver.findElement(By.xpath("//td[.='Item 1']"));

This will locate the <td> element matching with exact text.

CSS selector and XPath provide methods with which to locate elements based on their text contents. This approach comes in handy when elements don't have enough attributes or when no other strategies work when attempting to locate these elements.

For locating elements using their text, both CSS selector and XPath search through the DOM for elements that have the specified text value and return the matching element(s).