How to Get Element by XPath Using JavaScript
- What Is a Selenium
- What Is Selenium-WebDriver
- What Is XPath in Selenium
- Get Element by XPath Using JavaScript in Selenium WebDriver
This article will discuss how to get elements by XPath using JavaScript in Selenium WebDriver.
What Is a Selenium
Selenium is an automated testing framework used to test website applications in multiple browsers like Google Chrome, Mozilla Firefox, Safari, etc.
Multiple programming languages such as JavaScript, Java, Python, and C# can create testing scripts in Selenium. If you are using tools provided by Selenium, it can be referred to as selenium testing.
Selenium is not a single tool but consist of multiple software that can be used for different types of testing, such as:
- Selenium Grid
- Selenium WebDriver
- Selenium Remote Control (RC)
- Selenium Integrated Development Environment (IDE)
What Is Selenium-WebDriver
Selenium-Webdriver is used to perform tests by executing test scripts on multiple browsers using various programming languages such as JavaScript, Java, Python, C#, etc.
Selenium-Webdriver is used to ensure that the web application works correctly on production. It can create a dummy environment for you to test the application.
The selenium web driver has four main parts.
- Browser
- Browser Drivers
- Selenium Client Library
- JSON Wire Protocol
What Is XPath in Selenium
XPath is used to traverse the XML and HTML structure of the webpage.
XPath can find an element on the webpage if it isn’t using CSS selectors such as id, class, etc. XPath can be used to find the static and dynamic elements (whose attributes may change due to certain events).
There are two XPath in Selenium.
- Absolute Path
- Relative Path
Absolute Path
You would specify the element you want to target in an absolute path, starting with the root tag, the HTML tag. Then you can move forward by targeting the child element and appending them both using a forward slash.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Absoulte Path</title>
</head>
<body>
<form id="login-form">
<input name="name" type="text" />
<input name="email" type="text" />
<input name="password" type="password" />
<button>Login</button>
</form>
</body>
</html>
Take a look at the source code above; we need to give the path to target the first input.
html/body/form/input[1]
This will first access the HTML element, the body element, and then the form before moving to the third input element inside the form.
Relative Path
A relative path differs from the absolute path in a way that it can target an HTML element directly. So in the source code above, we would write double forward slashes (indicating that it is a relative path) and then traverse on from there, similar to how you would in an absolute path.
///form/input[1]
Get Element by XPath Using JavaScript in Selenium WebDriver
The document.evaluate can get an XPath result by passing it an XPath expression.
let HeadingElements = document.evaluate(
'/html/body//p', document, null, XPathResult.ANY_TYPE, null);
let NextHeading = HeadingElements.iterateNext();
let HeadingTexts = '';
while (NextHeading) {
HeadingTexts += NextHeading.textContent + '\n';
NextHeading = NextHeading.iterateNext();
}
console.log(HeadingTexts);
The above source code will target every target paragraph element (because of the XPath provided). It will take out every paragraph’s text content, append it to a variable and log out the results.