Selenium

Selenium

Chap 1 : Introduction Selenium

Chap 2 : Selenium IDE Record and Playback

2.1 Install Selenium IDE

2.2 Record and Playback

Chap 3: Webdriver

3.1. Introduction to WebDriver and Comparison with Selenium RC

3.2 Guide to install Selenium WebDriver

3.3 Accessing Form Elements

3.4 Accessing Links & Tables using Selenium Webdriver

Chap 4: TestNG

Reference Sources::

http://www.vntesters.com/gioi-thieu-cong-cu-kiem-thu-tu-dong-selenium/

http://www.guru99.com/selenium-tutorial.html

Chap 1 : Introduction Selenium

Selenium is a free (open source) automated testing suite for web applications across different browsers and platforms such as   IE, Mozilla FireFox, Chrome, Safari, Opera; and system as  Windows, Mac, Linux.

It has 4 components

• Selenium IDE
• Selenium RC (Selenium 1 – Selenium Remote Control)
• Selenium Gird
• Selenium WebDriver (Selenium 2)

Selinium IDE (Integrated Development Environment) : a Firefox add-on that you can only use in creating relatively simple test cases and test suites.

Selenium Gird a tool that is used with Selenium RC to execute parallel tests across different browsers and operating systems.

Selenium RC :  also known as Selenium 1, which is the first Selenium tool that allowed users to use programming languages in creating complex tests.

Selenium WebDriver : the newer breakthrough that allows your test scripts to communicate directly to the browser, thereby controlling it from the OS level.

Chap 2 : Selenium IDE Record and Playback

2.1.  Install Selenium IDE

2.2.  Record and Playback

2.1 Install Selenium IDE

Steps

Launch Firefox and navigate to http://seleniumhq.org/download/. Under the Selenium IDE section, click on the link that shows the current version number.

For security, a Firefox notification will pop up. Click on "Allow."

Wait until Firefox completes the download and then click "Install Now."

Wait until installation is completed. In the pop-up window, click "Restart Now."

After Firefox has restarted, launch Selenium IDE using either of two ways:

• By pressing Ctrl+Alt+S
• By clicking on the Firefox menu button > Web Developer>  Selenium IDE

Selenium IDE should launch as shown below

2.2 Record and Playback

Link demo:  http://newtours.demoaut.com/ , then create simple script. .

Step 1 : Launch Firefox and Selenium IDE. Type the value for our Base URL: http://newtours.demoaut.com/ Toggle the Record button on (if it is not yet toggled on by default). Step 2                                   In Firefox, navigate to http://newtours.demoaut.com/. Firefox should take you to the page similar to the one shown below. Step 3                                   • Right-click on any blank space within the page, like on the Mercury Tours logo on the upper left corner. This will bring up the Selenium IDE context menu. Note: Do not click on any hyperlinked objects or images • Select the "Show Available Commands" option. • Then, select "assertTitle exact:Welcome: Mercury Tours". This is a command that makes sure that the page title is correct. Step 4                                   • In the "User Name" text box of Mercury Tours, type an invalid username, "invalidUN". • In the "Password" text box, type an invalid password, "invalidPW". Step 5                                   • Click on the "Sign-In" button. Firefox should take you to this page.

Step 6                                  

Toggle the record button off to stop recording. Your script should now look like the one shown below.

Step 7                      

Now that we are done with our test script, we shall save it in a test case. In the File menu, select "Save Test Case". Alternatively, you can simply press Ctrl+S.

Step 8                                 

• Choose your desired location, and then name the test case as "Invalid_login".

• Click the "Save" button.

Step 9.                                             

Notice that the file was saved as HTML.

Step 10.

Go back to Selenium IDE and click the Playback button to execute the whole script. Selenium IDE should be able to replicate everything flawlessly.

3 Types of Commands

Actions	These are commands that directly interact with page elements. Example: the "click" command is an action because you directly interact with the element you are clicking at. The "type" command is also an action because you are putting values into a text box, and the text box shows them to you in return. There is a two-way interaction between you and the text box.
Accessors	They are commands that allow you to store values to a variable. Example: the "storeTitle" command is an accessor because it only "reads" the page title and saves it in a variable. It does not interact with any element on the page.
Assertions	They are commands that verify if a certain condition is met.      3 Types of Assertions Assert. When an "assert" command fails, the test is stopped immediately. Verify. When a "verify" command fails, Selenium IDE logs this failure and continues with the test execution. WaitFor. Before proceeding to the next command, "waitFor" commands will first wait for a certain condition to become true. If the condition becomes true within the waiting period, the step passes. If the condition does not become true, the step fails. Failure is logged, and test execution proceeds to the next command. By default, timeout value is set to 30 seconds. You can change this in the Selenium IDE Options dialog under the General tab.

