WebDriver linkText with CSS manipulations

Question

I have an HTML with the following element:

<a href="index.html" style="text-transform: uppercase;">index</a>

I'm using selenium-java 4.8.2, Chrome 112 and JUnit 5.9.2, and trying to find this element via WebDriver's linkText locator.

public void testMethod() {
    driver.get("<myUrl>");
    driver.findElement(By.linkText("index")).click();
}

And it does not work. After some investigation I found that when I replace By.linkText("index") with By.linkText("INDEX"), it works, so it looks like the text-transform CSS styling is applied before the element is found.

On the other hand, using the good old XPath works.

driver.findElement(By.xpath("//a[text()='index']")).click();

Does anyone have an idea on this topic? I thought that CSS transformations should not be applied when finding an element using any selector strategy using WebDriver, but I could not find any explicit information regarding this topic.

Answer 1

The issue you are experiencing is due to the fact that the linkText locator is case-sensitive, and the CSS text-transform: uppercase; is applied to the text inside the <a> tag. Therefore, when you are trying to find the element using the linkText locator with a lowercase text, it is not able to find it.

However, as you have discovered, using XPath to locate the element using the actual text works fine, as it is not affected by the text-transform CSS styling.

As for whether CSS transformations should be applied when finding an element using any selector strategy, the answer is that it depends on the locator strategy being used. Some locator strategies, such as linkText and partialLinkText, rely on the actual text of the element, while others, such as xpath and cssSelector, allow you to specify the text or attribute value in a case-insensitive manner.

In your case, you can use a CSS selector to locate the element in a case-insensitive manner by using the :contains() pseudo-class. Here's an example:

driver.findElement(By.cssSelector("a:contains('index')")).click();

This will locate the <a> tag that contains the text 'index', regardless of its case.

Answer 2

Yes, linkText is case-sensitive and hence you see NoSuchElementException

There are 2 ways to avoid CSS pseudo elements -

1. Use XPath to find your elements
2. Use Javascript executor (refer article - https://www.lambdatest.com/blog/handling-pseudo-elements-in-css-with-selenium/#:~:text=How%20To%20Work%20With%20Pseudo%2DElements%20In%20Selenium%20Java%3F )

In your case, if you are confident the CSS transformation won't change. You may use

driver.findElement(By.linkText(text.toUpperCase()));