JavaScript Validation

DéjàClick can run user-defined JavaScript code on web pages when replaying recorded transactions. This way you can interact with web page contents using not only the recorded actions. For example, you can:

  • Access any HTML elements through the DOM (Document Object Model).
  • Change the DOM – add, change and remove HTML elements.
  • Make HTTP/Ajax requests using the XMLHttpRequest object.

You can run JavaScript code after specific events in your DéjàClick script. You specify the code to be run in the JavaScript Validation properties of an event.

Note: This feature requires the knowledge of JavaScript and DOM. You can use the following resources as reference materials:
https://developer.mozilla.org/en-US/docs/Web/JavaScript
http://www.javascriptkit.com/jsref/
http://www.javascriptkit.com/domref/

 

Use Cases

In DéjàClick scripts used to monitor transactions, you usually use JavaScript Validations to verify values on web pages. However, you are not limited to validations only. You have the full power of JavaScript to do almost anything you can think of:

  • Check that the total of the shopping cart equals the sum of the individual items in the cart.
  • Check or change CSS attributes, such as text and background colors.
  • Set cookies for transactions (via document.cookie).
  • Verify dynamic content added by client-side scripts. (Unlike Keyword Validations, which look for values in the web page’s source code, JavaScript Validations work with the current web page content.)
  • Send data to the server using HTTP POST.
  • Show additional data on a web page.
  • Rearrange the web page content for a better readability.
  • And more

Creating JavaScript Validations

You can create JavaScript validations when recording, editing and replaying scripts.

 

During recording:

  1. Click Add validations and select Add JavaScript validations.


    DéjàClick: Adding a JavaScript validation

  2. Click anywhere within the web page or frame you want to validate using JavaScript.
  3. Configure the validation.

 

When editing the script:

  1. Open the DéjàClick sidebar.
  2. Record a script, or open a previously recorded script.
  3. In the script, select an action (web page) or event for which you want to add a validation rule.
  4. Validations added to an event run after the event has completed. Action validations run after the last event in the action.
  5. Switch to the Properties tab in the lower half of the DéjàClick sidebar.
  6. Expand the JavaScript Validation group.


    DéjàClick Script Properties: JavaScript Validation

    If you do not see the JavaScript Validation group, click Configure Options and select Display Level > Advanced.
  7. Click Add.
  8. Configure the validation.

 

When replaying the script:

  1. Pause the replay at the page you want to validate.
    Tip: To set a pause before replaying, right-click the needed action (web page) or event and select Pause.
  2. Click Add Validations and select Add JavaScript Validations.
  3. Click anywhere within the web page or frame you want to validate using JavaScript.
  4. Configure the validation (see below).

 

To configure a JavaScript validation:

  1. Enter the JavaScript code to run. The last statement in the code must evaluate to true or false. See Writing JavaScript Code for Validations below.
  2. Select which result to consider as a failure – true or false.
  3. Select what to do if the validation fails:
    Generate an error – stop the script with the "Validation failed" error.
    Continue waiting – retry the validation until it either succeeds, or the event timeout elapses


    DéjàClick: JavaScript Validation Code

  4. (Optional) Under Evaluation Options, select the document (web page or frame) to validate. By default, this is a web page that contains the current event’s target object. If your web page contains several frames, or if it opened other web pages (for example, popups), you may need to select a specific document.
    If you do not see Evaluation Options, replay the script and try again.
  5. Once you are satisfied with the settings, click OK.

You can save the modified script to your computer, or upload it to AlertSite – a worldwide network of monitoring stations – for remote execution.

Writing JavaScript Code for Validations

You can use any JavaScript code whose result is true or false. It can be a single expression:

window.document.getElementById("total").value == 500

or a multi-line script:

var total = window.document.getElementById("total").value;
total == 500

The final result is the value of the last expression. The trailing semicolon (;) is optional.

 

If the code is a function call that does not return a value, append "; true" at the end of the line to use true as the result:

alert("Hello!"); true

 

The result of the code can also be a string or a number. DéjàClick will convert it to the corresponding boolean value:

  • 0, "" (empty string) – false.
  • 1, -1, "done", "true" – true
  • "0" and "false" (in quotes) – also true.

If the final result is of some other type (an object, array, and so on), it is ignored for security reasons. In this case, DéjàClick ignores the validation and continues the replay.

Tips

  • Use window.document instead of document if you are also going to replay your DéjàClick script in Firefox.
  • Use Chrome Developers Tools (F12) to learn the IDs of web page elements.
  • Run your DOM-related code in the browser’s JavaScript console (Ctrl+Shift+J) first to make sure it runs successfully.

Considerations

DéjàClick uses the chrome.tabs.executeScript method to run JavaScript validation code on web pages. The code runs in an isolated environment. This means that it can access web pages’ DOM, but it cannot access other JavaScript functions and variables on the page. Similarly, the scripts cannot access the local file system. The other restrictions depend on specific Chrome and website settings.

Examples

Add the following JavaScript validation to the first event of the script. Replace NAME and VALUE with your values.

var cookie_name = "NAME";
var cookie_value = "VALUE";
document.cookie = cookie_name + "=" + cookie_value;
true

Check CSS Attributes

This code verifies that the warning element’s foreground color is red.

var obj_id = "warning";
var css_prop = "color";
var css_value = "rgb(255, 0, 0)";

var obj = window.document.getElementById(obj_id);
var strStyleValue = window.getComputedStyle(obj, "")[css_prop].toLowerCase();
strStyleValue == css_value

Check Web Page’s Last Modified Date

The code below verifies that the web page was last modified less than 12 hours ago. Add this code to the first event of a web page (action).

var dt = new Date(window.document.lastModified);
var TWELVE_HOURS = 12 * 60 * 60 * 1000; /* ms */
(new Date() - dt) <= TWELVE_HOURS