Help files

CSS Selectors

Web Automation functionality is one of the most important and commonly used features of WinAutomation. Web-related actions will allow you to automatically click on links, fill and submit web forms, as well as scrape data from web pages. You can build Web Automation Process either by combining the appropriate Actions in the Process designer, or by recording your interaction with a web page and automatically converting it into Process actions through the Web Recorder.

While WinAutomation provides you with quite a specific visual feedback (through the Web Helper or the Extract Preview window) about the webpage elements you have selected, it can also provide you with detailed information about the values used to point to the position of these elements in the HTML page, found in the Control Repository.

CSS (standing for Cascading Style Sheets) was introduced together with HTML 4, to denote the presentation semantics (the look and formatting) of a document written in a markup language. A CSS rule (essentially the statement that tells browsers how to render particular elements on an HTML page) consists of two parts, the selector (which "selects" the elements on an HTML page that are affected by the rule set) and the declaration block (which defines the style to be applied to those elements). You will find links to several external resources focusing on CSS, at the bottom of this article.

In WinAutomation we use the CSS selectors to pinpoint the web page elements we want to interact with. The information that is generated and displayed in the CSS Selector field is based on the underlying tree structure of the HTML page.

Note that the selectors for each element can be up to three and are coma separated. If the former does not find the element, the second will be used, and so on. When the selector is not the optimal, it takes some time to search for the element on the page and return to the second one which will search for the element in the page structure again. In such cases, a more efficient selector that can be produced from the page’s html code must be inserted.

Other cases that require to manually point to an html element are specific design characteristics of the HTML page structure or subsequent -to our Process design- changes of it (although WinAutomation is adaptable to some of these variations and can still track the initially user-defined elements).

To overcome these problems, user can manually include or remove attributes for a selector, or build one from scratch that will uniquely and undoubtedly define the desired element.

Just click on the control whose selector you want to edit, click on the selector, click on "Edit", select the "Custom" option from the top left part of the Selector Builder window and build your selector in the CSS Selector field. The steps are explained in detail in the Building a WebAutomation Process topic.

Selecting controls - HTML elements with CSS Selectors, can be achieved relatively easy within WinAutomation (with add control and a LeftShit+click), but it requires a more advanced knowledge of HTML and CSS when you want to build your own selectors.

Especially for the Extract Data from Web Page action, the CSS Selector can be edited through the Advanced Settings Icon of the Web Helper window (opened by the Specify Web Data to Extract button of the action’s Property Window).

amazon extract data css edit.png

Moreover, when extracting list-type data from a web-page, the CSS Selector has the following structure:

amazon extract data css edit list.png

where the “Base CSS Selector” represents the route on the HTML tree that points to the level of elements that constitute the list, while the “CSS Selector” part points to  the specific attribute of each element (or each descendant) we want to extract.

The same logic applies also when extracting data in table format, as also explained in detailed  in the topics:

Web Data Extraction Part I

Web Data Extraction Part II

Web Data Extraction Part III)

In this case we have to specify as many CSS Selectors as the columns of the table (the categories of data we want to retrieve for each item).

amazon extract data css edit table.png

Similar to the inconsistencies that may appear when defining the desired elements through the Web Helper, we may also have to manually input the “CSS Selector for Next Page of Search Results” (used for cases of extracting records in forms other than Single Variables).

Using manually inputted CSS selectors can be a powerful alternative in pointing the desired elements for the minority of cases that web page's structure hinders WinAutomation’s ability to automatically spot and interact with them.

Using classes (.) and ids (#) in the CSS Selectors:

To View the source HTML code of a web page, press F12. There you can see how the page is structured and how each element is represented.

If the element you are trying to access contains a text i.e. it is a div and the html shows the below:

<div class="someclass" id="someid">text</div> 

Should you wish to use its id or class i.e. then you should have something like

...>...> div .someclass  or  ...>...> div[class="someclass"] if you want to use its class or,

...> ...> div #someid or  ...> ...> div[id="someid"]    if you want to use its id.Note, that the id attribute is unique in the HTML for each element, so if you know the id then you can ignore the previous route and simply go with "div#someid" !

A very useful attribute that you can use is the ":contains("sometext")". If you know that the element you are trying to access contains a specific string then you can use this attribute to access it, i.e. for the example above:

...>...> div :contains("text")

External Links and Helpful Tutorials