Assert vs. Verify

Common Commands

Command	Number of Parameters	Description
open	0 - 2	Opens a page using a URL.
click/clickAndWait	1	Clicks on a specified element.
type/typeKeys	2	Types a sequence of characters.
verifyTitle/assertTitle	1	Compares the actual page title with an expected value.
verifyTextPresent	1	Checks if a certain text is found within the page.
verifyElementPresent	1	Checks the presence of a certain element.
verifyTable	2	Compares the contents of a table with expected values.
waitForPageToLoad	1	Pauses execution until the page is loaded completely.
waitForElementPresent	1	Pauses execution until the specified element becomes present.

Chap 3: Webdriver

1. Introduction to WebDriver & Comparison with Selenium RC

2. Guide to install Selenium WebDriver  

3. Accessing Form Elements  

4. Accessing Links & Tables using Selenium Webdriver

3.1. Introduction to WebDriver and Comparison with
Selenium RC

Now that you have learned to create simple tests in Selenium IDE, we shall now create more powerful scripts using an advanced tool called WebDriver.

3.1.1 What is WebDriver?

WebDriver is a web automation framework that allows you to execute your tests against different browsers, not just Firefox (unlike Selenium IDE).Now that you have learned to create simple tests in Selenium IDE, we shall now create more powerful scripts using an advanced tool called WebDriver.

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.

Following programming languages are supported by WebDriver

• Java
• .Net
• PHP
• Python
• Perl
• Ruby

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.

3.1.2 WebDriver Vs Selenium RC

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

• They both allow you to use a programming language in designing your test scripts.
• They both allow you to run your tests against different browsers.

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

Architecture

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

• It controls the browser from the OS level
• All you need are your programming language's IDE (which contains your Selenium commands) and a browser.

  

Selenium RC's architecture is way more complicated.

• You first need to launch a separate application called Selenium Remote Control (RC) Server before you can start testing
• The Selenium RC Server acts as a "middleman" between your Selenium commands and your browser
• When you begin testing, Selenium RC Server "injects" a Javascript program called Selenium Core into the browser.
• Once injected, Selenium Core will start receiving instructions relayed by the RC Server from your test program.
• When the instructions are received, Selenium Core will execute them as Javascript commands.
• The browser will obey the instructions of Selenium Core, and will relay its response to the RC Server.
• The RC Server will receive the response of the browser and then display the results to you.
• RC Server will fetch the next instruction from your test script to repeat the whole cycle.

Speed

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

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

Real-life Interaction

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.

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      

API

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.

 

3.2 Guide to install Selenium WebDriver

Step 1 - Install Java on your computer

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

Step 2 - Install Eclipse IDE

Download "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 a ZIP file named "eclipse-java-juno-SR1-win32-x86_64.zip" (the version number "SR1" may change over time).

Inside that ZIP file, there is an "eclipse" folder which contains all the application files. You can extract the "eclipse" folder anywhere you want in your PC; but for this tutorial, extract it to your C drive.

Unlike  other popular software , no installation is required to use eclipse.

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.

1. Create a new project through File > New > Java Project. Name the project as "myproject".
2. Right-click on the newly created project and select New > Package, and name that package as "mypackage".
3. Create a new Java class under mypackage 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.

1. Right-click on myproject and select Properties.
2. On the Properties dialog, click on "Java Build Path".
3. Click on the Libraries tab, and then click "Add External JARs.."
4. Navigate to C:\selenium-2.25.0\ (or any other location where you saved the extracted contents of "selenium-2.25.0.zip" in step 3).
5. Add all the JAR files inside and outside the "libs" folder. Your Properties dialog should now look similar to the image below.

Note: Theo quy ước, tên package bắt đầu bằng chữ thường, tên class bắt đầu bằng chữ hoa

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

3.3 Accessing Form Elements

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.

Entering Values in Input Boxes

The sendKeys() method is used to enter values into input boxes.

Deleting Values in Input Boxes

The clear() method is used to delete the text in an input box. This method does not need    any parameter. The code snippet below will clear out the text "tutorial" in the User Name text box.

Radio Button

Toggling a radio button on is done using the click() method.

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.

Links

Links also are accessed by using the click() method.

Consider the below link found in Mercury Tours' homepage.

You can access this link using linkText() or partialLinkText() together with click(). Either of the two lines below will be able to access the "Register here" link shown above.

