Experimenting with Robocorp’s ChatGPT HTML Selector Guesser Assistant

Quick disclaimer - the bot we are discussing is not production-ready. However, it is meant to promote discussion and learning around the potential capabilities of generative AI models with Robocorp. We built it to promote dialogue and learning around the potential capabilities of generative AI models with Robocorp. 

We recently published a ChatGPT HTML Selector Guesser Assistant that uses OpenAI’s API to guess the XPath selectors from a web page. It uses our RPA.Assistant and RPA.OpenAI libraries to create XPath selectors for Input and Button web elements. 

XPath helps automate with precision.

XPath selectors are a way of identifying distinct elements on a webpage. It’s short for XML Path Language, a language used to navigate elements and attributes within an HTML or XML document. XPath selectors can be instrumental in web scraping, automation, and other web-centric tasks because they precisely pinpoint webpage elements, even when the page structure or layout is updated.

When web browsers are used in robotic process automation (RPA), it's best to use the precision of XPath selectors to avoid broken bots commonly caused by inferior UI-based approaches. Here are a few examples of using RPA with web browsers to automate enterprise business processes. 

• Web scraping - Extracting data from websites for research, competitive analysis, and other department-specific use cases. 
• Completing web forms - XPath selectors help locate the exact form fields that need to be filled, which cuts down on errors. 
• Processing documents - Locating specific elements in web-based documents, extracting data, and performing tasks like emailing or updating databases. 
• Working with legacy systems - Interacting with the user interface of older or homegrown systems, enabling data transfer without APIs. 

Guessing XPath selectors with a bot (Demo).

This demonstration shows several experiments run using the ChatGPT HTML Selector Guesser Assistant on Robocorp’s Portal. Please watch the video below to see the demo. 

Feel free to experiment with the bot to find selectors on your web pages. Of course, if you can identify the elements you need more precisely by following the steps below. 

Finding XPath selectors the traditional way.

Here’s how you would typically identify XPath selectors on a webpage using Google Chrome in Windows. Replace “Ctrl” with “CMD” if you’re using a Mac. We still recommend using this method since it is more reliable, but we’re comparing today’s way of doing it versus a not-so-distant future way.

• Open Chrome and find a website.
• Press F12 or right-click “Inspect” or use the shortcut key Ctrl+Shift+I.
• Click the Elements button in the upper left corner.
• After pressing the button and moving the mouse to the page, you will find that different colors appear in different locations.
• Click on the element you want to find XPath for.
• The HTML code for that element will be highlighted in the Elements tab of the Developer Tools window.
• Right-click on the highlighted code and select “Copy” > “Copy XPath” to copy the XPath of that element.

Wrap up

The ChatGPT HTML Selector Guesser Assistant is a fun way to unveil the potential of generative AI models in automation. While the bot is not yet production-ready, it highlights the importance of using precise XPath selectors for web-centric tasks such as scraping, form filling, and document processing. We look forward to hearing from you on possible other use cases.