Skip to content

DevTools

sixcious edited this page Sep 3, 2024 · 8 revisions

What Is DevTools?

Your Browser comes equipped with a neat little toolkit called DevTools. For our purposes, it's a suite of tools that allows us to inspect the elements on the page and generate paths for them (Selector and XPath expressions).

Here's how to use it.

Using DevTools

  1. On the page you are viewing, right click on the element and click Inspect from the Context Menu to enter DevTools.

  2. In DevTools, under the Elements tab, Right-click the next link HTML element you found (next links are usually inside an a element) and click Copy followed by Copy selector or Copy Xpath to get the path.

A Note About Generated Paths (Selector and XPath Expressions)

When using the EP or DevTools to generate a path, you may want to alter it if it seems too verbose/specific. For example, if the path is for a Next Link but the last segment of the Selector uses nth-of-type(1-9) or nth-child(1-9) or the last segment of the XPath uses [1-9], this may fail on the next page because the link position changes on the next page. In this case, you may need to write a custom path that takes into account the element's siblings or parent/children.

Clone this wiki locally