Selenium Tutorial for Beginners:
Posted by Superadmin on February 02 2019 05:17:35

 

Selenium Tutorial for Beginners:

 

 

Syllabus

First Look 

  Tutorial What is Selenium? Introduction to Selenium Automation Testing
  Tutorial What is Selenium WebDriver? Difference with RC

WebDriver Tutorial 

It will be beneficial if you revisit Java, before reading tutorials on Webdriver

  Tutorial How to Download & Install Selenium WebDriver
  Tutorial First Selenium Webdriver Script: JAVA Code Example
 Tutorial Locators in Selenium IDE: CSS Selector, DOM, XPath, Link Text, ID
 Tutorial Find Element and FindElements in Selenium WebDriver
 Tutorial Selenium Form WebElement: TextBox, Submit Button, sendkeys(), click()
 Tutorial How to Select CheckBox and Radio Button in Selenium WebDriver
 Tutorial How to Click on Image in Selenium Webdriver
 Tutorial How to Select Value from DropDown using Selenium Webdriver
 Tutorial Locate Elements by Link Text & Partial Link Text in Selenium Webdriver
 Tutorial Mouse Click & Keyboard Event: Action Class in Selenium Webdriver
 Tutorial How to Upload & Download a File using Selenium Webdriver
 Tutorial XPath in Selenium WebDriver: Complete Tutorial
 Tutorial Alert & Popup Window Handling in Selenium WebDriver
 Tutorial How to Handle Web Table in Selenium WebDriver
 Tutorial Handling Dynamic Web Tables Using Selenium WebDriver
 Tutorial Desired Capabilities in Selenium WebDriver
 Tutorial How to Verify Tooltip using Selenium WebDriver
 Tutorial How to Find All/Broken links using Selenium Webdriver
 Tutorial Gecko (Marionette) Driver Selenium: Download, Install, Use with Firefox

TestNG

 Tutorial How to Download & Install TestNG in Eclipse for Selenium WebDriver
 Tutorial TestNG Tutorial: Annotations, Framework, Examples in Selenium
 Tutorial TestNG Groups: Include, Exclude with Example - Selenium Tutorial
 Tutorial TestNG @Test Priority in Selenium
 Tutorial Parallel Execution in Selenium: Session Handling & TestNG Dependency
 Tutorial TestNG: How to Run Multiple Test Suites in Selenium
 Tutorial TestNG Listeners in Selenium: ITestListener & ITestResult Example
 Tutorial How to Execute Failed Test Cases in TestNG: Selenium WebDriver
 Tutorial TestNG Report Generation in Selenium WebDriver
 Tutorial Customize, PDF & Email TestNG Reports in Selenium WebDriver

 

 

 

Frameworks

 Tutorial Page Object Model (POM) & Page Factory: Selenium WebDriver Tutorial
 Tutorial Dataprovider & TestNG XML: Parameterization in Selenium(Example)
 Tutorial Read & Write Data from Excel File in Selenium Webdriver: POI & JXL
 Tutorial How to Select Date from DatePicker/Calendar in Selenium Webdriver

Advance Webdriver Stuff!

 Tutorial Selenium Grid Tutorial: Hub & Node (with Example)
 Tutorial Maven & Jenkins Integration with Selenium: Complete Tutorial
 Tutorial Selenium Automation Framework: Data Driven, Keyword Driven & Hybrid
 Tutorial Database Testing using Selenium: Step by Step Guide
 Tutorial Handling iFrames in Selenium Webdriver: switchTo()
 Tutorial Cross Browser Testing using Selenium WebDriver
 Tutorial How to Take Screenshot in Selenium WebDriver
 Tutorial Log4j with Selenium Tutorial: Download, Install, Use & Example
 Tutorial Selenium Headless Browser Testing: HTMLUnitDriver & PhantomJS
 Tutorial Robot Class in Selenium Webdriver
 Tutorial How to use AutoIT with Selenium Webdriver: File Upload Example
 Tutorial How to Handle SSL Certificate in Selenium WebDriver
 Tutorial How to Handle AJAX Call in Selenium Webdriver
 Tutorial JavaScriptExecutor in Selenium WebDriver with Example
 Tutorial Selenium Webdriver using Python: Tutorial with Example
 Tutorial How to use IntelliJ IDEA & Selenium Webdriver
 Tutorial Flash Testing with Selenium WebDriver
 Tutorial Apache ANT with Selenium: Complete Tutorial
 Tutorial How to Generate XSLT Report in Selenium Webdriver
 Tutorial Github Integration with Selenium: Complete Tutorial
 Tutorial Cookies Handling in Selenium WebDriver
 Tutorial Using SoapUI with Selenium for Web Service Testing
 Tutorial How to Create Firefox Profile in Selenium WebDriver
 Tutorial Selenium with Cucumber (BDD Framework): Tutorial with Example
 Tutorial How to Drag and Drop in Selenium WebDriver (EXAMPLE)
 Tutorial Selenium C# Webdriver Tutorial: NUnit Example
 Tutorial Creating Object Repository in Selenium WebDriver: XML & Properties file
 Tutorial How to Scroll Down or UP a Page in Selenium Webdriver
 Tutorial Sikuli Tutorial: How to use Sikuli with Selenium (EXAMPLE)
 Tutorial XPath Contains, Sibling, Ancestor Functions in Selenium WebDriver
 Tutorial Implicit, Explicit, & Fluent Wait in Selenium WebDriver
 Tutorial Double click and Right Click in Selenium with Examples

Selenium IDE Tutorial

 Tutorial How to Download & Install Selenium IDE for Firefox
 Tutorial Selenium IDE Tutorial for Beginners
 Tutorial How to use Selenium IDE with Scripts & Commands (Assert, Verify)
 Tutorial Verify Element Present, waitFor, andWait in Selenium IDE
 Tutorial Store Variables, Echo, Alert, PopUp handling in Selenium IDE
 Tutorial Selenium Core Extensions (User-Extensions.js)
 Tutorial Breakpoint & Start Point in Selenium IDE
 Tutorial Maximize Browser in Selenium

Must Check!

 Tutorial Top 100 Selenium Interview Questions & Answers
 Tutorial Selenium vs HP UFT (QTP): What's the Difference?
 Tutorial Top 15 Selenium Alternatives

Live Selenium Project

 Join Live Selenium Project: Banking Domain
 Join Live Ecommerce Project: Selenium Automation

What is Selenium? Introduction to Selenium Automation Testing

 

What is Selenium?

Selenium is a free (open source) automated testing suite for web applications across different browsers and platforms. It is quite similar to HP Quick Test Pro (QTP now UFT) only that Selenium focuses on automating web-based applications. Testing done using Selenium tool is usually referred as Selenium Testing.

Selenium is not just a single tool but a suite of software's, each catering to different testing needs of an organization. It has four components.

What You Will Learn: [hide]

Introduction to Selenium

At the moment, Selenium RC and WebDriver are merged into a single framework to form Selenium 2. Selenium 1, by the way, refers to Selenium RC. 

Who developed Selenium?

Since Selenium is a collection of different tools, it had different developers as well. Below are the key persons who made notable contributions to the Selenium Project

Introduction to Selenium

Primarily, Selenium was created by Jason Huggins in 2004. An engineer at ThoughtWorks, he was working on a web application that required frequent testing. Having realized that the repetitious Manual Testing of their application was becoming more and more inefficient, he created a JavaScript program that would automatically control the browser's actions. He named this program as the "JavaScriptTestRunner."

Seeing potential in this idea to help automate other web applications, he made JavaScriptRunner open-source which was later re-named as Selenium Core.

The Same Origin Policy Issue

Same Origin policy prohibits JavaScript code from accessing elements from a domain that is different from where it was launched. Example, the HTML code in www.google.com uses a JavaScript program "randomScript.js". The same origin policy will only allow randomScript.js to access pages within google.com such as google.com/mail, google.com/login, or google.com/signup. However, it cannot access pages from different sites such as yahoo.com/search or guru99.com because they belong to different domains.

Introduction to Selenium

This is the reason why prior to Selenium RC, testers needed to install local copies of both Selenium Core (a JavaScript program) and the web server containing the web application being tested so they would belong to the same domain

Birth of Selenium Remote Control (Selenium RC)

Introduction to Selenium

Unfortunately; testers using Selenium Core had to install the whole application under test and the web server on their own local computers because of the restrictions imposed by the same origin policy. So another ThoughtWork's engineer, Paul Hammant, decided to create a server that will act as an HTTP proxy to "trick" the browser into believing that Selenium Core and the web application being tested come from the same domain. This system became known as the Selenium Remote Control or Selenium 1.

Birth of Selenium Grid

Introduction to Selenium

Selenium Grid was developed by Patrick Lightbody to address the need of minimizing test execution times as much as possible. He initially called the system "Hosted QA." It was capable of capturing browser screenshots during significant stages, and also of sending out Selenium commands to different machines simultaneously.

Birth of Selenium IDE

Introduction to Selenium

Shinya Kasatani of Japan created Selenium IDE, a Firefox extension that can automate the browser through a record-and-playback feature. He came up with this idea to further increase the speed in creating test cases. He donated Selenium IDE to the Selenium Project in 2006.

Birth of WebDriver

Introduction to SeleniumSimon Stewart created WebDriver circa 2006 when browsers and web applications were becoming more powerful and more restrictive with JavaScript programs like Selenium Core. It was the first cross-platform testing framework that could control the browser from the OS level. 



Birth of Selenium 2


In 2008, the whole Selenium Team decided to merge WebDriver and Selenium RC to form a more powerful tool called Selenium 2, with WebDriver being the core. Currently, Selenium RC is still being developed but only in maintenance mode. Most of the Selenium Project's efforts are now focused on Selenium 2.

 

 

So, Why the Name Selenium?

It came from a joke which Jason cracked one time to his team. Another automated testing framework was popular during Selenium's development, and it was by the company called Mercury Interactive (yes, the company who originally made QTP before it was acquired by HP). Since Selenium is a well-known antidote for Mercury poisoning, Jason suggested that name. His teammates took it, and so that is how we got to call this framework up to the present.

Introduction to Selenium

Brief Introduction Selenium IDE

Selenium Integrated Development Environment (IDE) is the simplest framework in the Selenium suite and is the easiest one to learn. It is a Firefox plugin that you can install as easily as you can with other plugins. However, because of its simplicity, Selenium IDE should only be used as a prototyping tool. If you want to create more advanced test cases, you will need to use either Selenium RC or WebDriver.

Introduction to Selenium

Brief Introduction Selenium Remote Control (Selenium RC)

Selenium RC was the flagship testing framework of the whole Selenium project for a long time. This is the first automated web testing tool that allowed users to use a programming language they prefer. As of version 2.25.0, RC can support the following programming languages:

Introduction to Selenium

Brief Introduction WebDriver

The WebDriver proves itself to be better than both Selenium IDE and Selenium RC in many aspects. It implements a more modern and stable approach in automating the browser's actions. WebDriver, unlike Selenium RC, does not rely on JavaScript for Automation. It controls the browser by directly communicating with it.

The supported languages are the same as those in Selenium RC.

Introduction to Selenium

Selenium Grid

Selenium Grid is a tool used together with Selenium RC to run parallel tests across different machines and different browsers all at the same time. Parallel execution means running multiple tests at once.

Features:

Note on Browser and Environment Support

Because of their architectural differences, Selenium IDE, Selenium RC, and WebDriver support different sets of browsers and operating environments.

 Selenium IDEWebDriver
BrowserSupport Mozilla Firefox Internet Explorer versions 6 to 11, both 32 and 64-bit 

Microsoft Edge version 12.10240 & above ( partial support some functionalities under development) 
Firefox 3.0 and above 
Google Chrome 12.0. and above 
Opera 11.5 and above 
Android - 2.3 and above for phones and tablets 
(devices & emulators) 

iOS 3+ for phones (devices & emulators) and 3.2+ for tablets (devices & emulators) 

HtmlUnit 2.9 and above 
Operating System Windows,Mac OS X,Linux   All operating systems where the browsers above can run.

Note: Selenium WebDriver is termed as the successor of Selenium RC which has been deprecated & officially announced by SeleniumHQ.

How to Choose the Right Selenium Tool for Your Need

ToolWhy Choose?

Selenium IDE

  • To learn about concepts on automated testing and Selenium, including:
  • Selenese commands such as type, open, clickAndWait, assert, verify, etc.
  • Locators such as id, name, xpath, css selector, etc.
  • Executing customized JavaScript code using runScript
  • Exporting test cases in various formats.
  • To create tests with little or no prior knowledge in programming.
  • To create simple test cases and test suites that you can export later to RC or WebDriver.
  • To test a web application against Firefox only.

Selenium RC

  • To design a test using a more expressive language than Selenese
  • To run your test against different browsers (except HtmlUnit) on different operating systems.
  • To deploy your tests across multiple environments using Selenium Grid.
  • To test your application against a new browser that supports JavaScript.
  • To test web applications with complex AJAX-based scenarios.

WebDriver

  • To use a certain programming language in designing your test case.
  • To test applications that are rich in AJAX-based functionalities.
  • To execute tests on the HtmlUnit browser.
  • To create customized test results.

Selenium Grid

  • To run your Selenium RC scripts in multiple browsers and operating systems simultaneously.
  • To run a huge test suite, that needs to complete in the soonest time possible.

A Comparison between Selenium and QTP(now UFT)

Quick Test Professional(QTP) is a proprietary automated testing tool previously owned by the company Mercury Interactive before it was acquired by Hewlett-Packard in 2006. The Selenium Tool Suite has many advantages over  QTP as detailed below -

Advantages of Selenium over QTP

SeleniumQTP
Open sourcefree to use, and free of charge. Commercial.
Highly extensible Limited add-ons
Can run tests across different browsers Can only run tests in FirefoxInternet Explorer and Chrome
Supports various operating systems Can only be used in Windows
Supports mobile devices QTP Supports Mobile app test automation (iOS & Android) using HP solution called - HP Mobile Center
Can execute tests while the browser is minimized Needs to have the application under test to be visible on the desktop
Can execute tests in parallel. Can only execute in parallel but using Quality Center which is again a paid product.

