Download as pptx, pdf, or txt
Download as pptx, pdf, or txt
You are on page 1of 63

What is selenium ?

Selenium is a browser automation framework. It provides a number of


APIs for automating user interaction on pure HTML and JavaScript
applications in browsers such as IE, Firefox, Google Chrome, Safari, and
many more. However, Selenium does not support Rich Internet
Application (RIA) technologies such as Silverlight, Flex/Flash.

Selenium offers the following set of tools for automating interaction with
browsers:

1. Selenium IDE: This is a Firefox add-on for recording and playing back
Selenium scripts with Firefox. It provides a GUI for recording user actions
using Firefox., but it can only be used with Firefox while other browsers
are not supported. However, we can convert the recorded scripts into
various programming languages supported by Selenium WebDriver and
run these scripts on browsers other than Firefox.
2. Selenium WebDriver: This is a programming interface for developing more advanced
Selenium scripts using different programming languages. You can also run tests on
multiple browsers supported by Selenium. The following figure provides a high-level
architecture of Selenium WebDriver
What is a web application ?

• Web applications, and the web pages within these applications, are commonly
written as a combination of mix of Hyper Text Markup
Language (HTML), Cascading Style Sheets (CSS), and JavaScript code.
• Based on user actions like navigating to a website Uniform Resource
Locator (URL) or clicking the submit button, a browser sends a request to a web
server.
• Web server processes this request and sends back a response with HTML and
related resources, such as JavaScript, CSS, Images, and so on, back to the Browser.
• The information received from a server is used by the browser to render a web
page with various visual elements, such as textboxes, buttons, labels, tables,
forms, checkboxes, radio boxes, lists, images, and so on, on the page.
• While doing so, the browser hides the HTML code and related resources from the
user. The user is presented with a graphical user interface in the browser window.
Configuring the Selenium WebDriver test development
environment for Java with Eclipse and Maven

• We can use Eclipse and Maven to build our Selenium WebDriver Project

• Maven is used to define project structure, dependencies, build, and test management and it
automatically downloads the necessary files from the repository while building the project.

• Download and set up Eclipse IDE for Java Developers from https://eclipse.org/downloads/.

• Download and set up Maven from http://maven.apache.org/download.html.

• Download and install Eclipse Maven plugin from


http://download.eclipse.org/technology/m2e/milestones/1.0
Setting up Webdriver for Internet Explorer Browser

• In order to execute test scripts on the IE, we need to use InternetExplorerDriver and a standalone
Internet Explorer Driver Server executable

• We can download Internet Explorer Driver Server from http://docs.seleniumhq.org/download/

• Internet Explorer Driver Server is a stand-alone server executable that implements WebDriver's
JSON-wire protocol, which works as a glue between the test script and Internet Explorer, as shown
in following diagram:

• The tests should specify the path of the IEDriverServer executable before creating the instance of
Internet Explorer. This is done by setting the webdriver.ie.driver property.
Usage in IEBrowser.java
Setting up Webdriver for Chrome Browser

• In order to execute test scripts on the Google Chrome browser, we need to use ChromeDriver
and a standalone ChromeDriver executable

• ChromeDriver is maintained by the Google Chromium team. It can be downloaded from


https://sites.google.com/a/chromium.org/chromedriver/.

• ChromeDriver is a standalone server executable that implements WebDriver's JSON-wire


protocol and works as a glue between the test script and Google Chrome, as shown in the
following diagram:

• The tests should specify the path of the ChromeDriver executable before creating the
instance of Chrome. This is done by setting the webdriver.chrome.driver property

Usage in ChromeBrowser.java
Setting up Webdriver for Firefox Browser

• In order to execute test scripts on the Firefox, we only need FireFoxDriver and a standalone
Driver executable is not required. Firefox driver is included in the selenium-server-
stanalone.jar .

• The driver comes in the form of an xpi (firefox extension) which is added to the firefox
profile when you start a new instance of FirefoxDriver

Usage in FireFoxBrowser.java
Finding Element(s) using Selenium

• Using browser tools for inspecting elements and page DOM


• Finding an element using the findElement method
• Finding elements using the findElements method
• Finding links
• Finding elements by tagname
• Finding elements using XPath
• Finding elements using CSS selectors
Using browser tools for inspecting elements and page DOM

• Inspecting web page with Mozilla Firefox using the Firebug add-on

1. Install firebug add-on from https://addons.mozilla.org/en-us/firefox/addon/firebug/.

2. To inspect an element from the page, move the mouse over the desired element and
right-click to open the pop-up menu. Select the Inspect Element with Firebug option

3. We can also validate the XPath or CSS Selectors using the search box shown in the
Firebug section. Just enter the XPath or CSS Selector and Firebug will highlight
element(s) that match the expression

• Inspecting web page with Mozilla Firefox using the Firepath add-on

1. Install firepath add-on from https://addons.mozilla.org/en-


US/firefox/addon/firepath/
2. To inspect an element from the page, move the mouse over the desired element and
right-click to open the pop-up menu. Select the Inspect Element with Firepath option
3. It generates xpath/css as soon as we inspect the element. It highlights the element
in view source and on UI.
Finding an element using the findElement method
• Finding element in Selenium WebDriver is done by using the findElement()
method provided by the WebDriver and WebElement interface.

• The findElement() method returns an instance of a WebElement that is


found in the page on specified locators, also called search criteria.

• If it does not find an element using the specified search criteria, it will
throw the NoSuchElementFound exception.

• This methods take a locator or a query object as an instance of a By class


as an argument. Selenium WebDriver provides a By class to support
various locator strategies.
1. Finding elements by the ID attribute : -
We can find elements using the value of the id attribute. While
searching through the DOM, browsers use id as the preferred way to
identify the elements, and this provides the fastest locator strategy.

2. Finding elements by the Name attribute : -


