Build a Specialised Web Agent to Navigate the Workato UI Platform

In this tutorial, I’ll walk you through the entire process of building a custom Web Agent that can navigate Workato’s UI platform, automate tasks like updating recipe comments, grabbing recipe steps, and summarizing them in Google Docs, and to make all this magic happen, we’ll be using the browser-use library, but we’ll need to tweak it a bit to get it working seamlessly with Workato’s platform, ’cause the library alone just won’t cut it, so buckle up and let’s dive in!

Hover over the left navigation menu

The Agent must be able to hover over the left navigation menu without clicking. To support this function, we need to determine the necessary HTML DOM elements.

Following analysis, the required DOM element is:

<w-app-sidebar class="app-layout__sidebar ng-tns-c3330848231-1 ng-tns-c1674415986-2 ng-star-inserted">
    <!---->
</w-app-sidebar>

We need to update the buildDomTree.jsto incorporate this information accordingly.

// Base interactive elements and roles
const interactiveElements = new Set([
  'a', 'button'…