To highlight buttons and populate element values from page to page, RTV examines the URL and form field data. When an application uses JavaScript™ to submit data from a page, the posted data may not contain information that RTV can use to accurately highlight. Without using Tealeaf UI Capture, simple modifications can be made to the application to facilitate accurate highlighting, if you want.
These modifications consist of including more information with the form data to indicate the button that was clicked.
- Create a special named hidden form element, and set the value of the form element to the ID of the button that was clicked.
RTV must be configured to use the name. In the Advanced options tab, enter the name of the hidden element as the value for the
Highlight Element Name. The default name is__EVENTTARGET.RTV must also be configured to start JavaScript when it is highlighting. This feature must be enabled so that the population of form field data can cause JavaScripts on the page to run, which triggers any related Ajax requests.
- Verify that the hidden element gets submitted.
- When you highlight a page, RTV looks for the named hidden element in the form data and highlights the button corresponding to its value. The hidden form element can have any name that is constant across all applications that you want to replay.
An example of a page that uses JavaScript to do page submits and that can be modified to allow RTV to highlight the clicked buttons.
<html><head><title>Javscript Highlighting Example</title></head>
<!--
This is an example of how to get accurate replay highlighting of
buttons that do submits via javascript. It consists of creating
a hidden element with a specific name and then setting the name of the
button that was clicked into the hidden element's value at
submit time.
The element of type 'hidden' can be named whatever you want,
it must be named the same across all applications that you want to replay.
You must set "Highlight Element Name" in RTV's Advanced options
tab to match whatever name you choose.
-->
<script>
function doSubmit(buttonId)
{
document.TheForm.__EVENTTARGET.value = buttonId.id;
document.TheForm.submit();
}</script>
<body>
Javscript Highlighting Example
<br><form name="TheForm" action="/JSHighLightExample.html">
<input id="ButtonOne" type="button" value="Button 1"
onclick="javascript:doSubmit(this)">
<input id="ButtonTwo" type="button" value="Button 2"
onclick="javascript:doSubmit(this)">
<input id="ButtonThree" type="button" value="Button 3"
onclick="javascript:doSubmit(this)">
<input id="ButtonFour" type="button" value="Button 4"
onclick="javascript:doSubmit(this)">
<br>
<input id="ButtonFive" type="button" value="Button 5"
onclick="javascript:doSubmit(this)">
<input id="ButtonSix" type="button" value="Button 6"
onclick="javascript:doSubmit(this)">
<input id="ButtonSeven" type="button" value="Button 7"
onclick="javascript:doSubmit(this)">
<input id="ButtonEight" type="button" value="Button 8"
onclick="javascript:doSubmit(this)">
<input type="hidden" name="__EVENTTARGET">
<br>Field 1:<input name="Something1">
<br>Field 2:<input name="Something2">
<br>Field 3:<input name="Something3">
<br>Field 4:<input name="Something4">
<br>Field 5:<input name="Something5">
<br>Field 6:<input name="Something6">
<br>Field 7:<input name="Something7">
<br>Field 8:<input name="Something8">
<br>Field 9:<input name="Something9"></form></body></html>