具有CSS操作的WebDriver linkText

Question

我有一个具有以下元素的HTML：

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

我使用selenium-java 4.8.2、Chrome 112和JUnit 5.9.2，并试图通过WebDriver的linkText定位器找到这个元素。

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

但它不起作用。经过一些调查后，我发现当我将By.linkText("INDEX")替换为By.linkText("index")时，它可以工作，因此它看起来像是在元素找到之前应用了文本转换CSS样式。

另一方面，使用好的旧XPath是有效的。

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

有人对这个话题有什么想法吗？我认为在使用WebDriver使用选择器策略查找元素时，不应该应用CSS转换，但是我找不到有关这个主题的任何显式信息。

Answer 1

您所遇到的问题是由于linkText定位器区分大小写，而CSS text-transform: uppercase;应用于<a>标记内的文本。因此，当您试图使用带有小写文本的linkText定位器查找元素时，它将无法找到它。

但是，正如您已经发现的，使用XPath来使用实际文本定位元素很好，因为它不受text-transform CSS样式的影响。

至于在使用选择器策略查找元素时是否应该应用CSS转换，答案是它取决于所使用的定位器策略。一些定位器策略(如linkText和partialLinkText )依赖于元素的实际文本，而其他策略(如xpath和cssSelector )允许您以不区分大小写的方式指定文本或属性值。

在这种情况下，可以使用CSS选择器以不区分大小写的方式使用:contains()伪类定位元素。下面是一个例子：

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

这将定位包含文本“索引”的<a>标记，而不管其情况如何。

Answer 2

是的，linkText区分大小写，因此您可以看到NoSuchElementException。

有两种方法可以避免CSS伪元素-

1. 使用XPath查找元素
2. 使用Javascript (参考文章- https://www.lambdatest.com/blog/handling-pseudo-elements-in-css-with-selenium/#:~:text=How%20To%20Work%20With%20Pseudo%2DElements%20In%20Selenium%20Java%3F )

在您的例子中，如果您确信CSS转换不会改变。你可以用

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