Element Picker
The Element Picker (EP) lets you pick an element on the page and then it generates a Path to it — specifically, a CSS Selector or XPath expression.
- You can zoom out via
CTRL -to make the EP Window take up a smaller space on the page and zoom back inCTRL 0orCTRL +when done. You can also use this to gauge how big an element is if it's taking up more vertical space on your screen. - Have a favorite corner for the EP Window? The EP remembers the last-used corner you moved it to so it will always launch there. It will also remember if you minimized it or not.
Click the Clipboard Button next to the Selector or XPath to copy it. You can then paste it where you need to. Note: If you want to paste the path in your browser's console so that it will execute, check the JS Path option first and then it will generate a path that should work in the console.
One of ElemPick's Special features is that it can auto-copy the path to your clipboard on each click. Click the OPTIONS > ABOUT SPECIAL Button to find out more.
While optional, to make the most out of using the EP, it's recommended to learn how to construct paths manually. This way, you can edit the generated path to something that might work better across multiple pages. View the Paths section to learn more.
The Up, Down, Right, and Left Arrow Buttons allow you to target a nearby element that you may have trouble clicking on. Take note of the elements' tag names to help you decide which element you want to target.
Finding a path for the next link might prove to be tricky. The problem is that the next link's position generally "moves" around from page to page, so your path needs to be robust enough for it to work on any possible page, not just the current page you're on.
Important: When finding the next link, you almost always want to be looking for A elements. If you click on a "link" and it isn't an A (perhaps it's an SVG or SPAN), try using the DOM Traversal Buttons to move up or down until you reach the A. If there simply isn't an A, the website may not be using links, but rather its own JavaScript code to navigate you to the next page, in which case you won't be able to generate a Next Link path. (In that case, you'll probably want to use the Click Element action instead.)
Your first strategy should be to click on what you first think is the next page's link. So, if you're on Page 1, and you click on a > Link or a Next button, look closely at the Selector or XPath. If you see nth-of-type(1-9) or nth-child(1-9) (for Selector) or [1-9] (for XPath) anywhere in the last segment of the generated path, this will probably fail eventually, because the path is trying to use the hardcoded position of the link (for the current page), and the website is likely going to be moving that around as you go from page to page. If the website is using unique class names for the next link, the generated path should hopefully be robust enough to work on future pages.
Instead of trying to generate a path for the next link directly, try generating one for the current page. So if you're on Page 1, click on the 1 in the paginated list. Now, look at the generated path for the 1. Does it point to a different tag name (anything that's not an A) or have a unique class name in its path? If so, and if it doesn't have the nth-of-type(1-9) or nth-child(1-9) (for Selector) or [1-9] (for XPath) try accepting that.
Important: Before settling on the current page path, make sure you can go to the next link via the EP's Next Element DOM Traversal Button (otherwise you may not be on the right "level" and may need to go up or down a level using the buttons).
We now have a path for the current page number. However, you'll want to modify the path as follows to point it to its sibling (the next link) like so:
- Selector: Add
+ ato the end of the path. (Or add+ * aif theamight be on a lower level in the subtree.) - XPath: Add
/following-sibling::ato the end of the path.
By using this strategy, our path is basically saying: "Choose the link that follows whatever the current page number is." Since the path for the current page number is robust, this should hopefully work well enough as we go from page to page.
If the element you want clicked is a simple "Load More" or "Show More" type button, finding a click element should be pretty straightforward by clicking on it using the Element Picker. Just be aware of the element tag name the EP shows you. You may need to click the Up or Down DOM Traversal Buttons to dig up or down a level or two. Click Elements are usually going to be button, a, div, or span elements, but they could really be anything.
If you're dealing with a series of elements in a Pagination style of "links," you'll want to employ the same strategy discussed in the Next Link section above.
Almost always, Selector and XPath expressions will display in the normal color. However, you may see them show up in the following colors:
- Red: This means the path wasn't verified to match the element or node and may not be correct
- Orange: This indicates that the path is correct, but the alternate algorithm was used to generate the path because the preferred algorithm failed to generate a working path
If you see a red or orange color, it's usually going to be when you're using XPath and when picking SVG Elements. The reason is because they belong to a different namespace URI. So, the solution is instead of writing //svg, write //*[name()='svg']. Currently, the svg, path, and use elements are handled this way internally in the Element Picker (for the Internal Algorithm; Chromium's doesn't do this), but for brevity, less common svg elements like animate or circle are not. If you need a working path for all SVG elements you can manually modify the path to add in the name() to them as described above (or just switch to using Selector as your path type).