9l. WebDriver – Locating elements: Part 3a (by cssSelector)

Hiya testers! Let us jump right into the cssSelector locating strategy.

What if we don’t have an option to locate an element using Id, class or name? Got anything up your sleeve? Well, I have one, cssSelectors. This is an advanced and effective strategy.

Prepare to be lit up

• CSS (Cascading Style Sheets). According to Wikipedia, “CSS is a style sheet language used for describing the presentation of a document written in a markup language”. It changes the appearance of the HTML elements by adding style and defines how they should be displayed on the web page.
• Selectors are patterns constructed using HTML tags, attributes and their values. These are then used to match against the required web elements.

Advantages of using cssSelector locators over XPath locators

• Faster especially in Internet Explorer
• Simpler
• More readable
• Preferred way of usage

Locating by cssSelector

There are different ways to use cssSelector locators and this depends on the available tags, attributes, keywords etc. To list them would be,

1. Using tag and Id attribute
2. Using tag and class attribute
3. Using tag and name attribute
4. Using tag and multiple attributes
5. Locating child elements
6. Matching by sub-string

In this post, we will be covering the first four methods. Time to go through these one-by-one leaving no stone unturned.

1. Using tag and Id attribute

An element’s HTML tag and its Id attribute along with its value can be used to access it with the help of cssSelector locating strategy.

There are two ways to achieve this:

Syntax: driver.findElement(By.cssSelector(“tag_name#value_of_id”));
OR
driver.findElement(By.cssSelector(“tag_name[id=’value_of_id’]”));

Explanation: Locates the element with matching CSS selector. In the first method, # symbol represents ‘id’ attribute.

Example: Let us locate the Email text box on the Gmail account sign in page.

Right click on the ‘Enter your email’ text box and select inspect element to get the corresponding HTML code. We can see that the ‘input’ tag has an ‘id’ attribute as ‘Email’.

Code:

driver.findElement(By.cssSelector("input#Email"));

(or)

driver.findElement(By.cssSelector("input[id='Email']"));

2. Using tag and class attribute

An element’s HTML tag and its class attribute along with its value can be used to access it. There are two ways to achieve this as well,

Syntax: driver.findElement(By.cssSelector(“tag_name.value_of_class”));
OR
driver.findElement(By.cssSelector(“tag_name[class=’value_of_class’]”));

Explanation: Locates the element with matching CSS selector. In the first method, ‘.’ symbol represents ‘class’ attribute.

Example: Let us locate the ‘Mobile phone’ text box on the Gmail account Sign Up page using class attribute.

Right click on the ‘Mobile phone’ text box and select inspect element to get the corresponding HTML code which is as below,

<input   tabindex="0" name="RecoveryPhoneNumber" 
id="RecoveryPhoneNumber" value="" 
class="i18n_phone_number_input-inner_input" type="tel">

We can see that the ‘input’ tag has a ‘class’ attribute as ‘i18n_phone_number_input-inner_input‘.

Code:

driver.findElement(By.cssSelector("input.i18n_phone_number_input-inner_input "));

(or)

driver.findElement(By.cssSelector("input[class='i18n_phone_number_input-inner_input']"));

3. Using tag and name attribute

An element’s HTML tag and its name attribute along with its value can be used to access it.

Syntax: driver.findElement(By.cssSelector(“tag_name[name=’value_of_name’]”));

Explanation: Locates the element with matching CSS selector.

Example: Let us locate the first name text box on the Gmail account sign up page.

Right click on the ‘first name’ text box and select inspect element to get the corresponding HTML code which is as below,

<input value="" name="FirstName" 
id="FirstName" spellcheck="false" class="   
form-error" aria-invalid="true" type="text">

We can see that the ‘input’ tag has a ‘name’ attribute as ‘FirstName’.

Code:

driver.findElement(By.cssSelector("input[name='FirstName']"));

4. Using tag and multiple attributes

An element’s HTML tag and more than one attribute along with their values can be used to access it.

Syntax: driver.findElement(By.cssSelector(“tag_name[attribute1=’value_of_attribute1’] [attribute2=’value_of_attribute2’]”));

Explanation: Locates the element with matching CSS selector. There can be any number of attributes mentioned in this fashion.

Example: Let us locate ‘Create a password’ text box on the Gmail account sign-up page using id, type and name attributes.

Right click on the ‘Create a password’ text box and select inspect element to get the corresponding HTML code which is as below,

<input name="Passwd" id="Passwd" type="password">

We can see that the ‘input’ tag has a ‘name’ and ‘id’ attributes as ‘Passwd’ and ‘type’ attribute as ‘password’.

Code:

driver.findElement(By.cssSelector("input#Passwd[name='Passwd']"));

(or)

driver.findElement(By.cssSelector("input[type='Password'][name='Passwd'"));

If id is used, then it can be represented with ‘#’ symbol and class with a ‘.’ symbol.

Feeling all messed up? Need some time to practice?

I know, you badly need a break first. Your wish is my command! Time is all yours now.

See you real soon in our next post. Have a great day!