Best way to get element by XPath using JavaScript in Selenium WebDriver?

Finding Selenium WebDriver elements requires the use of the XPath language, which is used to navigate XML documents. It provides a flexible and efficient method to locate website items. This article focuses on discussing how to get an element by XPath using JavaScript in Selenium WebDriver.

JavaScript Method for Getting an Element by an XPath

The Javascript method document.evaluate() will be used to get an element by an XPath. The document receives an XPath expression as a parameter. Using the evaluate() method, a DOM element that matches the expression is returned.

Using XPath and the document, these procedures can be used to obtain an element.method evaluate():

1. Create a fresh JavascriptExecutor object.
2. Activate the document.use the evaluate() function of the JavaScript Executor object. As a result, an XPath-compliant DOM element will be returned.
3. A WebElement object is created from the DOM element.

Here is an example of how to get an element by XPath using JavaScript in Selenium WebDriver in Java:

// Java program to get an element by XPath 
// using JavaScript in Selenium WebDriver
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;

public class GetElementByXPathUsingJavaScript 
{
    public static void main(String[] args) 
    {
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.google.com");

        JavascriptExecutor js = (JavascriptExecutor) driver;
        WebElement element = (WebElement) js.executeScript("document.evaluate('//input[@type=\"text\"]', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue");
        WebElement searchBox = element;
        searchBox.sendKeys("Selenium WebDriver");
        searchBox.submit();
        driver.quit();
    }
}

Explanation:

• This example will grab the search box element from the Google webpage using the document.evaluate() function. //input[@type="text"] is the XPath expression used in this example.
• This expression will select the first input element on the page whose type of attribute is set to text.

Using XPath to Retrieve Multiple Elements

With the help of the document.evaluate() method, XPath may also be used to retrieve multiple elements.

• This can be done by giving the XPathResult.ORDERED_NODE_SNAPSHOT_TYPE constant as the fourth argument to the document.evaluate() method.
• The outcome is a list of all the elements that match the XPath expression.
• Then, by continually accessing the snapshot, you may get to each element.

Using XPath to retrieve an element's text

To access an element's text using XPath, utilise the textContent attribute of the DOM element. elow code can be used to get the text of the search box element on the Google homepage.

WebElement searchBox = driver.findElement(By.xpath("//input[@type=\"text\"]"));

String searchQuery = searchBox.getText();

Using XPath to Determine an Element's Attribute Value

To access the attribute value of an element using XPath, use the getAttribute() method of the DOM element. Below code may be used to get the value for the id property of the search box element on the Google homepage:

WebElement searchBox = driver.findElement(By.xpath("//input[@type=\"text\"]"));

String id = searchBox.getAttribute("id");

Conclusion

XPath is a useful tool for precisely and flexibly locating components on a webpage. Using Java's Selenium WebDriver, you can quickly include XPath expressions to interact with specific elements. Understanding the foundations of XPath and mastering Selenium WebDriver are essential for efficient web application automation.