Cascading Style Sheets (CSS) selectors identify Web elements on a website page and are needed for configuring some of Probely’s features, such as authentication with a login form and two-factor authentication (2FA).
Obtaining a CSS selector for a Web element involves three steps:
Open the browser Developer Tools to inspect Web elements on the page.
Select the Web Element with its HTML attributes.
Obtain and test the CSS Selector for the Web element.
This article describes these steps in detail.
Step 1: Open the Browser Developer Tools
The browser Developer Tools allows inspecting Web elements on a page and obtaining the CSS selector.
Open the Developer Tools as follows:
Open the website page in a browser.
For example, https://probely.com/ in Google Chrome.Right-click on the page and select Inspect in the pop-up menu.
It will open the Developer Tools panel.
Step 2: Select the Web Element
Select the desired Web element on the page using the Developer Tools panel as follows:
Click on the first button to select an element to inspect on the page.
Hover the mouse over the desired Web element and click on it.
The HTML of the Web element is selected on the Developer Tools panel.
With practice, a Web element can be selected in a single step. Just right-click on the desired Web element on the page and select Inspect, and it is immediately selected in the Developer Tools panel.
Step 3: Obtain and Test the CSS Selector
After selecting the Web element, there’s a quick way to obtain the CSS selector:
In the Developer Tools panel, right-click on the line of the Web element.
In the pop-up, click on Copy and then Copy selector.
The CSS selector is copied to the clipboard.
The next step is testing whether the CSS selector works:
Go to the Developer Tools Console
Type the
document.querySelectorAll("")JavaScript function to check how many Web elements are returned. Then, paste the copied CSS selector inside the quotation marks and hit ENTER to execute it.For example:
If it returns one single Web element, the CCS selector works.
If the copied CSS selector returns more than one result, we have to refine the selector manually from the attributes found in the HTML of the Web element.
Some examples:
Identifier
If the HTML of the Web element has anidattribute, set the CSS selector with the value of the attribute as#<Id value>
For example,#form-free-trial-email
Name
If the HTML of the Web element has anameattribute, set the CSS selector with the value of the attribute as[name='<name value>']
For example,[name='email']
CSS Class
If the HTML of the Web element has aclassattribute, set the CSS selector with the value of the attribute as.<class value>
For example,.form-control
Combination of Type and CSS Class
Set the CSS selector with the type (HTML tag) and the value of theclassattribute as<HTML tag>.<CSS class value>
For example,input.form-control
Combination of Type and Name
Use the type (HTML tag) and the value of thenameattribute in the CSS Selector as<HTML tag>[name='<name value>']
For example,input[name='email']
Sometimes, we may need to resort to the structure of the Web elements on the page to be able to obtain the CSS selector for the Web element.
For example:
Combination with the Ascendant
Add one or more ascendant Web elements to the CSS selector to narrow the context of the desired Web element.
For example,form[name='form-free-trial'] input[name='email']
Follow the Page Structure
Follow the structure of Web elements on the page to reach the desired Web element.
For example,body > div:nth-child(9) > div > div > div:nth-child(2) > form > fieldset > div:nth-child(5) > input[name='email']
Note that a CSS Selector can become complex, but it must be strong enough to uniquely identify the desired Web element among all the Web elements on the page.
This article introduces and explores some ground rules for obtaining a CSS selector. This subject is broader and widely explored on the Web, where one can search for more information and examples to obtain CSS selectors for their specific cases.