ECMAScript/JavaScript System Testing

ECMAScript/JavaScript System Testing
Using Selenium-IDE

Prof. David Bernstein
James Madison University

Computer Science Department

bernstdh@jmu.edu

Getting Started

Distribution:
- Selenium-IDE is distributed as a Firefox plug-in
Setting Up:
- Downloading the plug-in will start the installation process (which you will need to "Allow")
- You may need to re-start Firefox to complete the installation

Test Cases and Tests/Test Suites

Test Cases:
- Each test case is saved as an HTML file
Test Suites:
- Each test suite is saved as an HTML file that refers to individual test cases (hence you must save the test cases before you can save the test suite)

The Process

Start Firefox
Start Selenium-IDE by clicking on in the toolbar
Create (or record) one or more test cases
Save each test case
Save the test suite
Play the test suite

Test Cases

Contents:
- A sequence of commands (each of which has 0, 1, or 2 parameters)
Encapsulation:
- Each test case is encapsulated as an HTML table
- Each command is encapsulated as a row (with two columns) in the table
Editing:
- A test case can be edited using the IDE (which is convenient because you can get a complete list of Commands using the dropdown and help using the Reference tab)
- A test case can also be edited using any text editor since it is encapsulated in HTML (which is convenient because you can easily create variants)

Locators (i.e., Locating Elements in a Document

By ID:
- id=elementID
By Name:
- name=elementName
Using the DOM:
- dom=JavaScriptCode
Using XPath:
- A language that is used for locating nodes in an XML document

Important Commands

Open a document:
- open URL
Enter text in an input:
- type locator value
Click on an element:
- click locator
Fire an event:
- fireEvent locator eventName
Make an assertion about text:
- assertText locator pattern
Make an assertion about an element's attribute:
- assertAttribute locator@attribute pattern

An Example Test Case

Based on the BMI Calculator

ecmascriptexamples/systemtesting/normal.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://selenium-ide.openqa.org/profiles/test-case">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="selenium.base" href="https://w3.cs.jmu.edu/" />
<title>normal</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">overweight</td></tr>
</thead><tbody>
<tr>
        <td>open</td>
        <td>https://w3.cs.jmu.edu/bernstdh/Web/common/lectures/ecmascriptexamples/clientsidebasics/bmi-calculator.html</td>
        <td></td>
</tr>
<tr>
        <td>type</td>
        <td>id=weight</td>
        <td>167</td>
</tr>
<tr>
        <td>fireEvent</td>
        <td>id=weight</td>
        <td>input</td>
</tr>
<tr>
        <td>type</td>
        <td>id=height</td>
        <td>69</td>
</tr>
<tr>
        <td>fireEvent</td>
        <td>id=height</td>
        <td>input</td>
</tr>
<tr>
        <td>assertText</td>
        <td>id=bmi</td>
        <td>24.7</td>
</tr>
<tr>
        <td>assertText</td>
        <td>id=category</td>
        <td>normal</td>
</tr>
<tr>
        <td>assertAttribute</td>
        <td>id=category@class</td>
        <td>normal</td>
</tr>

</tbody></table>
</body>
</html>

An Example Test Suite

Based on the BMI Calculator

ecmascriptexamples/systemtesting/bmi-calculator-testsuite.html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta content="text/html; charset=UTF-8" http-equiv="content-type" />
  <title>BMI Calculator Test Suite</title>
</head>
<body>
<table id="suiteTable" cellpadding="1" cellspacing="1" border="1" class="selenium"><tbody>
<tr><td><b>BMI Calculator Test Suite</b></td></tr>
<tr><td><a href="normal.html">normal</a></td></tr>
<tr><td><a href="overweight.html">overweight</a></td></tr>
</tbody></table>
</body>
</html>

About Recording

A Note:
- Selenium-IDE starts in record mode (which you may want to stop by clicking on the record button)
Advantages of Recording:
- Recording can help you get started and save some typing
Shortcomings of Recording:
- Many important events are not fired (and, hence, must be added afterward)
- Assertions must be added afterward