Is there a way to get element by XPath using JavaScript in Selenium WebDriver?

javascript

xpath

selenium-webdriver

dom-interaction

byAlex Kataev·Dec 7, 2024

Grab elements using XPath in JavaScript with document.evaluate.

Here’s the direct and simple code:

function getElementByXPath(xpath) {
  return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

// Usage:
var element = getElementByXPath('//div[@id="example"]');

Firstly, insert the XPath into getElementByXPath . Following that, get started with the element right away!

Practical techniques and alternatives

When dipping your toes into the world of JavaScript and Selenium WebDriver, there are various strategies and points to make DOM interaction more efficient.

Locating elements without fixed IDs

Does your app's DOM change more often than the seasons? That means element IDs are likely volatile. XPath expressions are the snow tires to handle these bumpy situations:

function getDynamicElementByXPath(xpath) {
  // DOM mutations are like unplanned plot twists in a movie
  let treasureMap = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
  let element = null;

  if (treasureMap) {
    element = treasureMap.iterateNext();
    while (element) {
      // Hi, I'm the break you didn't ask for, but might need
      break;
    }
  }

  return element;
}

This function plays well with dynamic DOM and multiple XPath-matching elements.

Capture a team of elements

You're not always looking for a lone wolf. Capture a pack of elements using an XPath expression:

function getElementsByXPath(xpath) {
  let results = [];
  let query = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

  for (let i = 0, length = query.snapshotLength; i < length; ++i) {
    results.push(query.snapshotItem(i));
  }

  return results;
}

Cast a wider net to capture more fishes ... or, um, DOM elements.

For the XPath connoisseurs

Sophisticated situations call for tricks up your sleeve. Consider XPathEvaluator, expert in curating atop-the-class XPath expressions:

function evaluateXPath(xpath) {
  let evaluator = new XPathEvaluator();
  let expression = evaluator.createExpression(xpath);
  let result = expression.evaluate(document, XPathResult.FIRST_ORDERED_NODE_TYPE, null);

  return result.singleNodeValue;
}

This one's perfect for scenarios heavy on XPath expressions.

Handling XML with swagger (and namespaces)

XML documents with namespaces can throw wrenches. Here's namespaceResolver to save the day:

function getElementByXPathWithNS(xpath, namespaceResolver) {
  return document.evaluate(xpath, document, namespaceResolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

If your XPath expression is the cool kid who doesn't care for namespace prefixes, just plug in null.

When you want to play test before you invest

Try a sample run of your XPath expression before inking it in your code. The Chrome Dev Tools is a cozy sandbox:

// Tip: Chrome Dev Tools are as forgiving as mom's spaghetti
$x("your_xpath_here");

This tests the XPath in the active document and turns over an array of matching elements. How about a little pre-execution confidence boost?

Getting hands-on and dirty with DOM and exceptions

Scooping up innerHtml and attributes

Here's how you extract full HTML content or specific attributes:

function getInnerHTMLByXPath(xpath) {
  let element = getElementByXPath(xpath);
  return element ? element.innerHTML : null;
}

When `document.evaluate` throws you a curveball

Handle exceptions like a pro when XPath hits a dead-end and serves up an invalidIteratorState:

function robustGetElementByXPath(xpath) {
  try {
    return getElementByXPath(xpath);
  } catch (error) {
    console.error('XPath error:', error); // Because shouting about the error is always helpful
    return null;
  }
}