📘 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).
There are two methods for defining a CSS selector in SpeedWorkers:
Generate a CSS selector with Botify Assist
Use the following method to let Botify Assist suggest a CSS selector when defining a a quality control in SpeedWorkers.
When setting the quality control goal, click Generate next to the Selector field to enable Botify Assist.
Click the Select URL field to select a page from a recent crawl where Assist can search for the CSS selector.
In the text box, describe the element to target using natural language, then click Generate. Assist will return a CSS selector in the Suggested CSS Selector field within a few seconds.
Click Save Selector if you are satisfied with the recommendation.
Alternatively, revise the description in the text box, then click Regenerate.
Continue setting the quality control goal.
Defining a CSS selector on your own
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: