Web Spy


The Web Spy is used to inspect web applications running on any of the supported web browsers (currently Internet Explorer, Firefox and Chrome). It allows you to view the hierarchy of elements in the web browser Document Object Model (DOM). In addition it makes the testing of dynamic data-driven web applications easier because it lets you test out dynamic XPath or CSS queries against the web page and verify that the elements return match your expectations.


The Web Spy dialog shows a hierarchical representation of the HTML DOM elements that make up the web application being tested as well as the properties of the currently selected object. You can select the object by clicking on the object hierarchy displayed to the left. The properties displayed are categorized into different types that are described below.

The Web Spy also lets you visually highlight an item in the web browser from the object hierarchy and also the reverse - selecting an object in the hierarchy by clicking on its representation in the web browser.

Spy Toolbar

The Web Spy toolbar provides the following tools:


Spy Menu

More tools available in the menu.

web spy menu

DOM Tree

The DOM tree lets you view all of the HTML elements (also known as DOM elements) that make up the web application / web page being tested. The elements are showing in a hierarchical tree representation that mirrors how they are nested on the page. Each element is displayed along with the various attributes (class, id, style, etc.) that are associated with the element:


The DOM elements are color coded.

Sometimes you have more attributes displayed than can be easily red. To make viewing the DOM tree easier, you can use the Web Settings dialog to set a list of attributes that should be excluded from the DOM tree pane.

When you right-click on an element it opens a popup menu with the following options:

Learn Context Menu

Double clicking on an element copies it's XPath to the toolbar.

DOM Element

When you click on an element in the DOM tree its properties are displayed in the DOM Element pane and it is highlighted in the web browser.

web spy element

The properties that are displayed are grouped into the following categories:

Test Results

In addition to navigating the DOM tree and Learning specific elements, the other main capability of the DOM Spy is the ability to create queries using either XPath or CSS to see which objects match the query and then learn the specific result. For example we want to find all the table cells that have at least some style information specified.

Using XPath

If you enter in the XPath query to locate the table cells in the XPath box at the top.


When you click Test it will display all of the DOM elements that match the query:


You can now refine the query to only find the items you want to test.

Using CSS

If you enter in the CSS selector to locate the table cells in the CSS box at the top (if the box is not visible use menu Spy > CSS Enabled).


When you click Test it will display all of the DOM elements that match the query:


You can now refine the query to only find the items you want to test.

In either case, if you can adjust the query to only match a single element, you can then click the appropriate Learn button next to the XPath or CSS edit fields. That will learn the specified query as a new object that can be scripted against in Rapise. This is very useful if you want to dynamically select an object based on its content rather than a hard-coded ID or position. Also you can add an assertion to the test by clicking Verify. It will display properties of the object. You may set checkboxes against properties you want to check during playback.

In addition, in the test results view, when you click on a result:

Maintenance Mode

Since Rapise version 6.2 it is easier to check and update object locators. If you launch the spy from the toolbar (it will be launched in Maintenance Mode) it will show the object tree in the right side panel.

Web Spy Maintenance Mode

To check an object locator simply select the object in the object tree. The result of locator test is indicated by an icon.

If an object is found it will be highlighted in the browser and selected in the tree of application objects (left pane).

To fix a locator for object that is not found do the following:

  1. Select the object in the object tree (right pane)
  2. Select the element by
    • testing XPath locator from the toolbar
    • or directly in the DOM tree (left pane)
    • or by using object tracking.
  3. Press relearn button on the toolbar.

Web Spy Relearn

See Also