Drop-Down Box

Before we can control drop-down boxes, we must do following two things :

1. Import the package org.openqa.selenium.support.ui.Select
2. Instantiate the drop-down box as a "Select" object in WebDriver

As an example, go to Mercury Tours' Registration page (http://newtours.demoaut.com/mercuryregister.php) and notice the "Country" drop-down box there.  

Step 1

Import the "Select" package.

Step 2

Declare the drop-down element as an instance of the Select class. In the example below, we named this instance as "drpCountry".

Step 3

We can now start controlling "drpCountry" by using any of the available Select methods. The sample code below will select the option "ANTARCTICA".

Selecting Items in a Multiple SELECT element

We can also use the selectByVisibleText() method in selecting multiple options in a multi SELECT element. As an example, we will take http://jsbin.com/osebed/2 as the base URL. It contains a drop-down box that allows multiple selections at a time.

The code below will select the first two options using the selectByVisibleText() method.

Select Methods

The following are the most common methods used on drop-down elements.

Method	Description
selectByVisibleText() and deselectByVisibleText() Example:	Selects/deselects the option that displays the text matching the parameter. Parameter: The exactly displayed text of a particular option
selectByValue() and deselectByValue() Example:	Selects/deselects the option whose "value" attribute matches the specified parameter. Parameter: value of the "value" attribute Remember that not all drop-down options have the same text and "value", like in the example below.
selectByIndex() and deselectByValue() Example:	Selects/deselects the option at the given index. Parameter: the index of the option to be selected.
isMultiple() Example:	Returns TRUE if the drop-down element allows multiple selections at a time; FALSE if otherwise. Needs parameters needed
deselectAll() Example:	Clears all selected entries. This is only valid when the drop-down element supports multiple selections. No parameters needed

Submitting a Form

The submit() method is used to submit a form. This is an alternative to clicking the form's submit button.

You can use submit() on any element within the form, not just 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.

Summary

The table below summarizes the commands to access each type of element discussed above.

Element	Command	Description
Input Box	sendKeys()	used to enter values onto text boxes
	clear()	used to clear text boxes of its current value
Check Box, Radio Button,	click()	used to toggle the element on/off
Links	click()	used to click on the link and wait for page load to complete before proceeding to the next command.
Drop-Down Box	selectByVisibleTex deselectByVisibleText()	selects/deselects an option by its displayed text
	selectByValue() deselectByValue()	selects/deselects an option by the value of its "value" attribute
	selectByIndex()/ deselectByIndex()	selects/deselects an option by its index
	isMultiple()	returns TRUE if the drop-down element allowsmultiple selection at a time; FALSE if otherwise
	deselectAll()	deselects all previously selected options
Submit Button	submit()

3.4 Accessing Links & Tables using Selenium Webdriver

Accessing Links

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.

Exact Match

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

.

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

Partial Match

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.

Case-sensitivity

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", the "By.partialLinkText()" method will access these two links separately depending on capitilization of the characters. See the sample code below.

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 <h1>. 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.

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

Accessing Image Links

Image links are images that act as references to other sites or sections within the same 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 practice_webdriver;



import org.openqa.selenium.*;
import org.openqa.selenium.firefox.FirefoxDriver;

public class ImageLink {

   public static void main(String[] args) {
       String baseUrl = "https://www.facebook.com/login/identify?ctx=recover";
       WebDriver driver = new FirefoxDriver();

       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("Welcome to Facebook - Log In, Sign Up or Learn More")) {
           System.out.println("We are back at Facebook's homepage");
       } else {
           System.out.println("We are NOT in Facebook's homepage");
       }
       driver.quit();
   }
}

Result

Reading a 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.

XPath Syntax

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.

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.

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.

Shortcut: Use Firebug

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

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.

Chap 4: TestNG

What is TestNG?

So far we had been doing Selenium tests without generating a proper format for the test results. From this point on, we shall tackle how to make these reports using a test framework called TestNG.

TestNG is a testing framework that overcomes the limitations of another popular testing framework called JUnit. The "NG" means "Next Generation". Most Selenium users use this more than JUnit because of its advantages. There are so many features of TestNG, but we will only focus on the most important ones that we can use in Selenium.

Advantages of TestNG over JUnit

There are three major advantages of TestNG over JUnit:

• Annotations are easier to understand
• Test cases can be grouped more easily
• Parallel testing is possible

Annotations in TestNG are lines of code that can control how the method below them will be executed. They are always preceded by the @ symbol. A very early and quick example is the one shown below.