Advantages of QTP over Selenium

Advantages of QTP over Selenium
QTPSelenium
Can test both web and desktop applications Can only test web applications
Comes with a built-in object repository Has no built-in object repository
Automates faster than Selenium because it is a fully featured IDE. Automates at a slower rate because it does not have a native IDE and only third party IDE can be used for development
Data-driven testing is easier to perform because it has built-in global and local data tables. Data-driven testing is more cumbersome since you have to rely on the programming language's capabilities for setting values for your test data
Can access controls within the browser(such as the Favorites bar, Address bar, Back and Forward buttons, etc.) Cannot access elements outside of the web application under test
Provides professional customer support No official user support is being offered.
Has native capability to export test data into external formats Has no native capability to export runtime data onto external formats
Parameterization Support is built Parameterization can be done via programming but is difficult to implement.
Test Reports are generated automatically No native support to generate test /bug reports.

Though clearly, QTP has more advanced capabilities, Selenium outweighs QTP in three main areas:

Summary

What is WebDriver?

WebDriver is a web automation framework that allows you to execute your tests against different browsers, not just Firefox, Chrome (unlike Selenium IDE).

WebDriver also enables you to use a programming language in creating your test scripts (not possible in Selenium IDE).

You can now use conditional operations like if-then-else or switch-case. You can also perform looping like do-while.

Introduction to WebDriver & Comparison with Selenium RC

Following programming languages are supported by WebDriver

You do not have to know all of them. You just need to be knowledgeable in one. However, in this tutorial, we will be using Java with Eclipse as our IDE.

Difference between Selenium RC and Webdriver

Before the advent of WebDriver in  2006, there was another, automation tool called Selenium Remote Control. Both WebDriver and Selenium RC have following features:

So how do they differ? Let us discuss the answers.

1. Architecture

WebDriver's architecture is simpler than Selenium RC's.

Introduction to WebDriver & Comparison with Selenium RC   

Selenium RC's architecture is way more complicated.

Introduction to WebDriver & Comparison with Selenium RC

2. Speed

Introduction to WebDriver & Comparison with Selenium RC

WebDriver is faster than Selenium RC since it speaks directly to the browser uses the browser's own engine to control it.

Introduction to WebDriver & Comparison with Selenium RC

Selenium RC is slower since it uses a Javascript program called Selenium Core. This Selenium Core is the one that directly controls the browser, not you.

3. Real-life Interaction

Introduction to WebDriver & Comparison with Selenium RC

WebDriver interacts with page elements in a more realistic way. For example, if you have a disabled text box on a page you were testing, WebDriver really cannot enter any value in it just as how a real person cannot.

Introduction to WebDriver & Comparison with Selenium RC

Selenium Core, just like other JavaScript codes, can access disabled elements. In the past, Selenium testers complain that Selenium Core was able to enter values to a disabled text box in their tests. Differences in API

4. API

Introduction to WebDriver & Comparison with Selenium RC

Selenium RC's API is more matured but contains redundancies and often confusing commands. For example, most of the time, testers are confused whether to use type or typeKeys; or whether to use click, mouseDown, or mouseDownAt. Worse, different browsers interpret each of these commands in different ways too!

WebDriver's API is simpler than Selenium RC's. It does not contain redundant and confusing commands.

5. Browser Support

Introduction to WebDriver & Comparison with Selenium RC

WebDriver can support the headless HtmlUnit browser

HtmlUnit is termed as "headless" because it is an invisible browser - it is GUI-less.

It is a very fast browser because no time is spent in waiting for page elements to load. This accelerates your test execution cycles.

Since it is invisible to the user, it can only be controlled through automated means.

Selenium RC cannot support the headless HtmlUnit browser. It needs a real, visible browser to operate on.

Limitations of WebDriver

WebDriver Cannot Readily Support New Browsers

Remember that WebDriver operates on the OS level. Also, remember that different browsers communicate with the OS in different ways. If a new browser comes out, it may have a different process of communicating with the OS as compared to other browsers. So, you have to give the WebDriver team quite some time to figure that new process out before they can implement it on the next WebDriver release.

However, it is up to the WebDriver's team of developers to decide if they should support the new browser or not.

Selenium RC Has Built-In Test Result Generator

Selenium RC automatically generates an HTML file of test results. The format of the report was pre-set by RC itself. Take a look at an example of this report below.

Introduction to WebDriver & Comparison with Selenium RC

 

WebDriver has no built-in command that automatically generates a Test Results File. You would have to rely on your IDE's output window, or design the report yourself using the capabilities of your programming language and store it as text, HTML, etc.

Summary

 

 

In this tutorial, we will install Webdriver (Java only) and Configure Eclipse

 

Step 1 - Install Java on your computer

Download and install the Java Software Development Kit (JDK) here.

How to Download & Install Selenium WebDriver

Next –

How to Download & Install Selenium WebDriver

This JDK version comes bundled with Java Runtime Environment (JRE), so you do not need to download and install the JRE separately.

Once installation is complete, open command prompt and type “java”. If you see the following screen you are good to move to the next step

How to Download & Install Selenium WebDriver

Step 2 - Install Eclipse IDE

Download latest version of "Eclipse IDE for Java Developers" here. Be sure to choose correctly between Windows 32 Bit and 64 Bit versions.

You should be able to download an exe file named "eclipse-inst-win64" for Setup.

Double-click on file to Install the Eclipse. A new window will open. Click Eclipse IDE for Java Developers.

After that, a new window will open which click button marked 1 and change path to "C:\eclipse". Post that Click on Install button marked 2

After successful completion of the installation procedure, a window will appear. On that window click on Launch

This will start eclipse neon IDE for you.

Step 3 - Download the Selenium Java Client Driver

You can download the Selenium Java Client Driver here. You will find client drivers for other languages there, but only choose the one for Java.

This download comes as a ZIP file named "selenium-2.25.0.zip". For simplicity, extract the contents of this ZIP file on your C drive so that you would have the directory "C:\selenium-2.25.0\". This directory contains all the JAR files that we would later import on Eclipse.

Step 4 - Configure Eclipse IDE with WebDriver

  1. Launch the "eclipse.exe" file inside the "eclipse" folder that we extracted in step 2. If you followed step 2 correctly, the executable should be located on C:\eclipse\eclipse.exe.
  2. When asked to select for a workspace, just accept the default location.

3. Create a new project through File > New > Java Project. Name the project as "newproject".

A new pop-up window will open enter details as follow

  1. Project Name
  2. Location to save project
  3. Select an execution JRE
  4. Select layout project option
  5. Click on Finish button

4. In this step,

  1. Right-click on the newly created project and
  2. Select New > Package, and name that package as "newpackage".

A pop-up window will open to name the package,

  1. Enter the name of the package
  2. Click on Finish button

5. Create a new Java class under newpackage by right-clicking on it and then selecting- New > Class, and then name it as "MyClass". Your Eclipse IDE should look like the image below.

When you click on Class, a pop-up window will open, enter details as

  1. Name of the class
  2. Click on Finish button

This is how it looks like after creating class.

Now selenium WebDriver's into Java Build Path

In this step,

  1. Right-click on "newproject" and select Properties.
  2. On the Properties dialog, click on "Java Build Path".
  3. Click on the Libraries tab, and then
  4. Click on "Add External JARs.."

When you click on "Add External JARs.." It will open a pop-up window. Select the JAR files you want to add.

After selecting jar files, click on OK button.

Select all files inside the lib folder.

Select files outside lib folder

How to Download & Install Selenium WebDriver

Once done, click "Apply and Close" button

How to Download & Install Selenium WebDriver

6. Add all the JAR files inside and outside the "libs" folder. Your Properties dialog should now look similar to the image below.

7. Finally, click OK and we are done importing Selenium libraries into our project.

Different Drivers

HTMLUnit and Firefox are two browsers that WebDriver can directly automate - meaning that no other separate component is needed to install or run while the test is being executed. For other browsers, a separate program is needed. That program is called as the Driver Server.

A driver server is different for each browser. For example, Internet Explorer has its own driver server which you cannot use on other browsers. Below is the list of driver servers and the corresponding browsers that use them.

You can download these drivers here

Browser Name of Driver Server Remarks
HTMLUnit HtmlUnitDriver WebDriver can drive HTMLUnit using HtmlUnitDriver as driver server
Firefox Mozilla GeckoDriver WebDriver can drive Firefox without the need of a driver server Starting Firefox 45 & above one needs to use gecko driver created by Mozilla for automation
Internet Explorer Internet Explorer Driver Server Available in 32 and 64-bit versions. Use the version that corresponds to the architecture of your IE
Chrome ChromeDriver Though its name is just "ChromeDriver", it is, in fact, a Driver Server, not just a driver. The current version can support versions higher than Chrome v.21
Opera OperaDriver Though its name is just "OperaDriver", it is, in fact, a Driver Server, not just a driver.
PhantomJS GhostDriver PhantomJS is another headless browser just like HTMLUnit.
Safari SafariDriver Though its name is just "SafariDriver", it is, in fact, a Driver Server, not just a driver.

Summary

Aside from a browser, you will need the following to start using WebDriver

When starting a WebDriver project in Eclipse, do not forget to import the Java Client Driver files onto your project. These files will constitute your Selenium Library.

With new version of Selenium, there is no browser that you can automate without the use of a Driver Server.

Using the Java class "myclass"  that we created in the previous tutorial, let us try to create a WebDriver script that would:

  1. fetch Mercury Tours' homepage
  2. verify its title
  3. print out the result of the comparison
  4. close it before ending the entire program.

WebDriver Code

Below is the actual WebDriver code for the logic presented by the scenario above

Note: Starting Firefox 35, you need to use gecko driver created by Mozilla to use Web Driver. Selenium 3.0, gecko and firefox has compatibility issues and setting them correctly could become an uphill task. If the code does not work, downgrade to Firefox version 47 or below. Alternatively, you can run your scripts on Chrome. Selenium works out of the box for Chrome. You just need to change 3 lines of code to make your script work with Chrome or Firefox

package newproject;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
//comment the above line and uncomment below line to use Chrome
//import org.openqa.selenium.chrome.ChromeDriver;
public class PG1 {


    public static void main(String[] args) {
        // declaration and instantiation of objects/variables
    	System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
		WebDriver driver = new FirefoxDriver();
		//comment the above 2 lines and uncomment below 2 lines to use Chrome
		//System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
		//WebDriver driver = new ChromeDriver();
    	
        String baseUrl = "http://demo.guru99.com/test/newtours/";
        String expectedTitle = "Welcome: Mercury Tours";
        String actualTitle = "";

        // launch Fire fox and direct it to the Base URL
        driver.get(baseUrl);

        // get the actual value of the title
        actualTitle = driver.getTitle();

        /*
         * compare the actual title of the page with the expected one and print
         * the result as "Passed" or "Failed"
         */
        if (actualTitle.contentEquals(expectedTitle)){
            System.out.println("Test Passed!");
        } else {
            System.out.println("Test Failed");
        }
       
        //close Fire fox
        driver.close();
       
    }

}

Explaining the code

Importing Packages

To get started, you need to import following two packages:

  1. org.openqa.selenium.*- contains the WebDriver class needed to instantiate a new browser loaded with a specific driver
  2. org.openqa.selenium.firefox.FirefoxDriver - contains the FirefoxDriver class needed to instantiate a Firefox-specific driver onto the browser instantiated by the WebDriver class

If your test needs more complicated actions such as accessing another class, taking browser screenshots, or manipulating external files, definitely you will need to import more packages.

Instantiating objects and variables

Normally, this is how a driver object is instantiated.

First Selenium Webdriver Script: JAVA Code Example

A FirefoxDriver class with no parameters means that the default Firefox profile will be launched by our Java program. The default Firefox profile is similar to launching Firefox in safe mode (no extensions are loaded).

For convenience, we saved the Base URL and the expected title as variables.

Launching a Browser Session

WebDriver's get() method is used to launch a new browser session and directs it to the URL that you specify as its parameter.

First Selenium Webdriver Script: JAVA Code Example

Get the Actual Page Title

The WebDriver class has the getTitle() method that is always used to obtain the page title of the currently loaded page.

First Selenium Webdriver Script: JAVA Code Example

Compare the Expected and Actual Values

This portion of the code simply uses a basic Java if-else structure to compare the actual title with the expected one.

First Selenium Webdriver Script: JAVA Code Example

Terminating a Browser Session

The "close()" method is used to close the browser window.

First Selenium Webdriver Script: JAVA Code Example

Terminating the Entire Program

If you use this command without closing all browser windows first, your whole Java program will end while leaving the browser window open.

First Selenium Webdriver Script: JAVA Code Example

Running the Test

There are two ways to execute code in Eclipse IDE.

  1. On Eclipse's menu bar, click Run > Run.
  2. Press Ctrl+F11 to run the entire code.

First Selenium Webdriver Script: JAVA Code Example

 If you did everything correctly, Eclipse would output "Test Passed!"

First Selenium Webdriver Script: JAVA Code Example

Locating GUI Elements

Locating elements in WebDriver is done by using the "findElement(By.locator())" method. The "locator" part of the code is same as any of the locators previously discussed in the Selenium IDE chapters of these tutorials. Infact, it is recommended that you locate GUI elements using IDE and once successfully identified export the code to webdriver.

Here is a sample code that locates an element by its id. Facebook is used as the Base URL.

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class PG2 {
    public static void main(String[] args) {
    	System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
    	WebDriver driver = new FirefoxDriver();
        String baseUrl = "http://www.facebook.com";
        String tagName = "";
        
        driver.get(baseUrl);
        tagName = driver.findElement(By.id("email")).getTagName();
        System.out.println(tagName);
        driver.close();
        System.exit(0);
}
}

We used the getTagName() method to extract the tag name of that particular element whose id is "email". When run, this code should be able to correctly identify the tag name "input" and will print it out on Eclipse's Console window.

