A quick look at Intern’s findByXpath

By on June 14, 2016 9:32 am

Intern Logo

Intern‘s Leadfoot API makes it easier to author functional tests in JavaScript. One of the fundamental concepts for authoring functional tests is to access an element within a page to test it.

While most developers are familiar with CSS selectors, this is not always the most efficient mechanism for referencing a particular element in a page.


XPath is a technology that is often overlooked by developers because of the perception that all things XML are overly complex. That said, XPath selectors can be a very powerful and flexible approach for finding an element.

Where findByLinkText only finds links, and findByCssSelector is limited to the capabilities of the CSS engine in the target browser, findByXpath can do much more.

For example, given a simple DOM structure like this:

  <dt id="hw">Hello, world</dt>
  <dd>A common greeting</dd>

It is possible to find elements in all sorts of different ways:

  • Find the dt element by its text content: findByXpath('//[.="Hello, world"]')
  • Find the parent of the element with id="hw": findByXpath('//[@id="hw"]/..')
  • Find the preceding dt element of the dd element: findByXpath('//dd/preceding-sibling::dt[1]')

These are just some very simple examples of the sorts of complex element selection you can only perform using XPath. The next time you need to find an element with no simple identifier, an XPath selector could be the solution.

Learning more

Support Logo

Get help from SitePen Support, our fast and efficient solutions to development problems of any size.

Workshops Logo

SitePen workshops are a fun, hands-on way to keep up with JavaScript best practices. Register for an online workshop, today!

Let's Talk! Logo

Let’s talk about how we can help your organization improve their approach to automated testing.

Contact Us Logo

Have a question? We’re here to help! Get in touch and let’s see how we can work together.


  • Chad

    Firstly, I love what the intern can do right out of the box. It’s been great for my side projects, and I’m starting to pull it into my day-to-day work environment as well. I have a question, however.

    Let’s say I have a unique attribute I want to add to my elements, outside of the typical id, to use for ui functional testing. Is there a way, within findByXpath, to write that out? All default xpath code from chrome and such always comes back to id, and I was curious if there was a syntax that would use my specific html attribute to make the code more readable and need less updating should the UI change over time.

  • There are a few things you can do… one is to follow the page object pattern to basically create patterns around things you do repeatedly… for example, if you need to login to an app to test each feature, you include an API to login, so if the UI changes, you just change that logic in one place. https://www.sitepen.com/blog/2014/07/11/testable-code-best-practices/ sort of alludes to that, and https://theintern.github.io/intern/#page-objects has some introductory information.

    That said, if you want to avoid the xpath pattern, look into the various findBy* methods documented at https://theintern.github.io/leadfoot/module-leadfoot_Element.html