Click webpage item

Clicks a button on a specific webpage

What you need
All languages
Works with macOS only

On your browser

  • Go to the desired webpage
  • Right-click on the chosen button (for this tutorial we’ll try and click on the “Show notifications” popup in Trello)
  • Select “Inspect”
  • In the code-ridden view you are presented with, you’ll see the chosen item highlighted 

  • Now we need to find its selector, which is the ID or a class which is unique to the item.

To do so, there is a couple things we need to know and keep in mind, since each webpage (mostl webapps) use different techniques to build up the page, so the right selector will vary depending on the specific case.

In summary, these are the basics:

  • the item must be clickable, so point to an anchor (a), button, input or more rarely a div (in our case, you can see that when right-clicked on“Inspect”, a “span” item was selected. But if we look closely, it’s contained by an “a”(anchor) item, which is the one we want to click instead)
  • if you intend to share this, avoid labels as they might change by idiom

Now we can try to find a unique selector, which in this case it’s surely the `js-open-header-notifications-menu`, as `js` is probably for “javascript” and the rest seems like the name of our desired action.

So, since it’s one of the element’s classes (you can notice there’s more than one as they are separated by a space) we need to add a dot before the name of the class

Here all specific cases:

  • if the selector is an ID, use “#” (#myID)
  • if the selector is a class, use “.” 
  • if the selector is another attribute, specify name of attribute and value between square brackets ([data-attribute=’myValue’])

That’s it! 😎

On Quadro

  • Edit the action
  • Substitute the text in the first action with your selector

Tap the motherfucker! 🔫