First Selenium Webdriver Script: JAVA Code Example

Summary for locating elements

VariationDescriptionSample
By.className finds elements based on the value of the "class" attribute findElement(By.className("someClassName"))
By.cssSelector finds elements based on the driver's underlying CSS Selector engine findElement(By.cssSelector("input#email"))
By.id locates elements by the value of their "id" attribute findElement(By.id("someId"))  
By.linkText finds a link element by the exact text it displays findElement(By.linkText("REGISTRATION"))  
By.name locates elements by the value of the "name" attribute findElement(By.name("someName"))  
By.partialLinkText locates elements that contain the given link text findElement(By.partialLinkText("REG"))  
By.tagName locates elements by their tag name findElement(By.tagName("div"))  
By.xpath locates elements via XPath findElement(By.xpath("//html/body/div/table/tbody/tr/td[2]/table/ tbody/tr[4]/td/table/tbody/tr/td[2]/table/tbody/tr[2]/td[3]/ form/table/tbody/tr[5]"))

Note on Using findElement(By.cssSelector())

By.cssSelector() does not support the "contains" feature. Consider the Selenium IDE code below -

First Selenium Webdriver Script: JAVA Code Example

In Selenium IDE above, the entire test passed. However in the WebDriver script below, the same test generated an error because WebDriver does not support the "contains" keyword when used in the By.cssSelector() method.

First Selenium Webdriver Script: JAVA Code Example

Common Commands

 

Instantiating Web Elements

Instead of using the long "driver.findElement(By.locator())" syntax every time you will access a particular element, we can instantiate a WebElement object for it. The WebElement class is contained in the "org.openqa.selenium.*" package.

First Selenium Webdriver Script: JAVA Code Example

Clicking on an Element

Clicking is perhaps the most common way of interacting with web elements. The click() method is used to simulate the clicking of any element.  The following example shows how click() was used to click on Mercury Tours'  "Sign-In" button.

First Selenium Webdriver Script: JAVA Code Example

Following things must be noted when using the click() method.

 

 

Get Commands

 

Get commands fetch various important information about the page/element. Here are some important "get" commands you must be familiar with.

get() Sample usage:  
  • It automatically opens a new browser window and fetches the page that you specify inside its parentheses.
  • It is the counterpart of Selenium IDE's "open" command.
  • The parameter must be a String object.
getTitle() Sample usage:  
  • Needs no parameters
  • Fetches the title of the current page
  • Leading and trailing white spaces are trimmed
  • Returns a null string if the page has no title
getPageSource() Sample usage:  
  • Needs no parameters
  • Returns the source code of the page as a String value
getCurrentUrl() Sample usage:    
  • Needs no parameters
  • Fetches the string representing the current URL that the browser is looking at
getText() Sample usage:  
  • Fetches the inner text of the element that you specify

Navigate commands

These commands allow you to  refresh,go-into and switch back and forth between different web pages.

navigate().to() Sample usage:  
  • It automatically opens a new browser window and fetches the page that you specify inside its parentheses.
  • It does exactly the same thing as the get() method.
navigate().refresh() Sample usage:  
  • Needs no parameters.
  • It refreshes the current page.
navigate().back() Sample usage:  
  • Needs no parameters
  • Takes you back by one page on the browser's history.
navigate().forward() Sample usage:  
  • Needs no parameters
  • Takes you forward by one page on the browser's history.

Closing and Quitting Browser Windows

close() Sample usage:  
  • Needs no parameters
  • It closes only the browser window that WebDriver is currently controlling.
quit() Sample usage:  
  • Needs no parameters
  • It closes all windows that WebDriver has opened.

First Selenium Webdriver Script: JAVA Code Example

To clearly illustrate the difference between close() and quit(), try to execute the code below. It uses a webpage that automatically pops up a window upon page load and opens up another after exiting.

First Selenium Webdriver Script: JAVA Code Example

Notice that only the parent browser window was closed and not the two pop-up windows.

First Selenium Webdriver Script: JAVA Code Example

But if you use quit(), all windows will be closed - not just the parent one. Try running the code below and you will notice that the two pop-ups above will automatically be closed as well.

package newproject;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class PG3 {
    public static void main(String[] args) {
    	System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
    	WebDriver driver = new FirefoxDriver();
        driver.get("http://www.popuptest.com/popuptest2.html");
        driver.quit();  // using QUIT all windows will close
    }
}

Switching Between Frames

To access GUI elements in a Frame, we should first direct WebDriver to focus on the frame or pop-up window first before we can access elements within them. Let us take, for example, the web page http://demo.guru99.com/selenium/deprecated.html

First Selenium Webdriver Script: JAVA Code Example

This page has 3 frames whose "name" attributes are indicated above. We wish to access the "Deprecated" link encircled above in yellow. In order to do that, we must first instruct WebDriver to switch to the "classFrame" frame using the "switchTo().frame()"method. We will use the name attribute of the frame as the parameter for the "frame()" part.

package newproject;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
public class PG4 {
	  public static void main(String[] args) {
		  	System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");  
		  	WebDriver driver = new FirefoxDriver();
	        driver.get("http://demo.guru99.com/selenium/deprecated.html");
	        driver.switchTo().frame("classFrame");
	        driver.findElement(By.linkText("Deprecated")).click();
	        driver.close(); 
	    }
}

After executing this code, you will see that the "classFrame" frame is taken to the "Deprecated API" page, meaning that our code was successfully able to access the "Deprecated" link.

Switching Between Pop-up Windows

WebDriver allows pop-up windows like alerts to be displayed, unlike in Selenium IDE. To access the elements within the alert (such as the message it contains), we must use the "switchTo().alert()" method. In the code below, we will use this method to access the alert box and then retrieve its message using the "getText()" method, and then automatically close the alert box using the "switchTo().alert().accept()" method.

First,  head over to http://jsbin.com/usidix/1 and manually click the "Go!" button there and see for yourself the message text.

First Selenium Webdriver Script: JAVA Code Example

Lets see the WebDriver code to do this-

package mypackage;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class myclass {

    public static void main(String[] args) {
    	System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
        WebDriver driver = new FirefoxDriver();
        String alertMessage = "";

        driver.get("http://jsbin.com/usidix/1");
        driver.findElement(By.cssSelector("input[value=\"Go!\"]")).click();
        alertMessage = driver.switchTo().alert().getText();
        driver.switchTo().alert().accept();
       
        System.out.println(alertMessage);
        driver.quit();
       
    }
}

On the Eclipse console, notice that the printed alert message is:

First Selenium Webdriver Script: JAVA Code Example

Waits

There are two kinds of waits.

  1. Implicit wait - used to set the default waiting time throughout the program
  2. Explicit wait - used to set the waiting time for a particular instance only

Implicit Wait

To start using an implicit wait, you would have to import this package into your code.

First Selenium Webdriver Script: JAVA Code Example

Then on the instantiation part of your code, add this.

First Selenium Webdriver Script: JAVA Code Example

Explicit Wait

Explicit waits are done using the WebDriverWait and ExpectedCondition classes. For the following example, we shall wait up to 10 seconds for an element whose id is "username" to become visible before proceeding to the next command. Here are the steps.

Step 1

Import these two packages:

First Selenium Webdriver Script: JAVA Code Example

 

Step 2

Declare a WebDriverWait variable. In this example, we will use "myWaitVar" as the name of the variable.

First Selenium Webdriver Script: JAVA Code Example

Step 3

Use myWaitVar with ExpectedConditions on portions where you need the explicit wait to occur. In this case, we will use explicit wait on the "username" (Mercury Tours HomePage) input before we type the text "tutorial" onto it.

First Selenium Webdriver Script: JAVA Code Example

 

Conditions

Following  methods are used  in conditional and looping operations --

First Selenium Webdriver Script: JAVA Code Example

First Selenium Webdriver Script: JAVA Code Example

First Selenium Webdriver Script: JAVA Code Example

Using ExpectedConditions

The ExpectedConditions class offers a wider set of conditions that you can use in conjunction with WebDriverWait's until() method.

Below are some of the most common ExpectedConditions methods.

First Selenium Webdriver Script: JAVA Code Example

First Selenium Webdriver Script: JAVA Code Example

First Selenium Webdriver Script: JAVA Code Example

Catching Exceptions

When using isEnabled(), isDisplayed(), and isSelected(), WebDriver assumes that the element already exists on the page. Otherwise, it will throw a NoSuchElementException. To avoid this, we should use a try-catch block so that the program will not be interrupted.

WebElement txtbox_username = driver.findElement(By.id("username"));
try{
        if(txtbox_username.isEnabled()){
            txtbox_username.sendKeys("tutorial");
        }
    }

catch(NoSuchElementException nsee){
            System.out.println(nsee.toString());
 }

If you use explicit waits, the type of exception that you should catch is the "TimeoutException".

First Selenium Webdriver Script: JAVA Code Example

Summary

Note:

driver.get() : It's used to go to the particular website , But it doesn't maintain the browser History and cookies so , we can't use forward and backward button , if we click on that , page will not get schedule

driver.navigate() : it's used to go to the particular website , but it maintains the browser history and cookies, so we can use forward and backward button to navigate between the pages during the coding of Testcase

 

What are Locators?

Locator is a command that tells Selenium IDE which GUI elements ( say Text Box, Buttons, Check Boxes etc) its needs to operate on.  Identification of correct GUI elements is a prerequisite to creating an automation script. But accurate identification of GUI elements is more difficult than it sounds. Sometimes, you end up working with incorrect GUI elements or no elements at all!  Hence, Selenium provides a number of Locators to precisely locate a GUI element

The different types of Locators in Selenium IDE

What You Will Learn: [hide]
  • ID
  • Name
  • Link Text
  • CSS Selector
    • Tag and ID
    • Tag and class
    • Tag and attribute
    • Tag, class, and attribute
    • Inner text
  • DOM (Document Object Model)
    • getElementById
    • getElementsByName
    • dom:name
    • dom: index
  • XPath

There are commands that do not need a locator (such as the "open" command). However, most of them do need Locators.

The choice of locator depends largely on your Application Under Test. In this tutorial, we will toggle between Facebook, new tours.demoaut on the basis of locators that these applications support. Likewise in your Testing project, you will select any of the above-listed locators based on your application support.

Locating by ID

This is the most common way of locating elements since ID's are supposed to be unique for each element.

Target Format: id=id of the element

For this example, we will use Facebook as our test app because Mercury Tours do not use ID attributes.

Step 1. Since this tutorial was created, Facebook has changed their Login Page Design. Use this demo page http://demo.guru99.com/test/facebook.html for testing. Inspect the "Email or Phone" text box using Firebug and take note of its ID. In this case, the ID is "email."

How to use Locators in Selenium IDE

 

Step 2. Launch Selenium IDE and enter "id=email" in the Target box. Click the Find button and notice that the "Email or Phone" text box becomes highlighted with yellow and bordered with green, meaning, Selenium IDE was able to locate that element correctly.

How to use Locators in Selenium IDE

Locating by Name

Locating elements by name are very similar to locating by ID, except that we use the "name=" prefix instead.

Target Format: name=name of the element

In the following demonstration, we will now use Mercury Tours because all significant elements have names.

Step 1. Navigate to http://demo.guru99.com/test/newtours/ and use Firebug to inspect the "User Name" text box. Take note of its name attribute.

How to use Locators in Selenium IDE

Here, we see that the element's name is "userName".

Step 2. In Selenium IDE, enter "name=userName" in the Target box and click the Find button. Selenium IDE should be able to locate the User Name text box by highlighting it.

How to use Locators in Selenium IDE

Locating by Name using Filters

Filters can be used when multiple elements have the same name. Filters are additional attributes used to distinguish elements with the same name.

Target Format: name=name_of_the_element filter=value_of_filter

Let's see an example -

Step 1. Log on to Mercury Tours using "tutorial" as the username and password. It should take you to the Flight Finder page shown below.

How to use Locators in Selenium IDE

Step 2. Using Firebug, notice that the Round Trip and One Way radio buttons have the same name "tripType." However, they have different VALUE attributes so we can use each of them as our filter.

How to use Locators in Selenium IDE

Step 3.

How to use Locators in Selenium IDE

Step 4. Click the Find button and notice that Selenium IDE is able to highlight the One Way radio button with green - meaning that we are able to access the element successfully using its VALUE attribute.

How to use Locators in Selenium IDE

Step 5. Press the "X" key in your keyboard to execute this click command. Notice that the One Way radio button became selected.

How to use Locators in Selenium IDE

You can do the exact same thing with the Round Trip radio button, this time, using "name=tripType value=roundtrip" as your target.

Locating by Link Text

This type of locator applies only to hyperlink texts. We access the link by prefixing our target with "link=" and then followed by the hyperlink text.

Target Format: link=link_text

In this example, we shall access the "REGISTER" link found on the Mercury Tours homepage.

Step 1.

Step 2.

How to use Locators in Selenium IDE

Step 3. Copy the link text in Firebug and paste it onto Selenium IDE's Target box. Prefix it with "link=".

How to use Locators in Selenium IDE

Step 4. Click on the Find button and notice that Selenium IDE was able to highlight the REGISTER link correctly.

How to use Locators in Selenium IDE

Step 5. To verify further, enter "clickAndWait" in the Command box and execute it. Selenium IDE should be able to click on that REGISTER link successfully and take you to the Registration page shown below.

How to use Locators in Selenium IDE

Locating by CSS Selector

CSS Selectors are string patterns used to identify an element based on a combination of HTML tag, id, class, and attributes. Locating by CSS Selector is more complicated than the previous methods, but it is the most common locating strategy of advanced Selenium users because it can access even those elements that have no ID or name.

CSS Selectors have many formats, but we will only focus on the most common ones.

When using this strategy, we always prefix the Target box with "css=" as will be shown in the following examples.

Locating by CSS Selector - Tag and ID

