Selenium WebDriver-CSS Selector: Tag and Class

Selenium WebDriver-CSS Selector: Tag and Class

We will locate the web element with the help of tag and class CSS selector in this section of the tutorials

Where Tag and class are used to find the web element by its tag name using the [.] symbol to locate the class attribute.

The Syntax for Tag and class attribute is as below:

“tag.class”
Or
“.class” 

Where Tag=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.

Let us take one example where will perform tag and class attribute of CSS selector:

Steps	Actions	Input	Expected Result
1.	Open the Firefox browser.		The Firefox browser should be opened.
2.	Navigate to the yahoo login page.	www.yahoo.com	The yahoo login page must be displayed.
3.	Identify the username text box and pass the value.	xyz11@yahoo.com	The value should be entered.
4.	Close the browser.		The browser should be closed.

• Firstly, we have to Launch Eclipse and open the existing test suite new_test, which we have created in earlier sessions 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_and_class and click on the Finish button.

 We are creating our test case step by step to give you a complete understanding of how to use tag and Class Locators to identify a particular web element.

Step1:

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

// System Property for gecko Driver   
System.setProperty("webdriver.gecko.driver","C:\Users\JTP\Downloads\geckodriver-v0.25.0-win64\geckodriver.exe");
// create an object for FirefoxDriver class.       
WebDriver driver=new FirefoxDriver();   

Step2:

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

The sample code for the navigation of the desired URL:

//navigate to the URL
driver.get(“https://login.yahoo.com”); 

Step3:

 Now, we are trying to locate the desired web element by using the value of its tag and class attribute.

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

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

Where the tag value is input and, the value of its class attribute is phone-no.

Here the sample code:

//identify the username text box and pass the value.
driver.findElement(By.cssSelector("input.phone-no")).sendKeys("admin"); 
Thread.sleep(3000);
System.out.println("username value is entered"); 

Step4:

In the last step of our sample test case is to close the browser.

Here the sample code for closing the browser,

//Close the browser
driver.close();   

Our final test script will look like this:

package testpackage;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class Tag_and_class {
public static voclass main(String[] args)throws InterruptedException {
//set the system property
System.setProperty("webdriver.gecko.driver","C:\Users\JTP\Downloads\geckodriver-0.25.0-in64\geckodriver.exe");
// create driver object for gecko browser              
WebDriver driver=new FirefoxDriver();
driver.manage().window().maximize(); 
//Navigate to yahoo login page              
driver.get("https://login.yahoo.com"");
// identify the username text box and pass the value.
driver.findElement(By.cssSelector("input.phone-no")).sendKeys("xyz11@yahoo.com");
 Thread.sleep(3000);
System.out.println("username value is entered");
//close the browser
driver.close();
}
} 

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

• The above test script will launch the Firefox browser and automate all the test scenarios.