Help Center

Help Center / Sitemaps / Actions


How to tell Cliperado which field to fill out or which button to hover over.

Updated over a week ago

y19krGpT.clpCliperado walks though your site as instructed by the actions. There a several different actions:

Open link
: This makes Cliperado go to a page and load all images, css etc.
Assign a value to a form field: Select a field and set the value
Submit a form: Triggers the submit action on a form
Click on: Clicks on a button, link or any other element on the page
Hover over: Hovers over any element visible on the page
Press a key: Press the enter, up or down key.
Wait: This makes Cliperado wait. You might have a load animation that you want to finish before you take the next action.
Screenshot: Take a screenshot of the current page.

Why do I have to use selectors

Why can't I just point an click you might ask.
The main reason is that an element might not always be in the same place. A sentence in an other language might be longer, moving a button down on the page. The design of you service changes constantly. Or you take screenshot of the mobile variant, changing the whole layout of the page.

What are selectors
If you've done webdesign or front-end development, you probably are familiar with CSS.  A selector starting with # like `#unique_element_22{}` allows you to select an element by its unique ID, at least the ID should be unique in the page. A selector staring with a `.` like `.highlight{}` changes the style of all elements in the page with `highlight` as a class name.

You can combine multiple class names, to be more specific about which element you want to style. Like `.header .highlight{}`

How to pinpoint one element on a page
You can pinpoint any element on the page by a unique selector. By chaining as many selectors as you need together, it will point to a unique element, even when that element on the page has no class name assigned to it.

How to find the proper selector
A complicated selector might look like this: div.w3-example:nth-child(19) > a:nth-child(3)
You can find the selector of any element on the page, by right clicking on the element and choose inspect element, from the quick menu. The Web Inspector will open. Next right click on the highlighted element and choose copy > CSS Path. The CSS selector is copied to the clipboard.

CSS Selector Best practices
Long selector, be which we mean, selectors consisting of many chained classes and sub-selectors, break easily.
It is best to;
  • Use the ID selector: #unique_button_form_signin or #remind_password_button
  • Give any element on the page, a user might interact with, a unique ID
  • Use the shortest selector possible
  • Avoid class names in the selector that are assigned to an element based on mouse interaction. Like .hover, .active etc etc
  • Avoid Pseudo-classes: Do not use :first-child, :nth-child(n) etc etc
  • Avoid CSS Combinators: Do not use: >, ~, + etc etc. They tend to break on design changes.

Action options

Wait for the new page to load option

After an action is performed, the page might reload. Cliperado needs to know this. That what the Wait for the new page the finish loading is for. When you don't select the option, Cliperado will try to perform the next action as soon as possible.

Screenshot height:

Sometimes you need some extra room at the bottom of the screenshot. Cliperado tries to take full page screenshots. Most of the time this works fine but sometimes you need to specify the exact height you need.