Selenium WebDriver-CSS Selector: Tag Class and Attribute

Selenium WebDriver-CSS Selector: Tag, Class, and Attribute

We will locate the web element with the help of Tag, class, and attribute CSS selector locator in this section of the tutorial.

Where Tag, class, and attribute are used to find the web element by its tag name, class, and attribute value.

The Syntax for Tag and Attribute is as below:

Tagname.class[attribute=’value’]

Where Tag name=the html tag of the web element.

[.]=the dot symbol is used when CSS selector contains its Class attribute.

Class = represents the value of its class attribute.

[ ] = the square brackets are used to place the value of a specific attribute.

Attribute= id, class, and name, their values can be used as an attribute.

Value=value of the selected attribute.

Let us take one example where we will perform actions on the tagname,class, and attribute of CSS selector locator:

Steps	Actions	Input	Expected Result
1.	Open the Google Chrome browser.		The Google Chrome browser should be opened.
2.	Navigate to the Gmail login page.	https://www.gmail.com	The Gmail login page must be displayed.
3.	Identify the username text box and pass the value.	Username=xyz11@gmail.com	The username text box should be identified, and the value should be entered.
4.	Close the browser.		The browser should be closed.

• Firstly, we have to Launch the Eclipse and open the existing test suite new_test, which we have created in earlier session of the WebDriver tutorial.
• Then, right-click on the src folder and create a new Class File from New ? Class.

• And give your Class name as Tag_class_and_attribute and click on the Finish button.

 We are creating our test case step by step to give you a complete understanding of tag, class, and attribute locators to identify a particular web element.

Step1:

• To access the Google Chrome browser first, we need to download the chrome driver and set the system property for the chrome driver.
• We have already discussed this in previous sessions of the tutorial. And you can also refer to the given link "Working with Chrome browser” for a better understanding that how we downloaded it and set the System property for it.

// System Property for chrome Driver   
System.setProperty("webdriver.chrome.driver","C:\Users\JTP\Downloads\chromedriver_win32\chromedriver.exe");
// create an object for Chrome Driver 
WebDriver driver=new ChromeDriver();   

Step2:

• After that, we will write the code to automate our second step, which is to navigate the given URL.

The sample code for the navigation of the desired URL:

//navigate to the URL
driver.get(“https://accounts.google.com/ServiceLogin/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1<mpl=default<mplcache=2&emr=1&osid=1&flowName=GlifWebSignIn&flowEntry=AddSession”); 

Step3:

 For locating the username text box of the Gmail login page, we will use the value of its tag, class, and attribute.

• First, right-click on the username text box, and then select the Inspect Element.

• It will launch a developer tool window that contains all the specific codes which are used in the development of the username text box.

Where the tag name value is input and the value of its class attribute is whsOnd zHQkBf and value of its name attribute is identifier.                                                                        

Here the sample code:

//identify the username text box and pass the value.
driver.findElement(By.cssSelector("input.whsOnd.zHQkBf[name=identifier]")).sendKeys("xyz11@gmai.com");
Thread.sleep(3000);
System.out.println("username value is entered"); 

Note: while using class attribute, we will remove the space and put (.) dot sign.                                                                                 

Step4:

 In the last step of our sample test case, we are closing the existing browser.

//Close the browser
driver.close();   

Our final test script will look like this:

package testpackage;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
public class Tag_class_and_attribute {
public static void main(String[] args)throws InterruptedException {
System.setProperty("webdriver.chrome.driver","C:\Users\JTP\Downloads\chromedriver_win32\chromedriver.exe");
//create the object for chrome driver 
WebDriver driver = new ChromeDriver();
//maximize the browser               
driver.manage().window().maximize(); 
driver.manage().timeouts().implicitlyWait(10,TimeUnit.SECONDS);
//navigate to the URL                                                                       driver.get(“https://accounts.google.com/ServiceLogin/identifier?service=mail&passive=true&rm=false&continue=https%3A%2F%2Fmail.google.com%2Fmail%2F&ss=1&scc=1<mpl=default<mplcache=2&emr=1&osid=1&flowName=GlifWebSignIn&flowEntry=AddSession”);
//Identify the username textbox and passing the value
driver.findElement(By.cssSelector("input.whsOnd.zHQkBf[name=identifier]")).sendKeys("xyz11@gmai.com");
Thread.sleep(3000);
System.out.println("username value is entered");
 //close the browser
driver.close();
}
} 

• To run the code in Eclipse, we have to right-click on the code and then select Run As → Java Application.

And we can see from the below screenshot that the above test script will launch the Google Chrome browser and automate all the test scenarios.