Annotations will be discussed later in the section named "Annotations used in TestNG", so it is perfectly ok if you do not understand the above example just yet. It is just important to note for now that annotations in TestNG are easier to code and understand than in JUnit.

The ability to run tests in parallel is available in TestNG but not in JUnit, so it is the more preferred framework of testers using Selenium Grid.

Why do we need TestNG in Selenium?

TestNG can generate reports based on our Selenium test results.

• WebDriver has no native mechanism for generating reports.
• TestNG can generate the report in a readable format like the one shown below.

TestNG simplifies the way the tests are coded

• There is no more need for a static main method in our tests. The sequence of actions is regulated by easy-to-understand annotations that do not require methods to be static.

• Uncaught exceptions are automatically handled by TestNG without terminating the test prematurely. These exceptions are reported as failed steps in the report.

Installing TestNG in Eclipse

Step 1

• Launch Eclipse.
• On the menu bar, click Help.
• Choose the "Install New Software..." option.

Step 2

In the Install dialog box, click the Add button

Step 3

1. In "Name", type TestNG.
2. In "Location", type http://beust.com/eclipse.
3. Click OK

Step 4

• Notice that "TestNG - http://beust.com/eclipse" was populated onto the "Work with:" textbox.
• Check the "TestNG" check box as shown below, then click Next.
• Note: In the latest Eclipse (Kepler) you don't have a checkbox for testNG, instead you click on question mark (help) icon which will open up the form, and you can select all and installation will continue as for the remaining instructions. Thanks Jana for the tip!

Step 5

• Click Next again on the succeeding dialog box until you reach the License Agreement dialog.
• Click "I accept the terms of the license agreement" then click Finish.

Step 6

Wait for the installation to finish

If you encounter a Security warning, just click OK

Step 7

When Eclipse prompts you for a restart, just click Yes.

Step 8

After restart, verify if TestNG was indeed successfully installed. Click Window > Preferences and see if TestNG is included on the Preferences list.

First test case using annotations

Before we create a test case, we should first setup a new TestNG Project in Eclipse and name it as "FirstTestNGProject".

Setting up a new TestNG Project

Step 1

Click File > New > Java Project

Step 2

Type "FirstTestNGProject" as the Project Name then click Next.

Step 3

We will now start to import the TestNG Libraries onto our project. Click on the "Libraries" tab, and then "Add Library…"

Step 4

On the Add Library dialog, choose "TestNG" and click Next.

Step 5

Click Finish.

You should notice that TestNG is included on the Libraries list.

Step 6

We will now add the JAR files that contain the Selenium API. These files are found in the Java client driver that we downloaded from http://docs.seleniumhq.org/download/ when we were installing Selenium and Eclipse in the previous chapters.

Then, navigate to where you have placed the Selenium JAR files.

After adding the external JARs, your screen should look like this.

Step 7

Click Finish and verify that our FirstTestNGProject is visible on Eclipse's Package Explorer window.

Creating a New TestNG Test File

Now that we are done setting up our project, let us create a new TestNG file.

Step 1

Right-click on the "src" package folder then choose New > Other…

Step 2

Click on the TestNG folder and select the "TestNG class" option. Click Next.

Step 3

Type the values indicated below on the appropriate input boxes and click Finish. Notice that we have named our Java file as "FirstTestNGFile".

Eclipse should automatically create the template for our TestNG file shown below.

Coding Our First Test Case

Let us now create our first test case that will check if Mercury Tours' homepage is correct. Type your code as shown below.

Notice the following.

• TestNG does not require you to have a main() method.
• Methods need not be static.
• We used the @Test annotation. @Test is used to tell that the method under it is a test case. In this case, we have set the verifyHomepageTitle() method to be our test case so we placed an ‘@Test' annotation above it.
• Since we use annotations in TestNG, we needed to import the package org.testng.annotations.*.
• We used the Assert class. The Assert class is used to conduct verification operations in TestNG. To use it, we need to import the org.testng.Assert package.

You may have multiple test cases (therefore, multiple @Test annotations) in a single TestNG file. This will be tackled in more detail later in the section "Annotations used in TestNG".

Running the Test

To run the test, simply run the file in Eclipse as you normally do. Eclipse will provide two outputs – one in the Console window and the other on the TestNG Results window.

Checking reports created by TestNG

The Console window in Eclipse gives a text-based report of our test case results while the TestNG Results window gives us a graphical one.

Generating HTML Reports

TestNG has the ability to generate reports in HTML format.

Step 1

After running our FirstTestNGFile that we created in the previous section, right-click the project name (FirstTestNGProject) in the Project Explorer window then click on the "Refresh" option.

