Web Spy

Purpose

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.

web_spy1

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:

web_spy_toolbar

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:

web_spy_domtree

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:

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.

web_spy_xpath1

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

web_spy_xpath2

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).

web_spy_css1

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

web_spy_css2

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.

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

See Also