The Dragonfly AI extension will automatically track six main element types, this 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 quick menu built in to the Extension will track six types of elements. Click here to learn about these elements - this will cover the majority of your needs when using the Extension.
The Dragonfly AI Extension 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 - this is useful if an important element is not being detected under one of the blanket options from the quick menu, or if you want to refine your analysis of elements.
The CSS selector takes the form of a text field underneath the element quick menu:
To access the HTML of a web page, click on the vertical ellipsis in the top right hand corner > more tools > developer tools
Alternatively, right-click anywhere on the page and click 'inspect'.
There are three main ways to use the CSS Selector:
1) Track or search for elements by their class: classes are used to define a specific type of element on a page.
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.
1. Right-clicking and inspecting the title of a book will open the pages code, highlighting it's specific CSS element
2. 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, meaning the title has two classes. 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 in the Dragonfly AI Extension now highlights all elements with the class 'title' - as expected all the titles of the books are now highlighted. Thus displaying their respective probabilities of perception.
Note: when inputting classes into the selector, you must always put a '.' before the class e.g. .title
2) Track or search for HTML elements by their type: for example as a header (h1, h2 etc.) or a paragraph (p).
1. Right-clicking and inspecting the title of the book will open the pages code, highlighting it's specific CSS element
2. Reading the HTML we can see that it is defined as 'h1' - a header
Inputting 'h1' into the CSS selector text field in the Dragonfly AI Extension now highlights the specific header we have chosen - the title of the book - with an 86% probability of perception as the selected metric.
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.
Note: id tags are fairly rare so it is unlikely you will come across them when using the extension, it is still important to know about them however, just in case.
1. Right-clicking and inspecting the footer of the page will open the pages code, highlighting it's specific CSS element
2. Reading the HTML we can see it says 'id="footer"
Inputting '#footer' into the CSS selector text field in the Dragonfly extension now highlights all elements with the id of 'footer'. This highlights only the footer at the bottom of the page as expected. Again, these are rare so the use cases are limited, it is likely entire webpages won't have any id tags. Some common examples however are footers and adverts.
Note: 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 three 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.
For more information contact [email protected] or any member of the Dragonfly AI team.