16 July 2024 Leave a comment QA
When working with web automation, particularly with Selenium, finding elements by their exact text can be a common requirement. While XPath offers a straightforward way to achieve this, many developers prefer CSS selectors due to their speed and simplicity. This article will guide you through various methods to locate elements by exact text using CSS selectors.
Challenges with CSS Selectors for Exact Text Matching
Unlike XPath, CSS selectors do not natively support exact text matching. While XPath allows you to use expressions like //a[text()='Log Out'], CSS selectors require a different approach. Below, we explore some effective strategies to achieve this.
Possible Solutions
Using Regular Expressions
One method to achieve exact text matching is by using regular expressions within CSS selectors. This approach allows you to precisely identify elements based on their text content:
css=div:contains("^Log Out$")Replace div with the appropriate tag, such as a for anchor tags. This method ensures that only elements with the exact text “Log Out” are matched.
JavaScript Workaround
If regular expressions are not supported in your context, another approach is to use JavaScript to locate the parent element and then search for the child element with the desired 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)element)[0];
}
This script locates elements containing the specified text by first selecting the parent and then searching for the child element.
Using Selenium’s Link Text Locator
For those using Selenium, the By.LINK_TEXT locator is a practical alternative to CSS selectors for finding elements by their exact text:
element = driver.find_element(By.LINK_TEXT, "Log Out")
This method directly locates the link with the text “Log Out” without needing complex selectors.
Python-Based Solution
In Python, you can use the find_element method with either By.LINK_TEXT or By.XPATH for exact text matching:
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
element = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.LINK_TEXT, "Log Out")))
This approach ensures that the element is visible before interacting with it, enhancing the reliability of your tests.
Java-Based Solution
Similarly, in Java, you can use the By.linkText or By.xpath locators within a WebDriverWait to locate elements by exact text:
WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.linkText("Log Out")));
This ensures that the element is present and visible, reducing the risk of test failures due to timing issues.
Conclusion
While CSS selectors do not natively support exact text matching like XPath, there are several effective workarounds. Whether using regular expressions, JavaScript, or Selenium’s link text locator, you can reliably locate elements by their exact text.
Enhance Your Testing with Repeato
For those looking to streamline their test automation processes, consider using Repeato. Repeato is a no-code test automation tool for iOS and Android that leverages computer vision and AI to create, run, and maintain automated tests efficiently. Its ease of setup and use makes it an excellent choice for quality assurance teams looking to enhance their testing capabilities.
For more information, visit our blog or check out our getting started guide.
