Selenium Tutorial

Selenium Tool Suit Versions of Selenium Selenium Testing Difference Between Selenium and QTP Advantage and Disadvantage of Selenium

Selenium IDE Topics

Selenium-IDE Introduction Installation /download  Selenium–IDE (Firefox) Installation /download Selenium–IDE (Google Chrome) Characteristics of Selenium-IDE First test case of Selenium-IDE Login test for Selenium-IDE Selenium-IDE commands Selenium-IDE locators Id locator Name Locator  X Path Locator CSS Selector Locator Locating by ID Locating by Class Locating by Attribute Locating by ID/Class & Attribute Locating by Sub-string Locating by inner text Link Text Locator Advantage and Disadvantage of Selenium-IDE

Selenium WebDriver Topics

WebDriver introduction Characteristics of WebDriver Difference Between Selenium RC and WebDriver Installation steps of WebDriver WebDriver Class Diagram/ Architecture WebDriver control commands Browser control Navigation control Web element control Operational control Data capture control Verification control WebDriver working with chrome browser WebDriver working with Firefox browser WebDriver working with internet explorer browser WebDriver working with Microsoft Edge browser WebDriver locator Id Locator Name Locator Class name Locator Xpath Locator XPath axes Link text Locator Partial link text Locator Tag name Locator Css Selector Tag and Id Tag and Class Tag and Attribute Tag, class, and Attribute Sub string matches WebDriver wait statements Drop down handling Mouse and keyboard controls Drag and drop Event Handling Window Handling: New tab/new window Alert pop up Handling Checkbox Handling Radio button Handling Selenium Assertion

Selenium WebDriver-CSS Selector: Tag and ID

Selenium WebDriver-CSS Selector: Tag and ID

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

Where Tag and id are used to find the web element by its tag name using the #symbol to locate the id attribute.

The Syntax for tag and id attribute is as below:

driver.findElement(By.css Selector(“tag#id”)); 

Where, tag=the html tag of the web element

#=the hash symbol is used when CSS selector contains its Id attribute.

Id = represents the value of its id attribute.

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

Steps Actions Input Expected Result
1. Open the Firefox browser.   The Firefox browser should be opened.
2. Navigate to the Gmail login page. The Gmail login page must be displayed.
3. Identify the username text box and pass the value. Username=admin The username textbox 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 Selenium WebDriver tutorial.
  • Then right-click on the src folder and create a new Class File from New ? Class.
Selenium web driver-CSS Selector Tag and ID
  • And give your Class name as Tag_and_id and click on the Finish button.
Selenium web driver-CSS Selector Tag and ID 1

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


  • 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 Firefox driver.
// System Property for gecko Driver   
// create an object for FirefoxDriver class.       
WebDriver driver=new FirefoxDriver();   


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


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

  • Right-click on the username text box and clicks on the Inspect Element.
Selenium web driver-CSS Selector Tag and ID 2
  • It will launch a window that contains all the specific codes used in the development of the username text box.
Selenium web driver-CSS Selector Tag and ID 3

Where the tag value is input and, the value of its id attribute is identifierId.                                                                            

Here the sample code:

//Identify the username text box and pass the value.
System.out.println("username value is entered"); 


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

Here the sample code for closing the browser,

//Close the browser

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.firefox.FirefoxDriver;
public class Tag_and_id {
public static void main(String[] args)throws InterruptedException {
//set the system property
// create driver object for gecko browser              
WebDriver driver=new FirefoxDriver();
//Navigate to Gmail login page               driver.get(""+ ""
+ "GlifWebSignIn&flowEntry=ServiceLogin");
// identify the username text box and pass the value.
System.out.println("username value is entered");
 //close the browser
  • To run the above code in the Eclipse, we have to right-click on the code and then select Run As ? Java Application.
Selenium web driver-CSS Selector Tag and ID 4
  • The above test script will launch the Firefox browser and automate all the test scenarios.
Selenium web driver-CSS Selector Tag and ID 5