Step 2

Notice that a "test-output" folder was created. Expand it and look for an index.html file. This HTML file is a report of the results of the most recent test run.

Step 3

Double-click on that index.html file to open it within Eclipse's built-in web browser. You can refresh this page any time after you rerun your test by simply pressing F5 just like in ordinary web browsers.

Annotations used in TestNG

In the previous section, you have been introduced to the @Test annotation. Now, we shall be studying more advanced annotations and their usages.

Multiple Test Cases

We can use multiple @Test annotations in a single TestNG file. By default, methods annotated by @Test are executed alphabetically. See the code below. Though the methods c_test, a_test, and b_test are not arranged alphabetically in the code, they will be executed as such.

Run this code and on the generated index.html page, click "Chronological view".

Parameters

If you want the methods to be executed in a different order, use the parameter "priority". Parameters are keywords that modify the annotation's function.

• Parameters require you to assign a value to them. You do.this by placing a "=" next to them, and then followed by the value.
• Parameters are enclosed in a pair of parentheses which are placed right after the annotation like the code snippet shown below.

TestNG will execute the @Test annotation with the lowest priority value up to the largest. There is no need for your priority values to be consecutive.

The TestNG HTML report will confirm that the methods were executed based on the ascending value of priority.

Multiple Parameters

Aside from "priority", @Test has another parameter called "alwaysRun" which can only be set to either "true" or "false". To use two or more parameters in a single annotation, separate them with a comma such as the one shown below.

@BeforeTest and @AfterTest

@BeforeTest	methods under this annotation will be executed prior to the first test case in the TestNG file.
@AfterTest	methods under this annotation will be executed after all test cases in the TestNG file are executed.

Consider the code below.

Applying the logic presented by the table and the code above, we can predict that the sequence by which methods will be executed is:

• 1st - launchBrowser()
• 2nd - verifyHomepageTitle()
• 3rd - terminateBrowser()

The placement of the annotation blocks can be interchanged without affecting the chronological order by which they will be executed. For example, try to rearrange the annotation blocks such that your code would look similar to the one below.

Run the code above and notice that

@BeforeMethod and @AfterMethod

@BeforeMethod	methods under this annotation will be executed prior to each method in each test case.
@AfterMethod	methods under this annotation will be executed after each method in each test case.

In Mercury Tours, suppose we like to verify the titles of the target pages of the two links below.

The flow of our test would be:

• Go to the homepage and verify its title.
• Click REGISTER and verify the title of its target page.
• Go back to the homepage and verify if it still has the correct title.
• Click SUPPORT and verify the title of its target page.
• Go back to the homepage and verify if it still has the correct title.

The code below illustrates how @BeforeMethod and @AfterMethod are used to efficiently execute the scenario mentioned above.

After executing this test, your TestNG should report the following sequence.

Simply put, @BeforeMethod should contain methods that you need to run before each test case while @AfterMethod should contain methods that you need to run after each test case.

Summary of TestNG Annotations

@BeforeSuite: The annotated method will be run before all tests in this suite have run.

@AfterSuite: The annotated method will be run after all tests in this suite have run.

@BeforeTest: The annotated method will be run before any test method belonging to the classes inside the tag is run.

@AfterTest: The annotated method will be run after all the test methods belonging to the classes inside the tag have run.

@BeforeGroups: The list of groups that this configuration method will run before. This method is guaranteed to run shortly before the first test method that belongs to any of these groups is invoked.

@AfterGroups: The list of groups that this configuration method will run after. This method is guaranteed to run shortly after the last test method that belongs to any of these groups is invoked.

@BeforeClass: The annotated method will be run before the first test method in the current class is invoked.

@AfterClass: The annotated method will be run after all the test methods in the current class have been run.

@BeforeMethod: The annotated method will be run before each test method.

@AfterMethod: The annotated method will be run after each test method.

@Test: The annotated method is a part of a test case

Conclusion

• TestNG is a testing framework that is capable of making Selenium tests easier to understand and of generating reports that are easy to understand.
• The main advantages of TestNG over JUnit are the following.
• Annotations are easier to use and understand.
• Test cases can be grouped more easily.
• TestNG allows us to create parallel tests.
• The Console window in Eclipse generates a text-based result while the TestNG window is more useful because it gives us a graphical output of the test result plus other meaningful details such as:
• Runtimes of each method.
• The chronological order by which methods were executed.

• TestNG is capable of generating HTML-based reports.
• Annotations can use parameters just like the usual Java methods.