Elements
All websites are made using a programming language called HTML. HTML provides a way to organise a pages content and give it structure in a way that a browser can understand and present to the user. Elements are contained within the HTML for a page, and represent specific parts of the page, such as images, links, and buttons.
The Desktop App tracks these elements by searching the HTML to find any which match the selection you have made in the user interface.
The following elements are automatically available to be selected via the quick menu:
CSS Selector
The automatically available elements will cover most of your needs when using the tool. However, what happens when an element is not being detected, or you want be more specific with the elements you want to track?
The CSS selector allows you to manually and dynamically track specific elements on a page. This allows you to be as specific or as general as you want in terms of what you track!
How to use the CSS Selector
First, access the HTML of a web page by clicking on the vertical ellipsis in the top right hand corner > more tools > developer tools.
Alternatively, right-click anywhere on the page and click 'inspect' or hitting 'F12' on Windows.
Tracking Specific Elements
1) Track or search for elements by their class: classes are used to define a specific type of element on a page.
Right-clicking and inspecting the title of a book will open the pages code, highlighting it's specific CSS element. Reading the HTML we can see it says 'class= title link-invert'
An element can have more than one class, each class will be separated by a space. We want to select the title of the books on the page, so we will use the '.title' class.
Inputting '.title' into the CSS selector text field now highlights a new element, and as expected all the titles of the books are now highlighted.
Note: when inputting classes into the selector, you must always put a '.' before the class e.g. .title
This will make up the majority of your usage of the CSS selector, and is vital to learn if you want to use it successfully. Any element on a page can (and most likely will) be given a class. So being able to select them, and therefore allowing you to analyse them, is invaluable.
2) Track or search for HTML elements by their type: for example as a header (h1, h2 etc.) or a paragraph (p).
Right-clicking and inspecting the title of the book will open the pages code, highlighting it's specific CSS element. Reading the HTML we can see that it is defined as 'h1' - a header.
Inputting 'h1' into the CSS selector text field now highlights the specific header we have chosen - the title of the book.
3) Track or search for elements by their id: id's are used to represent a unique HTML element - there is only one element on a page with a specific id.
Right-clicking and inspecting the footer of the page will open the pages code, highlighting it's specific CSS element. Reading the HTML we can see it says 'id="footer".
Inputting '#footer' into the CSS selector text field now highlights all elements with the id of 'footer'. This highlights only the footer at the bottom of the page as expected.
Id tags are fairly rare so it is unlikely you will come across them when using the Desktop App, it is still important to know about them however, just in case.
Moreover, similar to the classes, when entering id's into the selector, you must follow with a '#' before the id e.g #footer
This covers the main ways in which the CSS selector can be used to identify and analyse elements on a webpage. For more advanced use cases, please check out this article by Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors. Or contact a member of the Dragonfly AI team