T E S B O

Tesbo

Are you new to CSS Selector?  This article will help you to understand in depth! Perhaps the biggest key to start with automation testing is understanding about the locators and CSS selectors are one of them.

What is CSS?

CSS stands for Cascading Style Sheets. Your CSS files are where you can place the rules that will dictate the look and feel of your application.

What is a CSS Selector?

As we know every modern web page is build of CSS, they define the cosmetic behavior (like size, fonts, inclination, etc.) of the whole page and/or objects in the page. The CSS rules do the grouping by class names of objects to define the combined cosmetic behavior of those objects. Similarly, we can use Object’s id property to define the individual object’s look and feel. We can also use CSS properties to identify objects.

This CSS Selector is the combination of an element and a selector value, which identifies the web element within a web page. The composite of an element and selector value is known as the Selector Pattern. This selector pattern is constructed using HTML tags, attributes, and their values.

Using CSS selectors to locate elements has some benefits:

  • It is faster
  • More readable
  • And used more often

Now let’s take a look at a few basic commands which help in locating the elements.

Locating by CSS Selector – Tag and ID

Open Browser and navigate to Gmail application. Open Developer tools and inspect the Enter your email input box. Take a note of its Tag and ID.

HTML Code

<label class=”hidden-label” for=”Email”> Enter your email</label>
<input id=”Email” type=”email” autofocus=”” placeholder=”Enter your email” name=”Email” spellcheck=”false” value=””>
<input id=”Passwd-hidden” class=”hidden” type=”password” spellcheck=”false”>
</div>```

Selenium Code

public class Locators { 
       public static void main (String [] args){ 
       WebDriver driver = new FirefoxDriver(); 
       driver.get("https://www.gmail.com"); 
       // Here Tag = input and Id = Email 
       driver.findElement(By.cssSelector("input#Email")).sendKeys("Software Testing Material"); 
       } 
}

Locating by CSS Selector – Tag and Class

If multiple elements have the same HTML tag and class, then the first one will be recognized.
Open Mozilla Firefox and navigate to Facebookapplication. Open Developer tools and inspect the Email input box. Take a note of its Tag and Class.

HTML code

<input id=”email“ class=”inputtext“ type=”email“ tabindex=”1“ value=”” name=”email“>
</td>

Selenium code

public class Locators { 
       public static void main (String [] args){ 
       WebDriver driver = new FirefoxDriver(); 
       driver.get("https://www.facebook.com/"); 
       // Here Tag = input and Class = email 
       driver.findElement(By.cssSelector("input.inputtext")).sendKeys("Software Testing Material"); 
       } 
}

Locating by CSS Selector – Tag and Attribute

If multiple elements have the same HTML tag and attribute, then the first one will be recognized. It acts in the same way of locating elements using CSS selectors with the same tag and class.

HTML Code

<div> 
<label class=”hidden-label“ for=”Email“> Enter your email</label>
<input id=”Email“ type=”email“ autofocus=”” placeholder=”Enter your email“ name=”Email“ spellcheck=”false“ value=””> <input id=”Passwd-hidden“ class=”hidden“ type=”password“ spellcheck=”false“> 
</div>

Selenium Code

public class Locators { 
      public static void main (String [] args){ 
      WebDriver driver = new FirefoxDriver(); 
      driver.get("https://www.gmail.com"); 
      // Here Tag = input and Id = Email 
      driver.findElement(By.cssSelector("input[name=Email]")).sendKeys("Software Testing Material"); 
      } 
}

Locating by CSS Selector – tag, class, and attribute

HTML code

<td>
<input id="email" class="inputtext" type="email" tabindex="1" value="" name="email">
</td>

Selenium code

public class Locators { 
      public static void main (String [] args){ 
      WebDriver driver = new FirefoxDriver(); 
      driver.get("https://www.facebook.com/"); 
      // Here Tag = input and Class = email 
      driver.findElement(By.cssSelector("input.inputtext[name=email]")).sendKeys("Software Testing Material"); 
      } 
}

Locating by CSS Selector – Substring

All the underneath mechanisms have symbolic significance.

Match a prefix

It is used to correspond to the string with the help of a matching prefix.

Syntax: css=<HTML tag><[attribute^=prefix of the string]>

Match a suffix

It is used to correspond to the string with the help of a matching suffix.

Syntax: css=<HTML tag><[attribute$=suffix of the string]>

Match a sub string

It is used to correspond to the string with the help of a matching substring.

Syntax: css=<HTML tag><[attribute*=sub string]>

Using CSS selectors to locate web elements is a useful skill, especially because it is used by advanced developers and testers. By mastering it, one is able to use selenium to its full potential, thus optimizing its abilities for automate Selenium testing.

Related Post

Leave a Comment

Recent Posts