Element Picker
Infy comes equipped with its own custom-made Element Picker ("EP" for short). The EP lets you pick an element on the page and then it generates a CSS Selector or XPath expression. You can then click the Check Button to save the Selector or XPath. Afterwards, click on the Toolbar Icon again to see the path you saved and make any adjustments if needed. Finally, click the ACCEPT Button to finalize your settings.
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.
- 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.
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. Now, when you go back to the UI, 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.
The page element is the "part" of the page you want to see. For example, on Google Search, the page element is going to be the search result items located on the middle of the page.
The goal here is to try to find the "nearest parent" of all the elements you want appended. Using the EP, you can try clicking around, and if you can click to highlight just all the elements (e.g. all the Google Search results on the page), you're done. One other strategy you can try is to just click on any of the elements (e.g. any individual Google Search result item) and then keep clicking the "Up" DOM Traversal Button in the EP's window. This will keep moving the parent up one level. Stop when you see that all the elements are highlighted.
After you've found your "nearest parent" using the EP, I recommend adding a > * (Selector) or /* (XPath) to target the children themselves, although this step isn't necessary most of the time.
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. This also usually means you'll be using the AJAX append mode.
Important: If Infy Scroll has already activated itself and appended pages, you'll want to make note of this.
Note that the Element Picker is providing the path to the element based on the visible (main) document you're interacting with. Behind the scenes, in Infy Scroll, when it's reporting whether the Next Link Path works or not in the UI Window, it's actually only checking the latest page's document that was fetched, not the visible document you're viewing.
For example, say Infy has already appended Page 2 and you then try using the EP. The EP might generate a working path for the next link using the visible document that starts with something like #infy-scroll-page-2 >, which obviously isn't going to work with the latest page's document. In most cases, with some slight editing, you should be able to make it work by just removing the "infy-scroll" specific part of the path. If not, you can try turning Infy Scroll off and reload the page so that you start with the document in an unaltered state.
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).