We might find situations where we cannot use the id attribute due
to the following reasons:
– Not all elements on a page have the id attribute specified
– The id attribute values are dynamically generated

3. Finding elements by the Class attribute : -


We can also use the class attribute to find elements. The class
attribute is commonly used to apply CSS to an element

Usage FindElementTest.java
HTML :
<form name="loginForm">
<label for="username">UserName: </label>
<input type="text" id="userId" name="username" class=“usrFieldClass"/>
<br/>
<label for="password">Password: </label>
<input type="password" id="password" name="password"
class=“pwdFieldClass”/>
<br/>
<input name="login" type="submit" value="Login" />
</form>

Code Example:
WebElement username = driver.findElement(By.id("userId"));
WebElement password = driver.findElement(By.id("password"));

WebElement username = driver.findElement(By.name("username"));


WebElement password = driver.findElement(By.name("password"));

WebElement username = driver.findElement(By.className(“usrFieldClass"));


WebElement password = driver.findElement(By.className("pwdFieldClass"));
Finding an element using the findElements method
• Selenium WebDriver provides the findElements() method, using which we can find
more than one element matching the specified search criteria. This method is
useful when we want to work with a group of similar elements. For example, we
can get all the links displayed on a page, or get all rows from a table, and so on.

public void testFindElements()


{ //Get all the links displayed on Page
List<WebElement> links = driver.findElements(By.tagName("a"));
//Verify there are four links displayed on the page
assertEquals(4, links.size());
//Iterate though the list of links and print target for each link
for(WebElement link : links) {
System.out.println(link.getAttribute("href"));
}
}
Usage in FindElementsTest.java
Finding Links

• Selenium WebDriver ‘By’ class provides two special methods to find links on a page.
Links can be searched either by their text or by partial text.

• Finding links with partial text comes in handy when links have dynamic text

• The linkText and partialLinkText locator methods query the driver for all the links that
meet the specified text and return the matching link(s).

Code Example
WebElement gmailLink = driver.findElement(By.linkText("Gmail Link"));
assertEquals("http://www.google.com/", gmailLink.getAttribute("href"));
Finding elements By tag name

• Selenium WebDriver ‘By’ class provides a method called tagName method to find elements
by their HTML tag name. This is similar to the getElementsByTagName() DOM method in
JavaScript.
• This is used when we want to locate element using tag name e.g. If we want to count how
many rows are displayed in <table>.

Code Example
WebElement table = driver.findElement(By.id("summaryTable"));
List<WebElement> rows = table.findElements(By.tagName("tr"));
assertEquals(2, rows.size());

Usage in FindElementsByTagNameTest.java
Finding elements using XPATH

• XPath (the XML path language) is a query language used to select nodes from an XML
document. All the major browsers implement DOM Level 3
XPath (usinghttp://www.w3.org/TR/DOM-Level-3-XPath/) specification, which provides
access to a DOM tree.

• The XPath language is based on a tree representation of the XML document and provides the
ability to navigate around the tree and to select nodes using a variety of criteria.

• Selenium WebDriver supports XPath to locate elements using XPath expressions, also known
as XPath query.

Usage in ElementTextANDXPath.java
S.No Expression Description
1 Nodename This will select all nodes with the name "nodename". For
example //table will select all the tables in page

2 /(slash) /html: This will select the root HTML element. A slash (/) is
used in the beginning and it defines an absolute path.

3 //(double slash) This will select node(s) in the document from the current
node that match the selection irrespective of its position

4 .(dot) This represents the current node


5 ..(double dot) This will select the parent of the current node. For
example, //table/.. will return the parent element.

6 @ //@id: This will select all the elements where the id attribute
are defined no matter where they are in the document
//img/@alt: This will select all the img elements where
the @alt attribute is defined
Xpath Type Code Example Description

Absolute By absXpath= By.xpath("/html/body/form/input")); This strategy has limitations as it depends


driver.findElement(absXpath); on the structure or hierarchy of the
elements on a page.

Relative By relXpath=By.xpath(“//input"));
driver.findElement(relXpath);

Predicate By predXpath=By.xpath("//input[2]“); A predicate is embedded in square


driver.findElement(predXpath); brackets and is used to find out
specific node(s) or a node that contains a
specific value

Attribute with By.xpath("//img[@alt='Previous'] Element with specific value of attributes


values By.xpath("//input[@type='submit' and @value='Login']”)
By.xpath("//input[@type='submit'or @value='Login']“)

Using attributes By.xpath ("//img[@alt]") – All image tag with alt attribute Element with specific attributes
By.xpath ("//img[not(@alt)]") – All image tag without alt attribute

Partial Search input[starts-with(@id,'ctrl')] – Attribute id starts with value ctrl Element with partial matching attribute
based on input[ends-with(@id,’ctrl')] – Attribute id ends with value ctrl value
atribute value input[contains(@id,‘ctrl')] - Attribute id containing value ctrl

Any attribute By.xpath("//input[@*='username']") This matches first input tag with any
with specific attribute with value ‘username’
value
Xpath Type Code Example Description

Wild Card //* - This will select all elements in the document Matches any element in a node
* //*[@class=‘price’] -

Wild Card //td[@*]-This will select all the td elements that have any Matches any attribute node
@ attribute

Wild Card Node() //table[@id='summaryTable']/node(): This will select all the Matches any node
child elements of table

Axes::ansector //td[text()='Product 1']/ancestor::table – Parent Select all parent, grand parent and so on
//td[text()='Product 2']/ancestor::span – Grand Parent of the current ode

Axes::following //td[text()='Product 1']/following::tr

Axes::following- //td[text()='Product 1']/following-sibling::td Select all siblings after the current node
sibling

Axes::preceding //td[text()='$150']/preceding::tr Select all node before current node


except ancestor node ,attribute nodes

Axes::preceding- //td[text()='$150']/preceding-sibling::td Select all siblings before the current


sibling node
Finding elements By CSS selectors

• The Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation
semantics (the looks and formatting) of a document written in a markup language such as
HTML or XML

• Selenium WebDriver's By class provides the cssSelector() method to find elements using CSS
selectors.
CSS Code Example Description
Absolute path By.cssSelector("html body form input") Absolute paths refer to the very specific
By.cssSelector("html>body>form >input") location of the element considering its
complete hierarchy in the DOM
> - Represents parent to child relationship
Relative path By.cssSelector("input") With a relative path, we can find an element
directly, irrespective of its location in the
DOM.
Class selector By.cssSelector("input.textField") We can use the Class attribute to locate an
By.cssSelector("input. usrFieldClass element. This can be done by specifying
.textField") HTML tag.Class attribute Value
By.cssSelector(“.usrFieldClass ")

ID selector By.cssSelector(“input#userId") We can use the ID attribute to locate an


By.cssSelector("#userId") element. This can be done by specifying
HTML tag#ID attribute value
Element By.cssSelector("input[name=username]") We can use one or more element attribute
Attribute By.cssSelector("input[type='submit‘]
value='Login']"));
Partial Match By.cssSelector(“input[id^=‘user']”) Attribute id starts with
start with
Partial Match By.cssSelector(“input[id$=‘word']”) Attribute id ends with
ends with

Partial Match By.cssSelector(“input[id*='sswo']”) Attribute id contains


contains
CSS Code Example Description

Child element By.cssSelector("form#loginForm > input")); > Can be used to show parent and child
using ‘>’ relationship

First child By.cssSelector("#summaryTable>tbody>tr:fir First element under tr tag


st-child”);

Last child By.cssSelector("#summaryTable>tbody>tr:las Last element under tr tag


t-child”)

Nth child By.cssSelector("#summaryTable>tbody>tr:nt Nth element under tr tag


h-child(1)”)

Sibling element #userId+br+label ‘+’ can be used to find sibling element


using ‘+’
Automating textboxes, text areas, and buttons

The textbox and button elements are the most common elements used in any web application. Selenium
WebDriver's WebElement interface provides methods to simulate keyboard entry into textboxes or text
areas and perform clicks on a button control. To perform these mentioned operations we have following
methods clear(), sendKeys(), submit() and click() methods of the WebElement interface.

1. The clear() method of the WebElement interface works only on a textbox <input> and text area, having no
effect on other types of elements. It will clear any previous value from an element.

WebElement element = driver.findElement(By.name("q"));


element.clear();

2. The sendKeys() method can be used on any element that accepts values by typing on the element.
This method simulates typing into an element that sets the given string as the value of that element.
The sendKeys() method accepts java.lang.CharSequence or string value.

usage 1 : element.sendKeys(“Any Char Sequence”);


usage 2 : element.sendKeys("123" + Keys.TAB);

3. To click on a button element, we can use the click() method of the WebElement interface
WebElement element = driver.findElement(By.name("btnG"));
element.click();

Usage in ElementTextBox.java
Checking an element’s text

• While testing a web application, we need to verify that elements are displaying the correct values or text
on the page. Selenium WebDriver's WebElement interface provides method getText() to retrieve and
verify text from an element

• The getText() method of the WebElement interface returns the visible innerText of the element,
including sub-elements, without any leading or trailing whitespace.

WebElement spanText= driver.findElement(By.xpath(“//span[1]"));


String spanTagText = spanText.getText();

WebElement div1Text= driver.findElement(By.xpath(“//span[1]//div[1]"));


String div1TagText = div1Text.getText();

WebElement div2Text= driver.findElement(By.xpath(“//span[1]//div[2]"));


String div2TagText = div2Text.getText();

Note : The WebElement.getText() method does not work on hidden or invisible elements.
Retrieval of text from such elements is possible through the getAttribute() method .

Usage in ElementTextANDXPath.java
Checking an element's attribute and CSS values

1. We can retrieve and check an element's attribute using the getAttribute() method of the
WebElement interface. By passing the name of the attribute to the getAttribute() method,
it returns the value of the attribute back to the test.

WebElement message = driver.findElement(By.id("message"));


assertEquals("justify", message.getAttribute("align"));

2. We can retrieve and check an element's CSS property using the getCssValue() method of the
WebElement interface. By passing the name of the property to the getCssValue() method,
it returns the value of the property back to the test.

3. It returns color values as rgba strings, so, for example if the "background-color" property is
set as "green" in the HTML source, the returned value will be " rgba(0, 128, 0, 1) ".

WebElement message = driver.findElement(By.id("messageBox"));


String width = message.getCssValue("width");
String color= message.getCssValue(“background-color");

Usage in ElementAttributeANDCSSValue.java
Automating dropdowns and lists
• Selenium WebDriver supports testing dropdown and list elements using a special Select class.
• Select class provides various methods and properties to interact with dropdowns and lists
created with the HTML <select> element.

Method Return type Description

deselectAll() void Clear all selected entries.


deselectByIndex(int index) void Deselect the option at the given index.
deselectByValue(String val) void Deselect all options that have a value matching the
argument.
deselectByVisibleText(String text) void Deselect all options that display text matching the
argument.
getAllSelectedOptions() List<WebElement> Get all selected options in list

getFirstSelectedOption() WebElement Get first selected option in list


getOptions() List<WebElement> Get all options in list

isMultiple() Boolean Returns true if multiple options were selected in list


selectByIndex(int index) void Select the option at the given index.
selectByVisibleText(String text) void Select all options that have a value matching the
argument.
selectByValue(jString value) Void Select all options that display text matching the
argument.
public void testDropdown() {
Select make = new Select(driver.findElement(By.xpath("//select[1]")));
assertFalse(make.isMultiple()); // Verify Dropdown does not support multiple selection
assertEquals(4, make.getOptions().size());
make.selectByVisibleText(“Volvo");
assertEquals(“Volvo", make.getFirstSelectedOption().getText());
make.selectByValue(“opel");
make.selectByIndex(2);
}

public void testMultipleSelectList() {


Select make = new Select(driver.findElement(By.xpath(“//select[2]")));
assertFalse(make.isMultiple());
assertEquals(4, make.getOptions().size());
make.selectByVisibleText(“Volvo");
make.selectByVisibleText(“Audi");
assertEquals(“Volvo", make.getFirstSelectedOption().getText());
make.deselectByValue(“volvo");
assertEquals(1, make.getAllSelectedOptions().size());
make.deselectByIndex(0);
}

Usage in ElementDropDown.java
Automating radio buttons and radio groups
• The Selenium WebDriver supports radio buttons elements using the WebElement interface.
We can select and deselect the radio buttons using the click() method of
the WebElement class

• We can also check whether a radio button is selected or deselected using the
isSelected() method.

public void testRadioButton() {


// Get the Radio Button as WebElement using xpath
WebElement gender= driver.findElement(By .xpath("//span[5]/input"));
// Check if its already selected? otherwise select the Radio Button // by calling click() method
if (! gender.isSelected()) {
gender.click();
}
assertTrue(gender.isSelected()); // Verify Radio Button is selected
}

Usage in ElementRadioButton.java
Automating checkboxes

• Selenium WebDriver supports the checkbox element using the WebElement interface.
• We can select or deselect a checkbox using the click() method
• We can check whether a checkbox is selected or deselected using the isSelected() method.

public void testCheckBox() {


// Get the CheckBox as WebElement using xpath
WebElement gender= driver.findElement(By .xpath("//span[6]/input"));
// Check if its already selected? otherwise select the checkbox // by calling click() method
if (! gender.isSelected()) {
gender.click();
}
assertTrue(gender.isSelected()); // Verify Check box is selected
}

Usage in ElementCheckBox.java
Automating WebTables
• An HTML table is represented as WebElement. However, there are no table-specific methods
that are available with the WebElement interface.

• While working with tables, we can find the rows and cells effectively by using a set of the By
class methods like tagName() method

public void testWebTable() {


WebElement simpleTable = driver.findElement(By.xpath("//span[2]"));
// Get all rows
List<WebElement> rows = simpleTable.findElements(By.tagName("tr"));
assertEquals(3, rows.size());

// Print data from each row


for (WebElement row : rows) {
List<WebElement> cols = row.findElements(By.tagName("td"));
for (WebElement col : cols) {
System.out.print(col.getText() + "\t");
} System.out.println();
}
}
Usage in ElementWebTable.java
Checking for an element's presence
• The Selenium WebDriver does not implement Selenium RC's isElementPresent() method to
check if an element is present on a page. So we need to create a customize method as shown
below

Method definition:
public boolean isElementPresent(By by) {
try { driver.findElement(by);
return true;
} catch (NoSuchElementException e) { return false; }
}

Method call:
By xpath = By.xpath(“//span[2]”)
boolean b = isElementPresent(xpath);
if (b) System.out.println(“Element found”);
else System.out.println(“Element not found”);

Usage in ElementPresence.java
Checking an element's state
• Many a time a test fails to click on an element or enter text in a field, as the element is disabled or exists in
the DOM but is hidden on the page. This will result in an error being thrown and the test resulting in
failure.
• To build reliable tests the WebElement interface provides the following methods to check the state of an
element

Method Purpose
isEnabled() This method checks if an element is enabled. It returns true if enabled, else false if disabled
isSelected() This method checks if an element is selected (radio button, checkbox, and so on). It
returns true if selected, else false if deselected.
isDisplayed() This method checks if an element is displayed.

public void checkElementState() {


WebElement checkBox = driver.findElement(By.xpath(“//span[6]/input[1]”);
if (checkBox.isEnabled()) {// Check if its enabled before selecting it
if (!checkBox.isSelected()) {// Check if its already selected? otherwise select the Checkbox
checkBox.click();
}
} else { System.out.println("Gender Check Boxes is not enabled"); }
}
Usage in ElementState.java
Using Action Classes for advance interaction with keyboard
The Selenium WebDriver's Advanced User Interactions API allows us to perform operations from
keyboard events and simple mouse events to complex events such as dragging-and-dropping, holding a
key and then performing mouse operations using the Actions class, and building a complex chain of
events exactly like a user doing these manually. Below example shows Keyboard usage

public void testRowSelectionUsingControlKey() {


driver.get("http://component-showcase.icesoft.org/component-showcase/showcase.iface");
driver.findElement(By.linkText("Table")).click();
driver.findElement(By.linkText("Row Selection")).click();
driver.findElement(By.xpath("//label[@class='iceSelOneRb' and text()='Multiple']")).click();
List<WebElement> tableRows = driver.findElements(By.xpath("//table[@class='iceDatTbl']/tbody/tr"));
//Select second and fourth row from table using Control Key.Row Index start at 0
Actions builder = new Actions(driver);
builder.click(tableRows.get(1)).keyDown(Keys.CONTROL).click(tableRows.get(3)).keyUp(Keys.CONTROL).
build().perform();
//Verify Selected Row table shows two rows selected
List<WebElement> rows = driver.findElements(By.xpath("//div[@class='icePnlGrp
exampleBox']/table[@class='iceDatTbl']/tbody/tr"));
assertEquals(2,rows.size());
}
Usage in ActionClassWithKeyBoard.java
Using Action Classes for advance interaction with mouse
• The Advanced User Interaction API provides a method to perform a double-click.
• We can use the Actions class to perform double-click operations.

public void testDoubleClick() {


driver.get("DoubleClickDemo.html");
WebElement message = driver.findElement(By.id("message"));

// Verify color is Blue


assertEquals("rgba(0, 0, 255, 1)",message.getCssValue("background-color"));

Actions builder = new Actions(driver);


builder.doubleClick(message).perform();

// Verify Color is Yellow


assertEquals("rgba(255, 255, 0, 1)",message.getCssValue("background-color"));
}

Usage in ActionClassDoubleClick.java
Performing drag-and-drop operations using Action Classes
• Selenium WebDriver implements Selenium RC's dragAndDrop method using the Actions class.
• Actions class supports advanced user interactions such as firing various mouse and keyboard events.
• We can build simple or complex chains of events using this class

public void testDragDrop() {


driver.get("DragDropDemo.html");

WebElement source = driver.findElement(By.id("draggable"));


WebElement target = driver.findElement(By.id("droppable"));

Actions builder = new Actions(driver);


builder.dragAndDrop(source, target) .perform();
assertEquals("Dropped!", target.getText());
}

Usage in ActionClassDragAndDrop.java
Context Menus using Action Classes

• A context menu (also known as a shortcut, a popup, or a pop-up menu) is a menu displayed on a web page
that appears when a user performs a right-click mouse operation

• The Selenium WebDriver Actions class provides the contextClick() method to perform a right-click
operation

public void testContextMenu() {


driver.get(" http://swisnl.github.io/jQuery-contextMenu/demo/accesskeys.html ");
WebElement clickMeElement = driver.findElement(By.cssSelector("div.context-menu-one.box.menu-1"));
WebElement editMenuItem = driver.findElement(By.cssSelector("li.context-menu-item.icon-edit"));

Actions builder = new Actions(driver);


builder.contextClick(clickMeElement).moveToElement(editMenuItem).click().perform();

WebDriverWait wait = new WebDriverWait(driver, 10);

Alert alert = wait.until(ExpectedConditions.alertIsPresent());


assertEquals("clicked: edit", alert.getText());
alert.dismiss();
}
Usage in ActionClassContextMenu.java
Executing Java Script code

• The Selenium WebDriver provides the ability to execute JavaScript code with the browser window.
• This is a very useful feature when tests need to interact with the page using JavaScript.
• Selenium WebDriver provides a JavascriptExecutor interface that can be used to execute arbitrary JavaScript code within the
context of the browser.

public void testJavaScript() {


JavascriptExecutor js = (JavascriptExecutor) driver;
String title = (String) js.executeScript("return document.title");
System.out.println(" Page title : " + title);
long links = (Long) js.executeScript("var links = document.getElementsByTagName('a'); return links.length");
System.out.println(" No of links : " + links);
String linkHref = (String) js.executeScript("var linkValue = document.getElementsByTagName('a')[0].getAttribute('href');
return linkValue");
System.out.println(" First link href attribute : " + linkHref);
}

• We can also pass arguments to the JavaScript code being executed by using the executeScript() method.
• If we want to set the value of an element. A speical argument array will be used inside the JavaScript code

public void testJavaScript() {


driver.get(“htmlFile");
js.executeScript("document.getElementById('userId').value = arguments[0]","Myuname");
}
Usage in JavaScriptExecution.java
Capturing Screenshots with Selenium WebDriver

• Selenium WebDriver provides the TakesScreenshot interface to capture a screenshot of a web page.

• This helps in showing exactly what happened when an exception has occurred .

• The TakesScreenshot interface provides the getScreenshotAs() method to capture a screenshot of the
page displayed in the driver instance. The getScreenshotAs() method takes OutputType.FILE as an
argument to, so that it will return the captured screenshot in a file

• We can save the file object returned by the getScreenshotAs() method using the copyFile() method of
the FileUtils class from the org.apache.commons.io.FileUtilsclass

public void testTakesScreenshot() throws Exception {


driver.get(“Any Screen.html”);
File scrFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("target/main_page.png"));
}

Usage in TakeScreenShot.java
Running tests in headless mode with PhantomJS

• PhantomJS is a headless Webkit-based browser. We can use PhantomJS in conjunction


withSelenium WebDriver to run basic functional tests.
• We can download the appropriate binary from http://phantomjs.org/
• We need to add a dependency in the maven pom.xml file, as follows
<dependency>
<groupId>com.github.detro</groupId>
<artifactId>phantomjsdriver</artifactId>
<version>1.2.0</version>
</dependency>

• When tests are run with PhantomJS, we will not see graphical browser opening and actions
being performed. We will see the execution log on the console

• It also generate a log file in project root folder like ../prjRootFolder/phantomjsdriver.log

Usage in PhantomjsTest.java
Browser Navigations

• Browsers provide various navigation methods to access web pages from the browser history or by
refreshing the current page with the back, forward, and refresh/reload buttons on the browser window's
toolbar.

• The Selenium WebDriver provides access to these browser buttons with various methods
Navigation interface. We can test the behavior of the application when these methods are used.

Method Description

back() This method moves back to the page in browser history.

forward() This method moves forward to the page in browser history.

refresh() This method reloads the current page.

• Code Syntax
driver.navigate().back();
driver.navigate().forward();
driver.navigate().refresh();
Synchronization with Selenium Tests

• While building automated scripts for a complex web application using Selenium WebDriver, we need to
ensure that the test flow is maintained for reliable test automation.

• When tests are run, the application may not always respond with the same speed.

• We can handle these anticipated timing problems by synchronizing test to ensure that Selenium
WebDriver waits until your application is ready before performing the next step.

• Selenium provides several options to synchronize test

1. Synchronizing a test with an implicit wait


2. Synchronizing a test with an explicit wait
3. Synchronizing a test with custom-expected conditions
4. Synchronizing a test with FluentWait
Synchronizing a test with an implicit wait

• When an implicit wait is implemented in tests, if WebDriver cannot find an element in the DOM, it will
wait for a defined amount of time for the element to appear in the DOM. Once the specified wait time is
over, it will try searching for the element once again. If the element is not found in specified time, it will
throw the NoSuchElement exception.
• Once set, the implicit wait is set for the life of the WebDriver object's instance
• The Selenium WebDriver provides the Timeouts interface to configure the implicit wait. The Timeouts
interface provides an implicitlyWait() method , which accepts the time the driver should wait when
searching for an element. The driver will wait for an element to appear in DOM for specified seconds after
an initial try.
• If an implicit wait is not set back to 0, every time an element is searched for using the findElement()
method, the test will wait for 10 seconds for an element to appear.

public void testWithImplicitWait() {


driver.get(“www.wikipedia.org");
// Set the implicit wait time out to 10 Seconds
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
driver.findElement(By.id("searchInput")).clear();
driver.findElement(By.id("searchInput")).sendKeys("India");
driver.findElement(By.id("searchButton")).click();
}
Usage in SyncImplictWait.java
Synchronizing a test with an explicit wait
• The Selenium WebDriver provides an explicit wait for synchronizing tests, which provides a better way to
wait over an implicit wait. Unlike an implicit wait,we can write and use pre-defined conditions or custom
conditions for wait before proceeding further in the code.
• The Selenium WebDriver provides the WebDriverWait and ExpectedConditions classes to implement an
explicit wait.
• The ExpectedConditions class provides a set of predefined conditions to wait for before proceeding
further in the code

Precondition ExpectedConditions class method


An element is visible and enabled elementToBeClickable(By locator)

An element is selected elementToBeSelected(WebElement element)

Presence of an element presenceOfElementLocated(By locator)

Specific text present in an element textToBePresentInElement(By locator, String text)

Title titleContains(java.lang.String title)


Code Example
public void testExplicitWaitTitleContains()
{
driver.get("http://www.google.com");
WebElement query = driver.findElement(By.name("q"));
query.sendKeys("selenium");
query.click();

//This will wait for 10 seconds for timeout before title is updated with search term
//If title is updated in specified time limit test will move to the text step instead of waiting for 10 seconds
WebDriverWait wait = new WebDriverWait(driver, 10);
wait.until(ExpectedConditions.titleContains("selenium"));

//Verify Title
assertTrue(driver.getTitle().toLowerCase().startsWith("selenium"));
}

Usage in SyncExplicitWaitExpectedCondition.java
Synchronizing a test with custom-expected conditions

• With the explicit wait mechanism, we can also build custom-expected conditions required by a test case.
• This is useful when a wait cannot be handled with a common condition(s) supported by
the ExpectedConditions class.
• until() method of WebDriverWait class is an overloaded function which can take two types of parameters

1. com.google.common.base.Function - Function< ? super WebDriver, V> : A Function here is a generic


interface which asks us to implement following method i.e. V apply(WebDriver d)
apply method accepts input as WebDriver and it will return value of type V . Example

Function<WebDriver, Boolean> f1 = new Function<WebDriver, Boolean>()


{ public Boolean apply(WebDriver arg0) { return null; } };

Function<WebDriver, String> f2 = new Function<WebDriver, String>()


{ public String apply(WebDriver arg0) { return “text”; } };

2. com.google.common.base.Predicate - Predicate<T> : A Prediacte here is a generic interface which asks us


to implement following method i.e. Boolean apply(T input)
Predicate<WebDriver> pred = new Predicate<WebDriver>() {
public boolean apply(WebDriver d) { return d.getTitle().toLowerCase().startsWith("Oliver"); } };

Usage in SyncExplicitWaitCustomCondition.java
Synchronizing a test with FluentWait
• The FluentWait class is an implementation of Selenium WebDriver's Wait interface.
• FluentWait uses a maximum timeout value and polling frequency. For example, if we set the maximum
timeout value as 20 seconds and polling frequency as 2 seconds, WebDriver will check for an element
every 2 seconds until the maximum value.
• We can also configure FluentWait to ignore specific types of exceptions while waiting for the condition

public void testFluentWaitUsingFunction(){


WebElement element = driver.findElement(By.name("q"));
element.sendKeys("Oliver Twist");
element.submit();

Wait<WebDriver> wait = new FluentWait<WebDriver>(driver)


.withTimeout(20, TimeUnit.SECONDS)
.pollingEvery(2, TimeUnit.SECONDS)
.ignoring(NoSuchElementException.class);
Function<WebDriver, Boolean> f1 = new Function<WebDriver, Boolean>() {
public Boolean apply(WebDriver arg0) {
return arg0.getTitle().startsWith("Oliver"); } };
new WebDriverWait(driver, 20).until(f1);
Assert.assertEquals(driver.getTitle(),"Oliver Twist - Google Search");
}

Usage in SyncFluentWait.java
Handling a simple JavaScript alert box

• Web developers use JavaScript alerts to inform users about validation errors, warnings, getting a response
for an action, accepting an input value, and so on. Alert's are modal windows displayed by browsers where
user has to take action before processing further

• The Selenium WebDriver provides an Alert interface for handling alerts. It provides various methods for
interacting with an alert box.

• The driver.switchTo().alert() method throws a NoAlertPresentException exception when it tries to access


an alert box that doesn't exist.

public void testSimpleAlert() {


driver.get("Alerts.html");
driver.findElement(By.id("simple")).click();
new WebDriverWait(driver, 10).until(ExpectedConditions.alertIsPresent());
Alert alert = driver.switchTo().alert(); // Get the Alert
String textOnAlert = alert.getText(); // Get the text displayed on Alert
assertEquals("Hello! I am an alert box!", textOnAlert);
alert.accept(); // Click OK button, by calling accept method
}

Usage in JavaScriptSimpleAlert.java
Handling a confirm and prompt alert box
• A confirm box is often used to verify or accept something from the user. When a confirm alert is displayed,
the user will have to click on either the OK or the Cancel button to proceed
• A prompt box is often used to accept a value from a user. When a prompt box pops up, the user will have
to enter a value and click on either the OK or the Cancel button to proceed

public void testConfirmAccept() {


driver.findElement(By.id("confirm")).click();
Alert alert = driver.switchTo().alert();
alert.dismiss();
WebElement message = driver.findElement(By.id("demo")); // Check Page displays correct message
assertEquals("You Dismissed Alert!", message.getText());
}

public void testPrompt() {


driver.findElement(By.id("prompt")).click();
Alert alert = driver.switchTo().alert();
alert.sendKeys("Foo");
alert.accept();
WebElement message = driver.findElement(By.id("prompt_demo"));
assertEquals("Hello Foo! How are you today?", message.getText());
}
Usage in JavaScriptConfirmAndPromptAlert.java
Identifying and handling frames
• HTML frames allow developers to present documents in multiple views, which may be in a separate child
window or sub-window

• A page with frames is created using the <frameset> tag or the <iframe> tag. All frame tags are nested with
a <frameset> tag

• Frames can be identified using the driver.switchTo().frame() method of the


WebDriver.TargetLocator interface, which is used to locate a given frame or window using the id, name,
instance of WebElement, and the index
Code Example
public void testFrameWithIdOrName() {
// Activate the frame on left side using it's id attribute
assertEquals("This Frame doesn't have id or name", msg.getText());
driver.switchTo().frame("left");
WebElement msg = driver.findElement(By.tagName("p"));
assertEquals("This is Left Frame", msg.getText());
// Activate the Page, this will move context from frame back to the Page
driver.switchTo().defaultContent();
// Activate the frame on right side using it's name attribute
driver.switchTo().frame("right");
WebElement msg = driver.findElement(By.tagName("p"));
assertEquals("This is Right Frame", msg.getText());
driver.switchTo().defaultContent();
// Activate the frame in middle using it's index. Index starts at 0
driver.switchTo().frame(1);
WebElement msg = driver.findElement(By.tagName("p"));
driver.switchTo().defaultContent();
}
Usage in WebFramesIdORName.java
Identifying and handling a child window
• In Selenium WebDriver, testing multiple windows involves identifying a window, switching the driver context to the window,
then executing steps on the window, and finally, switching back to the browser.
• The Selenium WebDriver provides a way to switch between the browser and windows and change the context of the driver.
To move to a child window the driver.switchTo().window() method is used. This method accepts the name or
handle attribute of the window.
• The driver.switchTo().window() method throws the NoSuchWindowException exception when it fails to identify the desired
window. Windows can be closed by calling the driver.close() method

public void testWindowUsingName() {


// Store WindowHandle of parent browser window
String parentWindowId = driver.getWindowHandle();
// Clicking Help button will open Help Page in a new child window
driver.findElement(By.id("helpbutton")).click();
// Switch to the Help window using name
driver.switchTo().window("HelpWindow");
// Check the driver context is in Help window
assertEquals("Help", driver.getTitle());
// Close the Help window
driver.close();
driver.switchTo().window(parentWindowId);
// Check driver context is in parent browser window
assertEquals("Build my Car - Configuration", driver.getTitle());
}

Usage in WebMultipleWindows.java
Identifying and handling a window by its title
• Many a time, name attribute of windows is missing. In such cases, we can use its
window handle/title attribute. Using the handle/title attributes of the page displayed in a window, we can
build a more reliable way to identify child windows.
• The driver.getWindowHandles() method returns the handles of all the open windows in a list. We
can then iterate through this list and find out the matching window by checking the title of each window
using the handle attribute

public void testWindowUsingTitle() {


String parentWindowId = driver.getWindowHandle();
driver.findElement(By.id("visitbutton")).click();
// Get Handles of all the open windows and iterate through list
try {
for (String windowId : driver.getWindowHandles()) {
String title = driver.switchTo().window(windowId).getTitle();
if (title.equals("Visit Us")) {
driver.close(); // Close the Visit Us window
break;
}
}
} finally { driver.switchTo().window(parentWindowId); }
}

Usage in WebMultipleWindows.java
Data Driven Testing
• Introduction
– The data-driven testing approach is a widely used methodology in software test automation.
– We can use the same test script to check different test conditions by passing set of data to the test
script.
– In the simplest form, the tester supplies inputs from a row in the table and expected outputs, which
occur in the same row.

• Data-driven approach – workflow


– In the data-driven approach, we can maintain the test data in form tables in a variety of formats,
such as CSV files, Excel spreadsheets, and databases.
– We implement test scripts after reading input and output values from data files row by row, then
passing the values to the main test code. Then, the test code navigates through the application,
executing the steps needed for the test case using the variables loaded with data values.

• Benefits of data-driven testing


– With data-driven tests, we can get greater test coverage while minimizing the amount of test code
we need to write and maintain
– Data-driven testing makes creating and running a lot of test conditions very easily
– Test data can be designed and created before the application is ready for testing
– Data tables can also be used in manual testing
Data driven using CSV file and JUnit

• JUnit is a popular testing framework used to create Selenium WebDriver tests in Java.
• We can create data-driven Selenium WebDriver tests using the JUnit 4 parameterization feature. This can
be done by using the JUnit parameterized class runner feature
• We can export test data in CSV format. We can use OpenCSV library to read a CSV file.

How to create data driven testing class (CSVTestDataJunit.java)


1. Create a new JUnit test class that uses a parameterized runner using @RunWith(Parameterized.class):
2. Declare instance variables for the parameterized values in the class
3. Add a constructor to the class, which will be used by the test runner to pass the parameters to the
class instance
4. Create a method getTestData that will read test data from csv file using OpenCSV
5. Create a method testData using @Parameter that will call getTestData method
6. Finally, add the test case method like testBMICalculator() that uses parameterized variables.
7. Also, add the setup()and teardown() methods to the class

How it works
For each row in the test data returned by the testData() method, the test runner will
instantiate the test case class, passing the test data as parameters to the test class constructor, and then
execute all the tests in the test class.

Usage in CSVTestDataJunit.java
Data driven using CSV file and TestNG

• TestNG is another widely used testing framework with Selenium WebDriver. It is very similar to JUnit.
• TestNG has rich features for testing, such as parameterization, groups etc
• We can create data-driven Selenium WebDriver tests using the TestNG DataProvider feature

How to create data driven testing class (CSVTestDataUsingTestNG.java)


1. Create a new test class
2. Create a data feeder method using annotation @DataProvider. The return type of this method should
be 2d Object class array i.e. Object[ ][ ]
3. Create a method getTestData that will read test data from csv file using OpenCSV
4. Add the test case method in such a way that this method accepts all input and output parameters
mentioned in test data csv file.
5. Link test case method to the data feeder method by passing the name of the dataProvider method to
the @Test annotation
5. Also, add the setup()and teardown() methods to the class

How it works
TestNG will execute the test one by one for all rows mentioned in test data csv file. In TestNG, we do not
need a constructor and instance variable for the test case class to pass the parameter values. TestNG
does the mapping automatically. TestNG supports parameterization at the test level.

Usage in CSVTestDataUsingTestNG.java
Using PageObject

• The Page Object design pattern provides an interface where a test can operate on that page in a manner
similar to the user accessing the page, but by hiding its internals. For example, if we build a Page Object
for a login page, then it will provide a method to log in, which will accept the username and password and
take the user to the home page of the application.
• The test need not worry about how input controls are used for the login page, their locator details, and so
on. It will instantiate the login page object and call the login method by passing the username and
password.
• To implement the Page Object model in tests, we need to create a Page Object class for each page that is
being tested. For example, to test the BMI Calculator application, a BMI Calculator page class will be
defined, which will expose the internals of the BMI Calculator page to the test, as shown in following
diagram. This is done by using the PageFactory class of Selenium WebDriver
Using the LoadableComponent class in Page Object

• We can implement the objects of the Page Object model using the LoadableComponent class of Selenium
WebDriver. This provides us a standard way to ensure that the page is loaded and that the page load
issues are easy to debug.

• To implement an object of the Page Object model as the LoadableComponent class, we need to extend it
from the LoadableComponent base class e.g.
public class BmiCalcPage extends LoadableComponent<BmiCalcPage> { }

• We can override LoadableComponent class methods load() and isLoaded() in the BmiCalcPage class

• The load() method will load the URL of the page we encapsulated in the Page Object, and when we create
the instance of this Page Object in a test, we call the get() method on the BmiCalcPage class, which will in
turn call the load() method, as follows
BmiCalcPage bmiCalcPage = new BmiCalcPage(driver);
bmiCalcPage.get();

• The isLoaded() method will verify that the indented page is loaded by the load() method.
Using nested PageObject pattern
• We can use the Page Object model to implement the objects of a page in a complex web
application to simplify the testing
• Each page of the application provides the user with the ability to search for products on the
site by entering a query and hitting the search button. When a search query is submitted, the
application returns a new page with a list of products matching the search query

• Browser class, provide a static and shared WebDriver instance for all the pages
• HomePage class, allows us to navigate to the home page of the application. It also provides
access to the Search class, which is shared among the various pages of the application
• Search class allows us to search for products in the application
• SearchResult class, which is nested in the Search class represents the results page when the
user submits a search query. It also provides access to the Search class so that users can
search again for a different query.
Extending Selenium WebElement Class

• Implementing an extension for the WebElement object to set the element attribute values
• Implementing an extension for the WebElement object to highlight elements
• Creating an object map for Selenium tests
• Capturing screenshots of specific elements in Selenium WebDriver
Implementing an extension for WebElement object to set
the element’s attribute values and highlighting it

• Setting an element's attribute can be useful in various situations where the test needs to manipulate
properties of an element. For example, for a masked textbox, the sendKeys()method may not work well,
and setting the value of the textbox will help to overcome these issues.
• The WebElement interface does not have a direct method that supports setting all types of attributes.

public static void setAttribute(WebElement element, String attributeName, String value) {


JavascriptExecutor jsdriver = (JavascriptExecutor) driver;
driver.executeScript("arguments[0].setAttribute(arguments[1], arguments[2])", element, attributeName,
value);
}

public void highlightElement(WebElement element) {


JavascriptExecutor jsDriver = (JavascriptExecutor) driver;
jsDriver.executeScript("arguments[0].setAttribute('style', arguments[1]);",
element,"border: 4px solid orange;");
jsDriver.executeScript("arguments[0].setAttribute('style', arguments[1]);“, element, "");
}
Usage in WebElementExtender.java
Capturing screenshots of elements in the Selenium WebDriver

• The TakesScreenshot interface captures the screenshot of the entire page, current window,
visible portion of the page.
• It does not provide a way to capture an image of the specific element.

public File captureElementSpecificScreenShot(WebElement element) throws IOException{


File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
BufferedImage img = ImageIO.read(screen);
int width = element.getSize().getWidth();
int height = element.getSize().getHeight();
Rectangle rect = new Rectangle(width, height);
Point p = element.getLocation();
BufferedImage dest = img.getSubimage(p.getX(), p.getY(), rect.width,rect.height);
ImageIO.write(dest, "png", screen);
return screen;
}

Usage in TakeElementSpecificScreenShot.java
Creating Object Map for Selenium Tests
• Selenium WebDriver needs locator information to find the elements on the page. When a
large suite of tests is created, a lot of locator information is duplicated in the test code. It
becomes difficult to manage locator details when the number of tests increases. If any
changes happen in the element locator, we need to find all the tests that use this locator and
update these tests

• One way to overcome this problem is to use page objects and create a repository of pages as
reusable classes.

• There is another way to overcome this problem—by using an object map. An object or a UI
map is a mechanism that stores all the locators for a test suite in one place for easy
modification when identifiers or paths to GUI elements change in the application under test.
The test script then uses the object map to locate the elements to be tested

Usage in ObjectMap.java, ObjectMapTest.java


THANKYOU

You might also like