Again, we will use Facebook's Email text box in this example. As you can remember, it has an ID of "email," and we have already accessed it in the "Locating by ID" section. This time, we will use a CSS Selector with ID in accessing that very same element.

Syntax

Description

css=tag#id

  • tag = the HTML tag of the element being accessed
  • # = the hash sign. This should always be present when using a CSS Selector with ID
  • id = the ID of the element being accessed

Keep in mind that the ID is always preceded by a hash sign (#).

Step 1. Navigate to www.facebook.com. Using Firebug, examine the "Email or Phone" text box.

At this point, take note that the HTML tag is "input" and its ID is "email". So our syntax will be "css=input#email".

How to use Locators in Selenium IDE

Step 2. Enter "css=input#email" into the Target box of Selenium IDE and click the Find button. Selenium IDE should be able to highlight that element.

How to use Locators in Selenium IDE

 

Locating by CSS Selector - Tag and Class

Locating by CSS Selector using an HTML tag and a class name is similar to using a tag and ID, but in this case, a dot (.) is used instead of a hash sign.

Syntax

Description

css=tag.class

  • tag = the HTML tag of the element being accessed
  • . = the dot sign. This should always be present when using a CSS Selector with class
  • class = the class of the element being accessed

 

Step 1. Go to the demo page http://demo.guru99.com/test/facebook.html and use Firebug to inspect the "Email or Phone" text box. Notice that its HTML tag is "input" and its class is "inputtext."

How to use Locators in Selenium IDE

Step 2. In Selenium IDE, enter "css=input.inputtext" in the Target box and click Find. Selenium IDE should be able to recognize the Email or Phone text box.

How to use Locators in Selenium IDE

Take note that when multiple elements have the same HTML tag and name, only the first element in source code will be recognized. Using Firebug, inspect the Password text box in Facebook and notice that it has the same name as the Email or Phone text box.

How to use Locators in Selenium IDE

The reason why only the Email or Phone text box was highlighted in the previous illustration is that it comes first in Facebook's page source.

How to use Locators in Selenium IDE

Locating by CSS Selector - Tag and Attribute

This strategy uses the HTML tag and a specific attribute of the element to be accessed.

Syntax

Description

css=tag[attribute=value]

  • tag = the HTML tag of the element being accessed
  • [ and ] = square brackets within which a specific attribute and its corresponding value will be placed
  • attribute = the attribute to be used. It is advisable to use an attribute that is unique to the element such as a name or ID.
  • value = the corresponding value of the chosen attribute.

 

Step 1. Navigate to Mercury Tours' Registration page (http://demo.guru99.com/test/newtours/register.php) and inspect the "Last Name" text box. Take note of its HTML tag ("input" in this case) and its name ("lastName").

How to use Locators in Selenium IDE

Step 2. In Selenium IDE, enter "css=input[name=lastName]" in the Target box and click Find. Selenium IDE should be able to access the Last Name box successfully.

How to use Locators in Selenium IDE

When multiple elements have the same HTML tag and attribute, only the first one will be recognized. This behavior is similar to locating elements using CSS selectors with the same tag and class.

Locating by CSS Selector - tag, class, and attribute

SyntaxDescription
css=tag.class[attribute=value]
  • tag = the HTML tag of the element being accessed
  • . = the dot sign. This should always be present when using a CSS Selector with class
  • class = the class of the element being accessed
  • [ and ] = square brackets within which a specific attribute and its corresponding value will be placed
  • attribute = the attribute to be used. It is advisable to use an attribute that is unique to the element such as a name or ID.
  • value = the corresponding value of the chosen attribute.

Step 1. Go to the demo page http://demo.guru99.com/test/facebook.html and use Firebug to inspect the 'Email or Phone' and 'Password' input boxes. Take note of their HTML tag, class, and attributes. For this example, we will select their 'tabindex' attributes.

How to use Locators in Selenium IDE

Step 2.  We will access the 'Email or Phone' text box first. Thus, we will use a tabindex value of 1. Enter "css=input.inputtext[tabindex=1]" in Selenium IDE's Target box and click Find. The 'Email or Phone' input box should be highlighted.

How to use Locators in Selenium IDE

Step 3. To access the Password input box, simply replace the value of the tabindex attribute. Enter "css=input.inputtext[tabindex=2]" in the Target box and click on the Find button. Selenium IDE must be able to identify the Password text box successfully.

How to use Locators in Selenium IDE

Locating by CSS Selector - inner text

As you may have noticed, HTML labels are seldom given id, name, or class attributes. So, how do we access them? The answer is through the use of their inner texts. Inner texts are the actual string patterns that the HTML label shows on the page.

Syntax

Description

css=tag:contains("inner text")

  • tag = the HTML tag of the element being accessed
  • inner text = the inner text of the element

 

Step 1. Navigate to Mercury Tours' homepage (http://demo.guru99.com/test/newtours/) and use Firebug to investigate the "Password" label. Take note of its HTML tag (which is "font" in this case) and notice that it has no class, id, or name attributes.

How to use Locators in Selenium IDE

Step 2. Type css=font:contains("Password:") into Selenium IDE's Target box and click Find. Selenium IDE should be able to access the Password label as shown in the image below.

How to use Locators in Selenium IDE

Step 3. This time, replace the inner text with "Boston" so that your Target will now become "css=font:contains("Boston")". Click Find. You should notice that the "Boston to San Francisco" label becomes highlighted. This shows you that Selenium IDE can access a long label even if you just indicated the first word of its inner text.

How to use Locators in Selenium IDE

Locating by DOM (Document Object Model)

The Document Object Model (DOM), in simple terms, is the way by which HTML elements are structured. Selenium IDE is able to use the DOM in accessing page elements. If we use this method, our Target box will always start with "dom=document..."; however, the "dom=" prefix is normally removed because Selenium IDE is able to automatically interpret anything that starts with the keyword "document" to be a path within the DOM anyway.

There are four basic ways to locate an element through DOM:

Locating by DOM - getElementById

Let us focus on the first method - using the getElementById method. The syntax would be:

Syntax

Description

document.getElementById("id of the element")

id of the element = this is the value of the ID attribute of the element to be accessed. This value should always be enclosed in a pair of parentheses ("").

 

Step 1. Use this demo page http://demo.guru99.com/test/facebook.html Navigate to it and use Firebug to inspect the "Keep me logged in" check box. Take note of its ID.

How to use Locators in Selenium IDE

We can see that the ID we should use is "persist_box".

Step 2. Open Selenium IDE and in the Target box, enter "document.getElementById("persist_box")" and click Find. Selenium IDE should be able to locate the "Keep me logged in" check box. Though it cannot highlight the interior of the check box, Selenium IDE can still surround the element with a bright green border as shown below.

How to use Locators in Selenium IDE

Locating by DOM - getElementsByName

The getElementById method can access only one element at a time, and that is the element with the ID that you specified. The getElementsByName method is different. It collects an array of elements that have the name that you specified. You access the individual elements using an index which starts at 0.

 

How to use Locators in Selenium IDE

   getElementById

  • It will get only one element for you.
  • That element bears the ID that you specified inside the parentheses of getElementById().

How to use Locators in Selenium IDE

  getElementsByName

  • It will get a collection of elements whose names are all the same.
  • Each element is indexed with a number starting from 0 just like an array
  • You specify which element you wish to access by putting its index number into the square brackets in getElementsByName's syntax below.

 

Syntax

Description

document.getElementsByName("name")[index]

  • name = name of the element as defined by its 'name' attribute
  • index = an integer that indicates which element within getElementsByName's array will be used.

 

Step 1. Navigate to Mercury Tours' Homepage and login using "tutorial" as the username and password. Firefox should take you to the Flight Finder screen.

Step 2. Using Firebug, inspect the three radio buttons at the bottom portion of the page (Economy class, Business class, and First class radio buttons). Notice that they all have the same name which is "servClass".

How to use Locators in Selenium IDE

Step 3. Let us access the "Economy class" radio button first. Of all these three radio buttons, this element comes first, so it has an index of 0. In Selenium IDE, type "document.getElementsByName("servClass")[0]" and click the Find button. Selenium IDE should be able to identify the Economy class radio button correctly.

How to use Locators in Selenium IDE

Step 4. Change the index number to 1 so that your Target will now become document.getElementsByName("servClass")[1]. Click the Find button, and Selenium IDE should be able to highlight the "Business class" radio button, as shown below.

How to use Locators in Selenium IDE

Locating by DOM - dom:name

As mentioned earlier, this method will only apply if the element you are accessing is contained within a named form.

Syntax

Description

document.forms["name of the form"].elements["name of the element"]

  • name of the form = the value of the name attribute of the form tag that contains the element you want to access
  • name of the element = the value of the name attribute of the element you wish to access

 

Step 1. Navigate to Mercury Tours homepage (http://demo.guru99.com/test/newtours/) and use Firebug to inspect the User Name text box. Notice that it is contained in a form named "home."

How to use Locators in Selenium IDE

Step 2. In Selenium IDE, type "document.forms["home"].elements["userName"]" and click the Find button. Selenium IDE must be able to access the element successfully.

How to use Locators in Selenium IDE

Locating by DOM - dom:index

This method applies even when the element is not within a named form because it uses the form's index and not its name.

Syntax

Description

document.forms[index of the form].elements[index of the element]

  • index of the form = the index number (starting at 0) of the form with respect to the whole page
  • index of the element = the index number (starting at 0) of the element with respect to the whole form that contains it

 

We shall access the "Phone" text box within Mercury Tours Registration page. The form in that page has no name and ID attribute, so this will make a good example.

Step 1. Navigate to Mercury Tours Registration page and inspect the Phone text box. Notice that the form containing it has no ID and name attributes.

How to use Locators in Selenium IDE

Step 2. Enter "document.forms[0].elements[3]" in Selenium IDE's Target box and click the Find button. Selenium IDE should be able to access the Phone text box correctly.

How to use Locators in Selenium IDE

Step 3. Alternatively, you can use the element's name instead of its index and obtain the same result. Enter "document.forms[0].elements["phone"]" in Selenium IDE's Target box. The Phone text box should still become highlighted.

How to use Locators in Selenium IDE

Locating by XPath

XPath is the language used when locating XML (Extensible Markup Language) nodes. Since HTML can be thought of as an implementation of XML, we can also use XPath in locating HTML elements.

        Advantage: It can access almost any element, even those without class, name, or id attributes.

        Disadvantage: It is the most complicated method of identifying elements because of too many different rules and considerations.

Fortunately, Firebug can automatically generate XPath locators. In the following example, we will access an image that cannot possibly be accessed through the methods we discussed earlier.

Step 1. Navigate to Mercury Tours Homepage and use Firebug to inspect the orange rectangle to the right of the yellow "Links" box. Refer to the image below.

How to use Locators in Selenium IDE

Step 2. Right click on the element's HTML code and then select the "Copy XPath" option.

How to use Locators in Selenium IDE

Step 3. In Selenium IDE, type one forward slash "/" in the Target box then paste the XPath that we copied in the previous step. The entry in your Target box should now begin with two forward slashes "//".

How to use Locators in Selenium IDE

Step 4. Click on the Find button. Selenium IDE should be able to highlight the orange box as shown below.

How to use Locators in Selenium IDE

Summary

Syntax for Locator Usage

Method

Target Syntax

Example

By ID id= id_of_the_element id=email
By Name name=name_of_the_element name=userName
By Name Using Filters name=name_of_the_elementfilter=value_of_filter name=tripType value=oneway
By Link Text link=link_text link=REGISTER
Tag and ID css=tag#id css=input#email
Tag and Class css=tag.class css=input.inputtext
Tag and Attribute css=tag[attribute=value] css=input[name=lastName]
Tag, Class, and Attribute css=tag.class[attribute=value] css=input.inputtext[tabindex=1]

 

Why do you need Find Element/s command?

Interaction with a web page requires a user to locate the web element. Find Element command is used to uniquely identify a (one) web element within the web page. Whereas, Find Elements command is used to uniquely identify the list of web elements within the web page. There are multiple ways to uniquely identify a web element within the web page such as ID, Name, Class Name, Link Text, Partial Link Text, Tag Name and XPATH.

FindElement command syntax:

Find Element command takes in the By object as the parameter and returns an object of type WebElement. By object in turn can be used with various locator strategies such as ID, Name, Class Name, XPATH etc. Below is the syntax of FindElement command in Selenium web driver.

WebElement elementName = driver.findElement(By.LocatorStrategy("LocatorValue"));

Locator Strategy can by any of the following values.

Locator Value is the unique value using which a web element can be identified. It is the responsibility of developers and testers to make sure that web elements are uniquely identifiable using certain properties such as ID or name.

Example:

WebElement loginLink = driver.findElement(By.linkText("Login"));

FindElements command syntax:

Find Elements command takes in By object as the parameter and returns a list of web elements. It returns an empty list if there are no elements found using the given locator strategy and locator value. Below is the syntax of find elements command.

List<WebElement> elementName = driver.findElements(By.LocatorStrategy("LocatorValue"));

Example:

List<WebElement> listOfElements = driver.findElements(By.xpath("//div"));

Find element Vs Find elements

Below are the major differences between find element and find elements commands.

Find ElementFind Elements
Returns the first most web element if there are multiple web elements found with the same locator Returns a list of web elements
Throws exception NoSuchElementException if there are no elements matching the locator strategy Returns an empty list if there are no web elements matching the locator strategy
It will only find one web element It will find a collection of elements whose match the locator strategy.
Not Applicable Each Web element is indexed with a number starting from 0 just like an array

Example: How to use Find Element command

The following application is used for demo purpose

http://demo.guru99.com/test/ajax.html

Scenario:

1. Open the AUT

2. Find and click radio button

package com.sample.stepdefinitions;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class NameDemo {

public static void main(String[] args) {
// TODO Auto-generated method stub

System.setProperty("webdriver.chrome.driver", "D:\\3rdparty\\chrome\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.manage().window().maximize();

driver.get("http://demo.guru99.com/test/ajax.html");

// Find the radio button for “No” using its ID and click on it
System.out.println (By.Name("name"));


}

}

Example: How to use Find Elements command

Scenario:

1. Open the URL for Application Under Test

2. Find the text of radio buttons and print it onto the output console

package com.sample.stepdefinitions;

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;

public class NameDemo {

public static void main(String[] args) {

    System.setProperty("webdriver.chrome.driver", "X://chromedriver.exe");
    WebDriver driver = new ChromeDriver();
    driver.get("http://demo.guru99.com/test/ajax.html");
    List<WebElement> elements = driver.findElements(By.name("name"));
    System.out.println("Number of elements:" +elements.size());

    for (int i=0; i<elements.size();i++){
      System.out.println("Radio button text:" + elements.get(i).getAttribute("value"));
    }
  }
}

Summary:

Forms are the fundamental web elements to receive information from the website visitors. Web forms have different GUI elements like Text boxes, Password fields, Checkboxes, Radio buttons, dropdowns, file inputs, etc.

We will see how to access these different form elements using Selenium Web Driver with Java. Selenium encapsulates every form element as an object of WebElement.It provides API to find the elements and take action on them like entering text into text boxes, clicking the buttons, etc. We will see the methods that are available to access each form element.

In this tutorial, we will see how to identify the following form elements

Introduction to WebElement, findElement(), findElements()

Selenium Web Driver encapsulates a simple form element as an object of WebElement.

There are various techniques by which the WebDriver identifies the form elements based on the different properties of the Web elements like ID, Name, Class, XPath, Tagname, CSS Selectors, link Text, etc.

Web Driver provides the following two methods to find the elements.

Let's see the code snippets to get a single element – Text Field in a web page as an object of WebElement using findElement() method. We shall cover the findElements() method of finding multiple elements in subsequent tutorials.

Step 1: We need to import this package to create objects of Web Elements

Step 2: We need to call the findElement() method available on the WebDriver class and get an object of WebElement.

Refer below to see how it is done.

Input Box

Input boxes refer to either of these two types:

  1. Text Fields- text boxes that accept typed values and show them as they are.
  2. Password Fields- text boxes that accept typed values but mask them as a series of special characters (commonly dots and asterisks) to avoid sensitive values to be displayed.

Locators

The method findElement() takes one parameter which is a locator to the element. Different locators like By.id(), By.name(), By.xpath(), By.CSSSelector() etc. locate the elements in the page using their properties like`````` id, name or path, etc.

You can use plugins like Fire path to get help with getting the id, xpath, etc. of the elements.

Using the example site http://demo.guru99.com/test/login.html given below is the code to locate the "Email address" text field using the id locator and the "Password "field using the name locator.

  1. Email text field is located by Id
  2. Password field is located by name

Entering Values in Input Boxes

To enter text into the Text Fields and Password Fields, sendKeys() is the method available on the WebElement.

Using the same example of http://demo.guru99.com/test/login.html site, here is how we find the Text field and Password fields and enter values into them.

  1. Find the "Email Address" Text field using the id locator.
  2. Find the "Password" field using the name locator
  3. Enter text into the "Email Address" using the sendKeys() method.
  4. Enter a password into the "Password" field using the sendKeys() method.

Deleting Values in Input Boxes

The clear() method is used to delete the text in an input box. This method does not need a parameter. The code snippet below will clear out the text from the Email or Password fields

Buttons

The buttons can be accessed using the click() method.

In the example above

  1. Find the button to Sign in
  2. Click on the "Sign-in" Button in the login page of the site to login to the site.

Submit Buttons

Submit buttons are used to submit the entire form to the server. We can either use the click () method on the web element like a normal button as we have done above or use the submit () method on any web element in the form or on the submit button itself.

When submit() is used, WebDriver will look up the DOM to know which form the element belongs to, and then trigger its submit function.

Complete Code

Here is the complete working code

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class Form {				
    public static void main(String[] args) {									
    		
    	// declaration and instantiation of objects/variables		
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        String baseUrl = "http://demo.guru99.com/test/login.html";					
        driver.get(baseUrl);					

        // Get the WebElement corresponding to the Email Address(TextField)		
        WebElement email = driver.findElement(By.id("email"));							

        // Get the WebElement corresponding to the Password Field		
        WebElement password = driver.findElement(By.name("passwd"));							

        email.sendKeys("abcd@gmail.com");					
        password.sendKeys("abcdefghlkjl");					
        System.out.println("Text Field Set");					
         
        // Deleting values in the text box		
        email.clear();			
        password.clear();			
        System.out.println("Text Field Cleared");					

        // Find the submit button		
        WebElement login = driver.findElement(By.id("SubmitLogin"));							
                    		
        // Using click method to submit form		
        email.sendKeys("abcd@gmail.com");					
        password.sendKeys("abcdefghlkjl");					
        login.click();			
        System.out.println("Login Done with Click");					
        		
        //using submit method to submit the form. Submit used on password field		
        driver.get(baseUrl);					
        driver.findElement(By.id("email")).sendKeys("abcd@gmail.com");							
        driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");							
        driver.findElement(By.id("SubmitLogin")).submit();					
        System.out.println("Login Done with Submit");					
         
		//driver.close();		
        		
    }		
}

Troubleshooting

If you encounter NoSuchElementException() while finding elements, it means that the element is not found in the page at the point the Web driver accessed the page.

  1. Check your locator again using Firepath or Inspect Element in Chrome.
  2. Check whether the value you used in the code is different from the one for the element in Firepath now.
  3. Some properties are dynamic for few elements. In case, you find that the value is different and is changing dynamically, consider using By.xpath() or By.cssSelector() which are more reliable but complex ways.
  4. Sometimes, it could be a wait issue too i.e., the Web driver executed your code even before the page loaded completely, etc.
  5. Add a wait before findElement() using implicit or explicit waits.

Summary

ElementCommandDescription
Input Box sendKeys() used to enter values onto text boxes
clear() used to clear text boxes of its current value
Links click() used to click on the link and wait for page load to complete before proceeding to the next command.
Submit Button submit()

In this tutorial, we will see how to identify the following form elements

Radio Button

Radio Buttons too can be toggled on by using the click() method.

Using http://demo.guru99.com/test/radio.html for practise, see that radio1.click() toggles on the "Option1" radio button. radio2.click() toggles on the "Option2" radio button leaving the "Option1" unselected.

Check Box

Toggling a check box on/off is also done using the click() method.

The code below will click on Facebook's "Keep me logged in" check box twice and then output the result as TRUE when it is toggled on, and FALSE if it is toggled off.

isSelected() method is used to know whether the Checkbox is toggled on or off.

Here is another example: http://demo.guru99.com/test/radio.html

Complete Code

Here is the complete working code

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class Form {				
    public static void main(String[] args) {									
    		
    	// declaration and instantiation of objects/variables		
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					

        driver.get("http://demo.guru99.com/test/radio.html");					
        WebElement radio1 = driver.findElement(By.id("vfb-7-1"));							
        WebElement radio2 = driver.findElement(By.id("vfb-7-2"));							
        		
        //Radio Button1 is selected		
        radio1.click();			
        System.out.println("Radio Button Option 1 Selected");					
        		
        //Radio Button1 is de-selected and Radio Button2 is selected		
        radio2.click();			
        System.out.println("Radio Button Option 2 Selected");					
        		
        // Selecting CheckBox		
        WebElement option1 = driver.findElement(By.id("vfb-6-0"));							

        // This will Toggle the Check box 		
        option1.click();			

        // Check whether the Check box is toggled on 		
        if (option1.isSelected()) {					
            System.out.println("Checkbox is Toggled On");					

        } else {			
            System.out.println("Checkbox is Toggled Off");					
        }		
         
        		
        		
        //Selecting Checkbox and using isSelected Method		
        driver.get("http://demo.guru99.com/test/facebook.html");					
        WebElement chkFBPersist = driver.findElement(By.id("persist_box"));							
        for (int i=0; i<2; i++) {											
            chkFBPersist.click (); 			
            System.out.println("Facebook Persists Checkbox Status is -  "+chkFBPersist.isSelected());							
        }		
		//driver.close();		
        		
    }		
}

Troubleshooting

If you encounter NoSuchElementException() while finding elements, it means that the element is not found in the page at the point the Web driver accessed the page.

  1. Check your locator again using Firepath or Inspect Element in Chrome.
  2. Check whether the value you used in the code is different from the one for the element in Firepath now.
  3. Some properties are dynamic for few elements. In case, you find that the value is different and is changing dynamically, consider using By.xpath() or By.cssSelector() which are more reliable but complex ways.
  4. Sometimes, it could be a wait issue too i.e., the Web driver executed your code even before the page loaded completely, etc.
  5. Add a wait before findElement() using implicit or explicit waits.

Summary

ElementCommandDescription
Check Box, Radio Button click() used to toggle the element on/off

 

 

Accessing Image Links

Image links are the links in web pages represented by an image which when clicked navigates to a different window or page.

Since they are images, we cannot use the By.linkText() and By.partialLinkText() methods because image links basically have no link texts at all.

In this case, we should resort to using either By.cssSelector or By.xpath. The first method is more preferred because of its simplicity.

In the example below, we will access the "Facebook" logo on the upper left portion of Facebook's Password Recovery page.

We will use By.cssSelector and the element's "title" attribute to access the image link. And then we will verify if we are taken to Facebook's homepage.

package newproject;
import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		

public class MyClass {				
    		
    public static void main(String[] args) {									
        String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        driver.get(baseUrl);					
        //click on the "Facebook" logo on the upper left portion		
			driver.findElement(By.cssSelector("a[title=\"Go to Facebook home\"]")).click();					

			//verify that we are now back on Facebook's homepage		
			if (driver.getTitle().equals("Facebook - log in or sign up")) {							
            System.out.println("We are back at Facebook's homepage");					
        } else {			
            System.out.println("We are NOT in Facebook's homepage");					
        }		
				driver.close();		

    }		
}

Result

Conclusion:

This is all to clicking images. Accessing image link is done using By.cssSelector() and By.xpath() methods.

Links Matching a Criterion

Links can be accessed using an exact or partial match of their link text. The examples below provide scenarios where multiple matches would exist and would explain how WebDriver would deal with them.

In this tutorial, we will learn the available methods to find and access the Links using Webdriver. Also, we will discuss some of the common problems faced while accessing Links and will further discuss on how to resolve them.

 

Here is what you will learn-

Accessing links using Exact Text Match: By.linkText()

Accessing links using their exact link text is done through the By.linkText() method. However, if there are two links that have the very same link text, this method will only access the first one. Consider the HTML code below

When you try to run the WebDriver code below, you will be accessing the first "click here" link

Code:

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		

public class MyClass {				
    		
    public static void main(String[] args) {									
        String baseUrl = "http://demo.guru99.com/test/link.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        driver.get(baseUrl);					
        driver.findElement(By.linkText("click here")).click();					
        System.out.println("title of page is: " + driver.getTitle());							
        driver.quit();			
    }		

}			

Here is how it works-

As a result, you will automatically be taken to Google.

Accessing links using Partial Text Match: By.partialLinkText()

Accessing links using a portion of their link text is done using the By.partialLinkText() method. If you specify a partial link text that has multiple matches, only the first match will be accessed. Consider the HTML code below.

When you execute the WebDriver code below, you will still be taken to Google.

Code:

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		

public class P1 {				
    		
    public static void main(String[] args) {									
        String baseUrl = "http://demo.guru99.com/test/accessing-link.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        driver.get(baseUrl);					
        driver.findElement(By.partialLinkText("here")).click();					
        System.out.println("Title of page is: " + driver.getTitle());							
        driver.quit();			
    }		
}

How to get Multiple links with the same Link Text

So, how to get around the above problem? In cases where there are multiple links with the same link text, and we want to access the links other than the first one, how do we go about it?

In such cases, generally, different locators viz... By.xpath(), By.cssSelector() or By.tagName() are used.

Most commonly used is By.xpath(). It is the most reliable one but it looks complex and non-readable too.

Case-sensitivity for Link Text

The parameters for By.linkText() and By.partialLinkText() are both case-sensitive, meaning that capitalization matters. For example, in Mercury Tours' homepage, there are two links that contain the text "egis" - one is the "REGISTER" link found at the top menu, and the other is the "Register here" link found at the lower right portion of the page.

Though both links contain the character sequence "egis," one is the "By.partialLinkText()" method will access these two links separately depending on the capitalization of the characters. See the sample code below.

Code

public static void main(String[] args) {								
        String baseUrl = "http://demo.guru99.com/test/newtours/";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        driver.get(baseUrl);					
        String theLinkText = driver.findElement(By					
                .partialLinkText("egis"))			
                .getText();		
        System.out.println(theLinkText);					
        theLinkText = driver.findElement(By					
                .partialLinkText("EGIS"))			
                .getText();		
        System.out.println(theLinkText);					

        driver.quit();			

    }

Links Outside and Inside a Block

The latest HTML5 standard allows the <a> tags to be placed inside and outside of block-level tags like <div>, <p>, or <h3>. The "By.linkText()" and "By.partialLinkText()" methods can access a link located outside and inside these block-level elements. Consider the HTML code below.

The WebDriver code below accesses both of these links using By.partialLinkText() method.

Code:

import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		

public class MyClass {				
    		
    public static void main(String[] args) {									
        String baseUrl = "http://demo.guru99.com/test/block.html";					
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        driver.get(baseUrl);					
        driver.findElement(By.partialLinkText("Inside")).click();					
        System.out.println(driver.getTitle());					
        driver.navigate().back();			
        driver.findElement(By.partialLinkText("Outside")).click();					
        System.out.println(driver.getTitle());					
        driver.quit();			
    }		
}		

The output above confirms that both links were accessed successfully because their respective page titles were retrieved correctly.

Summary

In this tutorial, we will learn handling Keyboard and Mouse Event in Selenium Webdriver

Handling Keyboard & Mouse Events

Handling special keyboard and mouse events are done using the Advanced User Interactions API. It contains the Actions and the Action classes that are needed when executing these events. The following are the most commonly used keyboard and mouse events provided by the Actions class.

MethodDescription
clickAndHold() Clicks (without releasing) at the current mouse location.
contextClick() Performs a context-click at the current mouse location. (Right Click Mouse Action)
doubleClick() Performs a double-click at the current mouse location.
dragAndDrop(source, target) Performs click-and-hold at the location of the source element, moves to the location of the target element, then releases the mouse.

Parameters:

source- element to emulate button down at.

target- element to move to and release the mouse at.
dragAndDropBy(source, x-offset, y-offset) Performs click-and-hold at the location of the source element, moves by a given offset, then releases the mouse.

Parameters:

source- element to emulate button down at.

xOffset- horizontal move offset.

yOffset- vertical move offset.
keyDown(modifier_key) Performs a modifier key press. Does not release the modifier key - subsequent interactions may assume it's kept pressed.

Parameters:

modifier_key - any of the modifier keys (Keys.ALT, Keys.SHIFT, or Keys.CONTROL)
keyUp(modifier _key) Performs a key release.

Parameters:

modifier_key - any of the modifier keys (Keys.ALT, Keys.SHIFT, or Keys.CONTROL)
moveByOffset(x-offset, y-offset) Moves the mouse from its current position (or 0,0) by the given offset.

Parameters:

x-offset- horizontal offset. A negative value means moving the mouse left.

y-offset- vertical offset. A negative value means moving the mouse down.
moveToElement(toElement) Moves the mouse to the middle of the element. 

Parameters:

toElement- element to move to.
release() Releases the depressed left mouse button at the current mouse location
sendKeys(onElement, charsequence) Sends a series of keystrokes onto the element. 

Parameters:

onElement - element that will receive the keystrokes, usually a text field

charsequence - any string value representing the sequence of keystrokes to be sent

In the following example, we shall use the moveToElement() method to mouse-over on one Mercury Tours' table rows. See the example below.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

The cell shown above is a portion of a <TR> element. If not hovered, its color is #FFC455 (orange). After hovering, the cell's color becomes transparent. It becomes the same color as the blue background of the whole orange table.

Step 1: Import the Actions and Action classes.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

Step 2: Instantiate a new Actions object.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

Step 3: Instantiate an Action using the Actions object in step 2.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

In this case, we are going to use the moveToElement() method because we are simply going to mouse-over the "Home" link. The build() method is always the final method used so that all the listed actions will be compiled into a single step.

Step 4: Use the perform() method when executing the Action object we designed in Step 3.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

Below is the whole WebDriver code to check the background color of the <TR> element before and after the mouse-over.

package newproject;

import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class PG7 {
    
    public static void main(String[] args) {
        String baseUrl = "http://demo.guru99.com/test/newtours/";
        System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
                WebDriver driver = new FirefoxDriver();

                driver.get(baseUrl);           
                WebElement link_Home = driver.findElement(By.linkText("Home"));
                WebElement td_Home = driver
                        .findElement(By
                        .xpath("//html/body/div"
                        + "/table/tbody/tr/td"
                        + "/table/tbody/tr/td"
                        + "/table/tbody/tr/td"
                        + "/table/tbody/tr"));    
                 
                Actions builder = new Actions(driver);
                Action mouseOverHome = builder
                        .moveToElement(link_Home)
                        .build();
                 
                String bgColor = td_Home.getCssValue("background-color");
                System.out.println("Before hover: " + bgColor);        
                mouseOverHome.perform();        
                bgColor = td_Home.getCssValue("background-color");
                System.out.println("After hover: " + bgColor);
                driver.close();
        }
}

The output below clearly states that the background color became transparent after the mouse-over.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

Building a Series of Multiple Actions

You can build a series of actions using the Action and Actions classes. Just remember to close the series with the build() method. Consider the sample code below.

Keyboard & Mouse Event using Action Class in Selenium Webdriver

public static void main(String[] args) {
String baseUrl = "http://www.facebook.com/"; 
WebDriver driver = new FirefoxDriver();

driver.get(baseUrl);
WebElement txtUsername = driver.findElement(By.id("email"));

Actions builder = new Actions(driver);
Action seriesOfActions = builder
	.moveToElement(txtUsername)
	.click()
	.keyDown(txtUsername, Keys.SHIFT)
	.sendKeys(txtUsername, "hello")
	.keyUp(txtUsername, Keys.SHIFT)
	.doubleClick(txtUsername)
	.contextClick()
	.build();
	
seriesOfActions.perform() ;

}

Keyboard & Mouse Event using Action Class in Selenium Webdriver

Summary

In this tutorial, we will learn How to deal with file uploads and downloads.

Uploading Files

For this section, we will use http://demo.guru99.com/test/upload/ as our test application. This site easily allows any visitor to upload files without requiring them to sign up.

Uploading files in WebDriver is done by simply using the sendKeys() method on the file-select input field to enter the path to the file to be uploaded.

 

Handle File upload popup in Selenium Webdriverhandle file upload popup in selenium webdriver

Let's say we wish to upload the file "C:\newhtml.html". Our WebDriver code should be like the one shown below.

package newproject;
import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
public class PG9 {
    public static void main(String[] args) {
        System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
        String baseUrl = "http://demo.guru99.com/test/upload/";
        WebDriver driver = new FirefoxDriver();

        driver.get(baseUrl);
        WebElement uploadElement = driver.findElement(By.id("uploadfile_0"));

        // enter the file path onto the file-selection input field
        uploadElement.sendKeys("C:\\newhtml.html");

        // check the "I accept the terms of service" check box
        driver.findElement(By.id("terms")).click();

        // click the "UploadFile" button
        driver.findElement(By.name("send")).click();
        }
}

After running this script, you should be able to upload the file successfully and you should get a message similar to this.

Remember following two things when uploading files in WebDriver

  1. There is no need to simulate the clicking of the "Browse" button. WebDriver automatically enters the file path onto the file-selection text box of the <input type="file"> element
  2. When setting the file path in your Java IDE, use the proper escape character for the back-slash.

Downloading Files

WebDriver has no capability to access the Download dialog boxes presented by browsers when you click on a download link or button. However, we can bypass these dialog boxes using a separate program called "wget".

What is Wget?

Wget is a small and easy-to-use command-line program used to automate downloads. Basically, we will access Wget from our WebDriver script to perform the download process.

Setting up Wget

Step 1: In your C Drive, create a new folder and name it as "Wget".

Download wget.exe from here and Place it in the Wget folder you created from the step above.

Step 2: Open Run by pressing windows key + "R" ; type in "cmd & click ok

Type in the command "cd /" to move to the root directory

Step 3: Type in the command to check whether the given setup is working

cmd /c C:\\Wget\\wget.exe -P C: --no-check-certificate http://demo.guru99.com/selenium/msgr11us.exe

There seems to be an issue writing into C drive.

Step 4: You need to debug the wget errors in command line before you execute the code using Selenium Webdriver. These errors will persist in Eclipse and the error messages will not be as informative. Best to first get wget working using command line. If it works in command line it will definitely work in Eclipse.

In our example, as show in step 3, there is a problem writing into C drive. Let's change the download location to D drive and check results. 

cmd /c C:\\Wget\\wget.exe -P D: --no-check-certificate http://demo.guru99.com/selenium/msgr11us.exe

Messenger was downloaded successfully.

Before you proceed further don't forget to delete the downloaded file

Using WebDriver and Wget

In the following example, we will use WebDriver and wget to download a popular chat software called Yahoo Messenger. Our base URL shall be http://demo.guru99.com/test/yahoo.html.

Step 1

Import the "java.io.IOException" package because we will have to catch an IOException later in Step 4.

Step 2

Use getAttribute() to obtain the "href" value of the download link and save it as a String variable. In this case, we named the variable as "sourceLocation".

Step 3

Set-up the syntax for wget using the following command.

Step 4

Initiate the download process by calling wget from our WebDriver code.

To sum it all up, your WebDriver code could look like the one shown below.

package newproject;
import java.io.IOException;

import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;
public class PG8 {
    public static void main(String[] args) {
        
        System.setProperty("webdriver.firefox.marionette","C:\\geckodriver.exe");
                String baseUrl = "http://demo.guru99.com/test/yahoo.html";
        WebDriver driver = new FirefoxDriver();

        driver.get(baseUrl);
        WebElement downloadButton = driver.findElement(By
        .id("messenger-download"));
        String sourceLocation = downloadButton.getAttribute("href");
        String wget_command = "cmd /c C:\\Wget\\wget.exe -P D: --no-check-certificate " + sourceLocation;

        try {
        Process exec = Runtime.getRuntime().exec(wget_command);
        int exitVal = exec.waitFor();
        System.out.println("Exit value: " + exitVal);
        } catch (InterruptedException | IOException ex) {
        System.out.println(ex.toString());
        }
        driver.close();
        }
        
}

After executing this code, check your D drive and verify that the Yahoo Messenger installer was successfully downloaded there.

 

Summary

In Selenium automation, if the elements are not found by the general locators like id, class, name, etc. then XPath is used to find an element on the web page .

In this tutorial, we will learn about the xpath and different XPath expression to find the complex or dynamic elements, whose attributes changes dynamically on refresh or any operations.

In this tutorial, you will learn-

What is XPath?

XPath is defined as XML pathIt is a syntax or language for finding any element on the web page using XML path expression. XPath is used to find the location of any element on a webpage using HTML DOM structure. The basic format of XPath is explained below with screen shot.

XPath in Selenium WebDriver: Complete Tutorial

Syntax for XPath:

XPath contains the path of the element situated at the web page. Standard syntax for creating XPath is.

Xpath=//tagname[@attribute='value']

To find the element on web pages accurately there are different types of locators:

XPath Locators Find different elements on web page
ID To find the element by ID of the element
Classname To find the element by Classname of the element
Name To find the element by name of the element
Link text To find the element by text of the link
XPath XPath required for finding the dynamic element and traverse between various elements of the web page
CSS path CSS path also locates elements having no name, class or ID.

Types of X-path

There are two types of XPath:

1) Absolute XPath

2) Relative XPath

Absolute XPath:

It is the direct way to find the element, but the disadvantage of the absolute XPath is that if there are any changes made in the path of the element then that XPath gets failed.

The key characteristic of XPath is that it begins with the single forward slash(/) ,which means you can select the element from the root node.

Below is the example of an absolute xpath expression of the element shown in the below screen.

Absolute xpath:

html/body/div[1]/section/div[1]/div/div/div/div[1]/div/div/div/div/div[3]/div[1]/div/h4[1]/b

XPath in Selenium WebDriver: Complete Tutorial

Relative xpath:

For Relative Xpath the path starts from the middle of the HTML DOM structure. It starts with the double forward slash (//), which means it can search the element anywhere at the webpage.

You can start from the middle of the HTML DOM structure and no need to write long xpath.

Below is the example of a relative XPath expression of the same element shown in the below screen. This is the common format used to find element through a relative XPath.

Relative xpath: //*[@class='featured-box']//*[text()='Testing']

XPath in Selenium WebDriver: Complete Tutorial 

What are XPath axes.

XPath axes search different nodes in XML document from current context node. XPath Axes are the methods used to find dynamic elements, which otherwise not possible by normal XPath method having no ID , Classname, Name, etc.

Axes methods are used to find those elements, which dynamically change on refresh or any other operations. There are few axes methods commonly used in Selenium Webdriver like child, parent, ancestor, sibling, preceding, self, etc.

Using XPath Handling complex & Dynamic elements in Selenium

1) Basic XPath:

XPath expression select nodes or list of nodes on the basis of attributes like ID , Name, Classname, etc. from the XML document as illustrated below.

Xpath=//input[@name='uid']

Here is a link to access the page http://demo.guru99.com/v1/

XPath in Selenium WebDriver: Complete Tutorial 

Some more basic xpath expressions:

Xpath=//input[@type='text']				
Xpath=	//label[@id='message23']
Xpath=	//input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='http://demo.guru99.com/']
Xpath= //img[@src='//cdn.guru99.com/images/home/java.png']

2) Contains():

Contains() is a method used in XPath expression. It is used when the value of any attribute changes dynamically, for example, login information.

The contain feature has an ability to find the element with partial text as shown in below example.

In this example, we tried to identify the element by just using partial text value of the attribute. In the below XPath expression partial value 'sub' is used in place of submit button. It can be observed that the element is found successfully.

Complete value of 'Type' is 'submit' but using only partial value 'sub'.

Xpath=//*[contains(@type,'sub')]  

Complete value of 'name' is 'btnLogin' but using only partial value 'btn'.

Xpath=//*[contains(@name,'btn')]

In the above expression, we have taken the 'name' as an attribute and 'btn' as an partial value as shown in the below screenshot. This will find 2 elements (LOGIN & RESET) as their 'name' attribute begins with 'btn'.

XPath in Selenium WebDriver: Complete Tutorial 

Similarly, in the below expression, we have taken the 'id' as an attribute and 'message' as a partial value. This will find 2 elements ('User-ID must not be blank' & 'Password must not be blank') as its 'name' attribute begins with 'message'.

Xpath=//*[contains(@id,'message')]				

XPath in Selenium WebDriver: Complete Tutorial 

In the below expression, we have taken the "text" of the link as an attribute and 'here' as a partial value as shown in the below screenshot. This will find the link ('here') as it displays the text 'here'.

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]				

XPath in Selenium WebDriver: Complete Tutorial 

3) Using OR & AND:

In OR expression, two conditions are used, whether 1st condition OR 2nd condition should be true. It is also applicable if any one condition is true or maybe both. Means any one condition should be true to find the element.

In the below XPath expression, it identifies the elements whose single or both conditions are true.

Xpath=//*[@type='submit' OR @name='btnReset']

Highlighting both elements as "LOGIN " element having attribute 'type' and "RESET" element having attribute 'name'.

XPath in Selenium WebDriver: Complete Tutorial

In AND expression, two conditions are used, both conditions should be true to find the element. It fails to find element if any one condition is false.

Xpath=//input[@type='submit' and @name='btnLogin']

In below expression, highlighting 'LOGIN' element as it having both attribute 'type' and 'name'.

XPath in Selenium WebDriver: Complete Tutorial 

4) Start-with function:

Start-with function finds the element whose attribute value

changes on refresh or any operation on the webpage. In this expression, match the starting text of the attribute is used to find the element whose attribute changes dynamically. You can also find the element whose attribute value is static (not changes).

For example -: Suppose the ID of particular element changes dynamically like:

Id=" message12"

Id=" message345"

Id=" message8769"

and so on.. but the initial text is same. In this case, we use Start-with expression.

In the below expression, there are two elements with an id starting "message"(i.e., 'User-ID must not be blank' & 'Password must not be blank'). In below example, XPath finds those element whose 'ID' starting with 'message'.

Xpath=//label[starts-with(@id,'message')]

XPath in Selenium WebDriver: Complete Tutorial 

5) Text():

In this expression, with text function, we find the element with exact text match as shown below. In our case, we find the element with text "UserID".

Xpath=//td[text()='UserID']				

XPath in Selenium WebDriver: Complete Tutorial 

6) XPath axes methods:

These XPath axes methods are used to find the complex or dynamic elements. Below we will see some of these methods.

For illustrating these XPath axes method, we will use the Guru99 bank demo site.

a) Following:

Selects all elements in the document of the current node( ) [ UserID input box is the current node] as shown in the below screen.

Xpath=//*[@type='text']//following::input

XPath in Selenium WebDriver: Complete Tutorial

There are 3 "input" nodes matching by using "following" axis- password, login and reset button. If you want to focus on any particular element then you can use the below XPath method:

Xpath=//*[@type='text']//following::input[1]

You can change the XPath according to the requirement by putting [1],[2]…………and so on.

With the input as '1', the below screen shot finds the particular node that is 'Password' input box element.

XPath in Selenium WebDriver: Complete Tutorial

b) Ancestor:

The ancestor axis selects all ancestors element (grandparent, parent, etc.) of the current node as shown in the below screen.

In the below expression, we are finding ancestors element of the current node("ENTERPRISE TESTING" node).

Xpath=//*[text()='Enterprise Testing']//ancestor::div

XPath in Selenium WebDriver: Complete Tutorial

There are 13 "div" nodes matching by using "ancestor" axis. If you want to focus on any particular element then you can use the below XPath, where you change the number 1, 2 as per your requirement:

Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]

You can change the XPath according to the requirement by putting [1], [2]…………and so on.

c) Child:

Selects all children elements of the current node (Java) as shown in the below screen.

Xpath=//*[@id='java_technologies']/child::li

XPath in Selenium WebDriver: Complete Tutorial

There are 71 "li" nodes matching by using "child" axis. If you want to focus on any particular element then you can use the below xpath:

Xpath=//*[@id='java_technologies']/child::li[1]

You can change the xpath according to the requirement by putting [1],[2]…………and so on.

d) Preceding:

Select all nodes that come before the current node as shown in the below screen.

In the below expression, it identifies all the input elements before "LOGIN" button that is Userid and password input element.

Xpath=//*[@type='submit']//preceding::input

XPath in Selenium WebDriver: Complete Tutorial

There are 2 "input" nodes matching by using "preceding" axis. If you want to focus on any particular element then you can use the below XPath:

Xpath=//*[@type='submit']//preceding::input[1]

You can change the xpath according to the requirement by putting [1],[2]…………and so on.

e) Following-sibling:

Select the following siblings of the context node. Siblings are at the same level of the current node as shown in the below screen. It will find the element after the current node.

 xpath=//*[@type='submit']//following-sibling::input

XPath in Selenium WebDriver: Complete Tutorial

One input nodes matching by using "following-sibling" axis.

f) Parent:

Selects the parent of the current node as shown in the below screen.

Xpath=//*[@id='rt-feature']//parent::div

XPath in Selenium WebDriver: Complete Tutorial

There are 65 "div" nodes matching by using "parent" axis. If you want to focus on any particular element then you can use the below XPath:

Xpath=//*[@id='rt-feature']//parent::div[1]

You can change the XPath according to the requirement by putting [1],[2]…………and so on.

g) Self:

Selects the current node or 'self' means it indicates the node itself as shown in the below screen.

XPath in Selenium WebDriver: Complete Tutorial

One node matching by using "self " axis. It always finds only one node as it represents self-element.

Xpath =//*[@type='password']//self::input

h) Descendant:

Selects the descendants of the current node as shown in the below screen.

In the below expression, it identifies all the element descendants to current element ( 'Main body surround' frame element) which means down under the node (child node , grandchild node, etc.).

Xpath=//*[@id='rt-feature']//descendant::a

XPath in Selenium WebDriver: Complete Tutorial

There are 12 "link" nodes matching by using "descendant" axis. If you want to focus on any particular element then you can use the below XPath:

Xpath=//*[@id='rt-feature']//descendant::a[1]

You can change the XPath according to the requirement by putting [1],[2]…………and so on.

Summary:

XPath is required to find an element on the web page as to do an operation on that particular element.

In this tutorial, we will learn about different types of alert found in web applicationTesting and how to handle Alert in Selenium WebDriver. We will also see how do we accept and reject the alert depending upon the alert types.

In this tutorial, you will learn-

What is Alert?

Alert is a small message box which displays on-screen notification to give the user some kind of information or ask for permission to perform certain kind of operation. It may be also used for warning purpose.

Here are few alert types:

1) Simple Alert

This simple alert displays some information or warning on the screen.

Alert & Popup Handling in Selenium WebDriver

2) Prompt Alert.

This Prompt Alert asks some input from the user and selenium webdriver can enter the text using sendkeys(" input…. ").

Alert & Popup Handling in Selenium WebDriver

3) Confirmation Alert.

This confirmation alert asks permission to do some type of operation.

Alert & Popup Handling in Selenium WebDriver

How to handle Alert in Selenium WebDriver

Alert interface provides the below few methods which are widely used in Selenium Webdriver.

1) void dismiss() // To click on the 'Cancel' button of the alert.

driver.switchTo().alert().dismiss();

2) void accept() // To click on the 'OK' button of the alert.

driver.switchTo().alert().accept();

3) String getText() // To capture the alert message.

driver.switchTo().alert().getText();			

4) void sendKeys(String stringToSend) // To send some data to alert box.

driver.switchTo().alert().sendKeys("Text");

You can see a number of Alert methods are displayed as shown in below screen suggested by Eclipse.

We can easily switch to alert from the main window by using Selenium's .switchTo() method.

Alert & Popup Handling in Selenium WebDriver

Now we automate the given below scenario.

In this scenario, we will use Guru99 demo site to illustrate Selenium Alert handling.

Step 1) Launch the web browser and open the site "http://demo.guru99.com/test/delete_customer.php "

Step 2) Enter Any Customer id.

Alert & Popup Handling in Selenium WebDriver

Step 3) After entering the customer ID, Click on the "Submit" button.

Alert & Popup Handling in Selenium WebDriver

Step 4) Reject/accept the alert.

Alert & Popup Handling in Selenium WebDriver

Handling Alert in Selenium Webdriver using above scenario

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.NoAlertPresentException;	
import org.openqa.selenium.Alert;

public class AlertDemo {
	
	public static void main(String[] args) throws NoAlertPresentException,InterruptedException  {									
		System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
		WebDriver driver = new ChromeDriver();
	
        
        // Alert Message handling
                    		
        driver.get("http://demo.guru99.com/test/delete_customer.php");			
                            		
     	      	
        driver.findElement(By.name("cusid")).sendKeys("53920");					
        driver.findElement(By.name("submit")).submit();			
        		
        // Switching to Alert        
        Alert alert = driver.switchTo().alert();		
        		
        // Capturing alert message.    
        String alertMessage= driver.switchTo().alert().getText();		
        		
        // Displaying alert message		
        System.out.println(alertMessage);	
        Thread.sleep(5000);
        		
        // Accepting alert		
        alert.accept();		
    }	

}
		

Output :

When you execute the above code, it launches the site. Try to delete Customer ID by handling confirmation alert that displays on the screen, and thereby deleting customer id from the application.

How to handle Selenium Pop-up window using Webdriver

In automation, when we have multiple windows in any web application, the activity may need to switch control among several windows from one to other in order to complete the operation. After completion of the operation, it has to return to the main window i.e. parent window. We will see this further in the article with an example.

In selenium web driver there are methods through which we can handle multiple windows.

Driver.getWindowHandles();

To handle all opened windows by web driver, we can use "Driver.getWindowHandles()" and then we can switch window from one window to another in a web application. Its return type is Iterator<String>.

Driver.getWindowHandle();

When the site opens, we need to handle the main window by driver.getWindowHandle(). This will handle the current window that uniquely identifies it within this driver instance. Its return type is String.

To handle multiple windows in Selenium WebDriver, We follow the following steps.

Now, we will automate the given below scenario to see how to handle multiple windows using Selenium Webdriver.

In this scenario, we will use "Guru99" demo site to illustrate window handling.

Step 1) Launch the site.

Launch the browser and open the site " http://demo.guru99.com/popup.php "

Alert & Popup Handling in Selenium WebDriver

Step 2) Click on link "Click Here ".

When the user clicks on the " Click Here " link, new child window opens.

Alert & Popup Handling in Selenium WebDriver

Step 3) New Child Window opens.

A new window opens, ask the user to enter email id and submit the page.

Alert & Popup Handling in Selenium WebDriver

Step 4) Enter your email ID and submit.

Alert & Popup Handling in Selenium WebDriver

Step 5) Display the Access Credentials on submitting the page.

Alert & Popup Handling in Selenium WebDriver

When you execute the code, you will see the child window is open in new tab.

  1. Close the Child window on which credentials are displayed.

Alert & Popup Handling in Selenium WebDriver 

  1. Switch to the parent window.

Alert & Popup Handling in Selenium WebDriver 

Handling multiple windows in selenium webdriver using above scenario.

import java.util.Iterator;		
import java.util.Set;		
import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.firefox.FirefoxDriver;		

public class WindowHandle_Demo {				

    public static void main(String[] args) throws InterruptedException {									
        	WebDriver driver=new FirefoxDriver();			
        		
        //Launching the site.				
            driver.get("http://demo.guru99.com/popup.php");			
        driver.manage().window().maximize();		
                		
driver.findElement(By.xpath("//*[contains(@href,'popup.php')]")).click();			
        		
        String MainWindow=driver.getWindowHandle();		
        		
        // To handle all new opened window.				
            Set<String> s1=driver.getWindowHandles();		
        Iterator<String> i1=s1.iterator();		
        		
        while(i1.hasNext())			
        {		
            String ChildWindow=i1.next();		
            		
            if(!MainWindow.equalsIgnoreCase(ChildWindow))			
            {    		
                 
                    // Switching to Child window
                    driver.switchTo().window(ChildWindow);	                                                                                                           
                    driver.findElement(By.name("emailid"))
                    .sendKeys("gaurav.3n@gmail.com");                			
                    
                    driver.findElement(By.name("btnLogin")).click();			
                                 
			// Closing the Child Window.
                        driver.close();		
            }		
        }		
        // Switching to Parent window i.e Main Window.
            driver.switchTo().window(MainWindow);				
    }
}		

Output:

When you execute the above code, it launches the site and on clicking the link "Click here," it opens up a child window in a new tab. You can close the child window, and switch to the parent window once the operation is completely done. Hence handling more than one window in the application.

Alert & Popup Handling in Selenium WebDriver

Conclusion:

Reading a HTML Web Table

There are times when we need to access elements (usually texts) that are within HTML tables. However, it is very seldom for a web designer to provide an id or name attribute to a certain cell in the table. Therefore, we cannot use the usual methods such as "By.id()", "By.name()", or "By.cssSelector()". In this case, the most reliable option is to access them using the "By.xpath()" method.

In This Tutorial, you will learn-

How to write XPath for Table

Consider the HTML code below.

We will use XPath to get the inner text of the cell containing the text "fourth cell."

Step 1 - Set the Parent Element (table)

XPath locators in WebDriver always start with a double forward slash "//" and then followed by the parent element. Since we are dealing with tables, the parent element should always be the <table> tag. The first portion of our XPath locator should, therefore, start with "//table".

Step 2 - Add the child elements

The element immediately under <table> is <tbody> so we can say that <tbody> is the "child" of <table>. And also, <table> is the "parent" of <tbody>. All child elements in XPath are placed to the right of their parent element, separated with one forward slash "/" like the code shown below.

 

Step 3 - Add Predicates

The <tbody> element contains two <tr> tags. We can now say that these two <tr> tags are "children" of <tbody>. Consequently, we can say that <tbody> is the parent of both the <tr> elements.

Another thing we can conclude is that the two <tr> elements are siblings. Siblings refer to child elements having the same parent.

To get to the <td> we wish to access (the one with the text "fourth cell"), we must first access the second <tr> and not the first. If we simply write "//table/tbody/tr", then we will be accessing the first <tr> tag.

So, how do we access the second <tr> then? The answer to this is to use Predicates.

Predicates are numbers or HTML attributes enclosed in a pair of square brackets "[ ]" that distinguish a child element from its siblings. Since the <tr> we need to access is the second one, we shall use "[2]" as the predicate.

If we won't use any predicate, XPath will access the first sibling. Therefore, we can access the first <tr> using either of these XPath codes.

Step 4 - Add the Succeeding Child Elements Using the Appropriate Predicates

The next element we need to access is the second <td>. Applying the principles we have learned from steps 2 and 3, we will finalize our XPath code to be like the one shown below.

Now that we have the correct XPath locator, we can already access the cell that we wanted to and obtain its inner text using the code below. It assumes that you have saved the HTML code above as "newhtml.html" within your C Drive.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/write-xpath-table.html";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(
		By.xpath("//table/tbody/tr[2]/td[2]")).getText(); 	
        System.out.println(innerText); 
	driver.quit();
	}
}

Accessing Nested Tables

The same principles discussed above applies to nested tables. Nested tables are tables located within another table. An example is shown below.

To access the cell with the text "4-5-6" using the "//parent/child" and predicate concepts from the previous section, we should be able to come up with the XPath code below.

The WebDriver code below should be able to retrieve the inner text of the cell which we are accessing.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/accessing-nested-table.html";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(
		By.xpath("//table/tbody/tr[2]/td[2]/table/tbody/tr/td[2]")).getText(); 		
        System.out.println(innerText); 
	driver.quit();
}

The output below confirms that the inner table was successfully accessed.

Using Attributes as Predicates

If the element is written deep within the HTML code such that the number to use for the predicate is very difficult to determine, we can use that element's unique attribute instead.

In the example below, the "New York to Chicago" cell is located deep into Mercury Tours homepage's HTML code.

In this case, we can use the table's unique attribute (width="270") as the predicate. Attributes are used as predicates by prefixing them with the @ symbol. In the example above, the "New York to Chicago" cell is located in the first <td> of the fourth <tr>, and so our XPath should be as shown below.

Remember that when we put the XPath code in Java, we should use the escape character backward slash "\" for the double quotation marks on both sides of "270" so that the string argument of By.xpath() will not be terminated prematurely.

We are now ready to access that cell using the code below.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/newtours/";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(By
		.xpath("//table[@width=\"270\"]/tbody/tr[4]/td"))
		.getText(); 		
	System.out.println(innerText); 
	driver.quit();
}

Shortcut: Use Inspect Element for Accessing Tables in Selenium

If the number or attribute of an element is extremely difficult or impossible to obtain, the quickest way to generate the XPath code is using Inspect Element.

Consider the example below from Mercury Tours homepage.

Step 1

Use Firebug to obtain the XPath code.

Step 2

Look for the first "table" parent element and delete everything to the left of it.

Step 3

Prefix the remaining portion of the code with double forward slash "//" and copy it over to your WebDriver code.

The WebDriver code below will be able to successfully retrieve the inner text of the element we are accessing.

public static void main(String[] args) {
	String baseUrl = "http://demo.guru99.com/test/newtours/";
	WebDriver driver = new FirefoxDriver();

	driver.get(baseUrl);
	String innerText = driver.findElement(By
		.xpath("//table/tbody/tr/td[2]"
		+ "//table/tbody/tr[4]/td/"
		+ "table/tbody/tr/td[2]/"
		+ "table/tbody/tr[2]/td[1]/"
		+ "table[2]/tbody/tr[3]/td[2]/font"))
		.getText(); 		
	System.out.println(innerText); 
	driver.quit();
}

Summary

There are two types of HTML tables published on the web-

  1. Static tables: Data is static i.e. Number of rows and columns are fixed.
  2. Dynamic tables: Data is dynamic i.e. Number of rows and columns are NOT fixed.

Below is an example of a dynamic table of Sales. Based on input date filters, number of rows will get altered. So, it is dynamic in nature.

Handling static table is easy, but dynamic table is a little bit difficult as rows and columns are not constant.

In this tutorial, you will learn-

Using X-Path to Locate Web Table Elements

Before we locate web element, first let's understands-

What is a web element?

Web elements are nothing but HTML elements like textbox, dropdowns radio buttons, submit buttons, etc. These HTML elements are written with start tag and ends with an end tag.

For Example,

<p> My First HTML Document</p>.

Steps for getting X-path of web element that we want to locate.

Step 1) In Chrome, Go to http://demo.guru99.com/test/web-table-element.php

Step 2) Right click on web element whose x-path is to be fetched. In our case, right click on "Company" Select Inspect option. The following screen will be shown -

Step 3) Right Click on highlighted web element > Select Copy -> Copy x-path option.

Step 4) Use the copied X-path "//*[@id="leftcontainer"]/table/thead/tr/th [1]" in Selenium WebDriver to locate the element.

Example: Fetch number of rows and columns from Dynamic WebTable

When the table is dynamic in nature, we cannot predict its number of rows and columns.

Using Selenium web driver, we can find

Below is program for fetching total number of rows and columns of web table.

import java.text.ParseException;
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;


public class Noofrowsandcols {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
	  System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
	  wd= new ChromeDriver();
        wd.get("http://demo.guru99.com/test/web-table-element.php");         
        //No.of Columns
        List  col = wd.findElements(By.xpath(".//*[@id=\"leftcontainer\"]/table/thead/tr/th"));
        System.out.println("No of cols are : " +col.size()); 
        //No.of rows 
        List  rows = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/tbody/tr/td[1]")); 
        System.out.println("No of rows are : " + rows.size());
        wd.close();
    }
}

Code Explanation:

.

Output:

 

Example: Fetch cell value of a particular row and column of the Dynamic Table

Let's assume we need 3rd row of the table and its second cell's data. See the table below-

In above table, data is regularly updated after some span of time. The data you try retrieve will be different from the above screenshot. However, the code remains the same. Here is sample program to get the 3rd row and 2nd column's data.

import java.text.ParseException;
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 java.util.concurrent.TimeUnit;


public class RowandCell {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("http://demo.guru99.com/test/web-table-element.php"); 
		 wd.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
		 WebElement baseTable = wd.findElement(By.tagName("table"));
		  
		 //To find third row of table
		 WebElement tableRow = baseTable.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]"));
         String rowtext = tableRow.getText();
		 System.out.println("Third row of table : "+rowtext);
		    
		    //to get 3rd row's 2nd column data
		    WebElement cellIneed = tableRow.findElement(By.xpath("//*[@id=\"leftcontainer\"]/table/tbody/tr[3]/td[2]"));
		    String valueIneed = cellIneed.getText();
		    System.out.println("Cell value is : " + valueIneed); 
		    wd.close();
    }
}

Code Explanation:

Output:

Example: Get Maximum of all the Values in a Column of Dynamic Table

In this example, we will get the maximum of all values in a particular column.

Refer the following table -

Here is the code

import java.text.ParseException;
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 java.text.NumberFormat;


public class MaxFromTable {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
		System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
		 wd= new ChromeDriver();
		 wd.get("http://demo.guru99.com/test/web-table-element.php"); 
		 String max;
	     double m=0,r=0;
		 
	       //No. of Columns
	        List  col = wd.findElements(By.xpath(".//*[@id='leftcontainer']/table/thead/tr/th"));
	        System.out.println("Total No of columns are : " +col.size());
	        //No.of rows
	        List  rows = wd.findElements(By.xpath (".//*[@id='leftcontainer']/table/tbody/tr/td[1]"));
	        System.out.println("Total No of rows are : " + rows.size());
	        for (int i =1;i<rows.size();i++)
	        {    
	            max= wd.findElement(By.xpath("html/body/div[1]/div[5]/table/tbody/tr[" + (i+1)+ "]/td[4]")).getText();
	            NumberFormat f =NumberFormat.getNumberInstance(); 
	            Number num = f.parse(max);
	            max = num.toString();
	            m = Double.parseDouble(max);
	            if(m>r)
	             {    
	                r=m;
	             }
	        }
	        System.out.println("Maximum current price is : "+ r);
    }
}

Code Explanation:

OutPut

Example: Get all the values of a Dynamic Table

Consider the following table http://demo.guru99.com/test/table.html

The number of columns for each row is different.

Here row number 1, 2 and 4 have 3 cells, and row number 3 has 2 cells, and row number 5 has 1 cell.

We need to get values of all the cells

Here is the code:

import java.text.ParseException;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.chrome.ChromeDriver;



public class NofRowsColmns {
    public static void main(String[] args) throws ParseException {
    	WebDriver wd;
    	System.setProperty("webdriver.chrome.driver","G://chromedriver.exe");
    	wd = new ChromeDriver();
    	wd.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
    	wd.get("http://demo.guru99.com/test/table.html");
    	//To locate table.
    	WebElement mytable = wd.findElement(By.xpath("/html/body/table/tbody"));
    	//To locate rows of table. 
    	List < WebElement > rows_table = mytable.findElements(By.tagName("tr"));
    	//To calculate no of rows In table.
    	int rows_count = rows_table.size();
    	//Loop will execute till the last row of table.
    	for (int row = 0; row < rows_count; row++) {
    	    //To locate columns(cells) of that specific row.
    	    List < WebElement > Columns_row = rows_table.get(row).findElements(By.tagName("td"));
    	    //To calculate no of columns (cells). In that specific row.
    	    int columns_count = Columns_row.size();
    	    System.out.println("Number of cells In Row " + row + " are " + columns_count);
    	    //Loop will execute till the last cell of that specific row.
    	    for (int column = 0; column < columns_count; column++) {
    	        // To retrieve text from that specific cell.
    	        String celtext = Columns_row.get(column).getText();
    	        System.out.println("Cell Value of row number " + row + " and column number " + column + " Is " + celtext);
    	    }
    	    System.out.println("-------------------------------------------------- ");
    	}
   	}
}

Code Explanation:

Output:

Summary

The article is contributed by Kanchan Kulkarni.

What is Desired Capability?

The desired capability is a series of key/value pairs that stores the browser properties like browsername, browser version, the path of the browser driver in the system, etc. to determine the behaviour of the browser at run time.

In this tutorial, you will learn-

Why do we need Desired Capabilities?

Every Testing scenario should be executed on some specific testing environment. The testing environment can be a web browser,Mobile device, mobile emulator, mobile simulator, etc.

The Desired Capabilities Class helps us to tell the webdriver, which environment we are going to use in our test script.

The setCapability method of the DesiredCapabilities Class, which is explained in the later part of the tutorial, can be used in Selenium Grid. It is used to perform a parallel execution on different machine configurations.

Ex: Grid

Desired Capabilities in Selenium WebDriver

It is used to set the browser properties (Ex. Chrome, IE), Platform Name (Ex. Linux, Windows) that are used while executing the test cases.

In the case of mobile automation, as we perform the tests on different varieties of mobile devices, the Mobile Platform (ex. iOS, Android) Platform Version (Ex. 3.x,4.x in Android) can be set.

Desired Capabilities in Selenium WebDriver

The above emulator example shows the platform set which is android and the platform version set which is IceCream Sandwich (4.x).

Desired Capabilities are more useful in cases like:

Different types of Desired Capabilities Methods

Here we will see a different type of desired capabilities methods and see how to use one of this method "setCapability Method".

  1. getBrowserName()
public java.lang.String getBrowserName()
  1. setBrowserName()
public void setBrowserName(java.lang.String browserName)
  1. getVersion()
public java.lang.String getVersion()
  1. setVersion()
public void setVersion(java.lang.String version)
  1. getPlatform()
public Platform getPlatform()
  1. setPlatform()
public Platform setPlatform()
  1. getCapability Method

The getCapability method of the DesiredCapabilities class can be used to get the capability that is in use currently in the system.

public java.lang.Object getCapability(java.lang.String capabilityName)
  1. setCapabilityMethod

The setCapability() method of the Desired Capabilities class can be used to set the device name, platform version, platform name, absolute path of the app under test (the .apk file of the app(Android) under test), app Activity (in Android) and appPackage(java). 

"setCapability method" in Java has the below declarations:

setCapability : public void setCapability(java.lang.String capabilityName,boolean value)
setCapability  :public void setCapability(java.lang.String capabilityName,java.lang.String value)
setCapability  :public void setCapability(java.lang.String capabilityName,Platform value)
setCapability  :public void setCapability(java.lang.String key,java.lang.Object value)

Example for set capability method

Let us consider an example where we want to run our Test Case on Internet explorer browser to open www.gmail.com website using Selenium Webdriver.

Following is the code.

importorg.openqa.selenium.WebDriver;
importorg.openqa.selenium.ie.InternetExplorerDriver;

public class IEtestforDesiredCapabilities {
  
 public static void main(String[] args) {
  
WebDriver IEdriver = new InternetExplorerDriver();
 driver.manage().window().maximize();
 driver.get("http://gmail.com");
  
 driver.quit();
 }
  
}

Now run this code from Eclipse and check out the console.

Output:

It will throw the following error when above code is executed. The error occurs because the path to the browser driver (IE in the above case) is not set.The browser could not be located by the selenium code. 

The path to the driver executable must be set by the webdriver.ie.driver system property; formore information, see http://code.google.com/p/selenium/wiki/InternetExplorerDriver. The latest version can be downloaded from http://code.google.com/p/selenium/downloads/list

Dec 11, 201212:59:43PM org.openqa.selenium.ie.InternetExplorerDriverServer initializeLib

WARNING: This method of starting the IE driver is deprecated and will be removed in selenium 2.26. Please download the IEDriverServer.exe from http://code.google.com/p/selenium/downloads/list and ensure that it is in your PATH.

Solution:

The solution for the above problem is given in the warning section of the error itself.

importorg.openqa.selenium.WebDriver;
importorg.openqa.selenium.ie.InternetExplorerDriver;
importorg.openqa.selenium.remote.DesiredCapabilities;

public class IEtestforDesiredCapabilities {
  
 public static void main(String[] args) {

//it is used to define IE capability 
 DesiredCapabilities capabilities = DesiredCapabilities.internetExplorer();
  
capabilities.setCapability(CapabilityType.BROWSER_NAME, "IE");
capabilities.setCapability(InternetExplorerDriver.
  INTRODUCE_FLAKINESS_BY_IGNORING_SECURITY_DOMAINS,true);


System.setProperty("webdriver.ie.driver", "C:\\IEDriverServer.exe");
  
 //it is used to initialize the IE driver
 WebDriver driver = new InternetExplorerDriver(capabilities);
  
 driver.manage().window().maximize();

 driver.get("http://gmail.com");
  
 driver.quit();
 }
  
}

Code Explanation:

In the code above,

Output:

The test case on Internet explorer browser will run successfully using Selenium Webdriver.

Conclusion

The Desired Capabilities class will help to set an environment to define the behaviour of the browser/environment on which the test can be executed.

It helps to launch our application in the desired environment having the capabilities that we desire to use.

This article is contributed by Krithika Ramkumar