Test Workbench Web UI Tester (RTW Web) is a GUI Functional Tester tool for web applications. Test Workbench Web UI Tester records user actions on the User Interface of the Application under test and generates a test script in simple English like statement, this test script could be used to playback on same Application. It supports HTML5, JQuery and the Dojo-based web application.
Test Workbench Web UI Tester enables automation of web applications through manual capturing or recording of user actions on application under test. It supports automation of standard HTML controls and also the application developed by extended HTML controls which are also referred as customized controls. By default, playback of Customized controls are not supported, testers have to write custom Java code to enable playback of Customized controls which is also referred as descriptive programming. This article will take you through the ways to do descriptive programming to automate specific user actions on web application under test using JavaScript.
Below is the list of few examples of customized controls which could be played back with JavaScript
- Perform UI actions like Double-click, Drag and Drop on UI elements
- Find / Locate the UI elements to perform UI actions like clicks, enter text etc.
- Validate complex arithmetic functions and business logic
- Data from application can be assigned to the test variable which will be used across multiple tests
Invoking JavaScript through Test Workbench Web Test
JavaScript provides the flexibility of interacting with the DOM (Document Object Model) of the rendered web applications within the browser. Testers could leverage and develop their own JavaScript modules to automate various complex requirements, which are not supported by Test Workbench Web UI Tester out of the box.
Test Workbench Web V9.0 includes a new functionality Custom Code (JavaScript) that allows the testers to invoke and run any specific developed JavaScript function defined in the JavaScript file as a test step within the Test Workbench Web UI test. The custom JavaScript test step allows testers to select one or many JavaScript files, which takes care of resolving the dependencies distributed in different files. Thus, it enables testers to execute any specific JavaScript functionality against the Web application under test. With this capability testers can
- Interact and perform action on HTML elements loaded inside browser
- Extract Information from the application, process it and assign back to a variable defined inside Test Workbench Web UI Test that can be consumed later.
- Pass argument from Test Workbench Web UI test to called JavaScript function and accordingly action can be performed on Web UI and vice versa is also possible.
Adding custom JavaScript code as a test step in a Test Workbench Web UI test:
You can add manually JavaScript files (*.js) to Web UI Tests with defined functions.
- 1. Edit the test script.
- 2. Select the launch application node and click on Add or Insert button in the editor and select Custom Code (JavaScript), as shown in figure 1 below. JavaScript files with .js extension are to be kept in a project of your workspace and must be added a test step with in the launch application node.
Figure 1. Custom Code (JavaScript) Menu
- 3. Right-click in any test step and select Insert > Custom Code choice
- 4. In the dialog box that opens, select a JavaScript file to be added to the test step, click OK. It is displayed as links in Referred JavaScripts in the definition pane. A new Test Step will be added to the Test. When a method name is provided, the test step is named CustomCode (JavaScript):method-name, otherwise it is named CustomCode (JavaScript).
Figure 2. Custom code added as a test step in a Web UI test.
- 5. Test step added with custom code (JavaScript) including method name if any.
- 6. Select the step to see the JavaScript custom code definition pane that contains the custom code details. Specify the JavaScript method name to be executed in the Method field. Click the Update button to update the JavaScript file or to add multiple files. The JavaScript custom code will be executed within the Web application. If the JavaScript method has some parameters to be added, specify the parameters in the Arguments field. You can specify the arguments through static text, a variable reference, a datapool reference, or a java custom code.
- 7. One more parameter “Test variable” gets assigned with the return value of the java script method.
Example of automating functional/data validationTo explain this scenario, we have taken a use case to validate product search results on search page. The user needs to validate search results and the results link’s count on page 1 of the ibm.com search results.
Using recorded steps we can easily reach on results page but post that validating searched result is challenging for Test Workbench Web UI Tester as it requires processing of data displayed on the application.
Above validation can be done easily by extending default capability of Test Workbench Web UI Tester with JavaScript methods. Here we have written two JavaScript methods which will be called inside Test Workbench Web UI test wherever it is required. When the test is played back, the called JavaScript method runs whenever Test Workbench Web UI Tester’s playback engine encounter inserted Custom Code(Java Script) step (see Figure 2). While calling JavaScript function, required parameter can be passed from Test Workbench Web UI test to JavaScript function and when execution of JavaScript function finishes, return value can be consumed or assigned to any Test Workbench Web UI Test variable.
Validate that the search result belongs to the searched product:
function validateLinks(searchTerm)
Validate the count of search results:
function getLinks()
function validateLinks(searchTerm):
function validateLinks() will be called by Test Workbench Web UI Test where name of product to be searched will be passed as parameter. First, it locates all the links on the search result page and will filter out search result links. Inside every search result link text, it will search for searched product name. If there is a mismatch, Test Workbench Web UI Test variable will be initialized with error message and control will go back to test. In case of all matches, Test Workbench Web UI Test variable will be initialized with success message.
function validateLinks(searchTerm){var links=document.links;for (i = 0; i < links.length; i++) { if(links[i].getAttribute("id")!=null){ if ((links[i].getAttribute("id").search("ibm-csa-result-link"))!=-1){ if ((links[i].text).search(searchTerm)==-1){ return "Incorrect Search Result.Text is "+links[i].text; } } } } return "PASS: Search results are correct";}
function getLinks():
The getLinks() function finds all links. Iterates through them one by one and matches the text of link with searched product name. Finally the function returns the count of all the matched links.
function getLinks(){var links=document.links;var noOfLink=0;for (i = 0; i < links.length; i++) { if(links[i].getAttribute("id")!=null){ if ((links[i].getAttribute("id").search("ibm-csa-result-link"))!=-1){ noOfLink=noOfLink+1; } } } return noOfLink.toString();}
At the end,Test Workbench Web UI Test variable specified under the details is assigned with the search result count.
The next step after calling the getLinks()JavaScript function is a verification point. This verification point verifies the search result links count on the first search result page. Using Test Workbench Web UI Tester, we are capturing count of search links displayed on user interface and comparing it against actual link count done by JavaScript method.
Both of the above function validateLinks (searchTerm) and getLinks() shows how easily functional data processing and validation can be done using JavaScript methods and how smoothly controls and data flows between Test Workbench Web UI Test and JavaScript functions.
Navanit K Singh
Senior Technical Architect
navanit.s@hcl.com
Navanit is a Senior Technical Architect at HCL Technologies. He has 11 years of experience and is currently leading the Test Workbench Web UI Tester test team.
#RationalTestWorkbench