📘 This article provides a high-level overview of how to use CSS Selectors to define quality controls in SpeedWorkers. SpeedWorkers is part of Botify's Activation Suite, available as an option with a Botify Pro or Enterprise plan.
Overview
CSS Selectors locate the page elements styled by Cascading Style Sheets (CSS). In SpeedWorkers, you can identify specific IDs, classes, or attributes that define where to locate HTML elements or specific text in the pages in your inventory.
This is a guide to using CSS Selectors in SpeedWorkers; it is not intended to be a detailed guide to using CSS Selectors. Please refer to external sources for more in-depth information on CSS Selectors (for example, https://www.w3schools.com/cssref/css_selectors.asp).
Defining a CSS Selector
While you can copy and paste CSS Selectors from your browser, this often leads to complex CSS selectors that may change with every website release, resulting in poorly defined quality controls. The steps outlined below should provide you with what you need for SpeedWorkers quality controls.
Use your preferred method for viewing your page source (e.g., Developer > Developer Tools in Chrome).
Locate the HTML for the element or text you want to locate.
In the Selector text box on the Quality Controls > Set Goal tab, define the CSS Selector, referring to the table below.
Test the CSS selector to confirm it is returning the desired result.
Basic CSS Selector Syntax
HTML Element | CSS Selector |
Tag | tag name |
ID | #IDname |
Class | .classname |
Attribute | [attribute='attributename'] |
Example:
Consider the following HTML:
<a id="first-link" class="superlink" attribute="megaLink">Hyperlink</a>
You can use any of the following to construct a CSS selector for the example above. The ID is more precise than the class or attribute, and is therefore the preferred CSS Selector.
#first-link
.superlink
[attribute='megaLink']
See also: