Launch webpage and click

Launches a webpage, waits for it to be loaded, then clicks a specific button

What you need
Language
All languages
Works with macOS only
instructions

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
  • Add the URL of the desired webpage by substituting the text in the 1st step
  • Add the selector for the desired item by substituting the text in the 3rd step

Tap the motherfucker! 🔫