This page is maintained for older versions of Rapise only. The latest documentation can be found at: https://rapisedoc.inflectra.com
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 objects 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 objects return match your expectations.

 

Screenshot

 

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_ribbon

·Get Snapshot (Ctrl-G): Clicking on this command will refresh the contents of the DOM Tree. This should be done whenever a change is made to the state of the web page in the web browser and you want to view how the DOM objects have been changed after the change.

·Track (Ctrl+T): This tool lets you select items in the web application as rendered by the web browser and have the corresponding object be selected in the DOM tree window. This is useful if you are not sure where an item is located in the DOM tree but you can see it in the browser.

·Highlighting Mode: When this is selected, whenever you select an object in DOM Tree, it will highlight the item in the rendered web page with a red square. This allows you to visually see an item in the DOM tree and how it appears to the user.

·Learn: Clicking on this tool lets you take the currently selected object and add it to the Object Tree for the current test. It can then be used as a scriptable object in the test script. When you click on the Learn button, you have the choice (in the dropdown list) of learning the object in terms of either its XPath or CSS properties.

·Options: Clicking on this brings up the Web Settings dialog box.

·Locators: This section is described separately below in the 'Test Results' section. These tools allow you to try out different XPATH and CSS queries to see which objects match. You can then Learn the results of these queries as new Rapise objects.

 

DOM Tree

The DOM tree lets you view all of the HTML elements (also known as DOM objects) 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 shown in gray, with the attribute names being displayed in red and the attribute values in blue.

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 click on an element in the DOM tree its properties are displayed in the DOM Element pane and it's highlighted in the web browser.

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

oCopy - copies node text to clipboard (no attribute truncation)

oHighlight - highlights the element in the browser

·Double clicking on an element copies it's XPATH and CSS to the ribbon

 

DOM Element

This pane displays the properties of the currently selected object:

web_spy_domelement

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

·Primary

oinnerHTML - this contains a textual representation of all the HTML content inside this element (if any)

otagName - this contains the name of the HTML element in upper case (e.g. TD, TABLE, DIV)

·Attributes - all attributes that are not in the Primary or Accessibility section appear here

oid - this contains the ID of the DOM element, if specified in the page

ostyle - this contains the inline styles defined for the element

oclass - this contains the list of CSS classes applied to the element (separated by spaces if more than one)

·Accessibility - this contains all of the role or aria-* attributes that are defined in the W3C ARIA accessibility standard

orole

oaria-*

·Properties - this contains the computed positional information about the element

oheight

owidth

ox

oy

·Selectors

ocss - this is the CSS selector that can be used to uniquely locate this element. If you click LEARN using CSS, this is what will be recorded with the object.

oxpath - this is the XPath selector that can be used to uniquely locate this element. If you click LEARN using XPath, this is what will be recorded with the object.

 

Test Results

In addition to navigating the DOM tree and Learning specific objects, 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.

a) Using XPath

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

web_spy_xpath1

When you click Test XPath 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.

 

b) Using CSS

If you enter in the CSS selector to locate the table cells in the Locators box at the top.

web_spy_css1

When you click Test CSS 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 Test XPath or Test CSS buttons. 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:

·The right-click popup menu is the same as for DOM Tree if type of the result is a DOM Element

·If the result is simple text then only Copy is available, which copies the text

·Clicking on a DOM element in the results list opens it in DOM Element pane and also selects it in the DOM Tree pane