eValid™ -- Automated Web Quality Solution Browser-Based, Client-Side, Functional Testing & Validation, Load & Performance Tuning, Page Timing, Website Analysis, and Rich Internet Application Monitoring.

Introduction
eValid's PageMap feature provides advanced users with a direct view of the detailed structure and organization of the page currently being displayed in the eValid browser.

The information provided is useful during recording and script development to:

• To help understand the current page layout and HTML structure.
• To help understand the current frame and iframe structure.
• To see how many and what kinds of subwindows are currently open.
• To see the actual contents of a text string (as actually known to the browser).
• To aid in understand existing recordings, e.g. to find the actual content of a recorded window index (idx).
• To figure out what kind of object on the screen you're dealing with (right click over it, then read the properties from the PageMap).
• To assist in creating special-purpose playback capabilities, e.g. to find the idx of a particular page element.

Accessing The PageMap
Make sure eValid has focus. Then press Ctrl-F5 to activate the PageMap display for the current page. Or, use the GUI pulldown sequence:

          eValid: Window > PageMap

When it is running the PageMap will reflect the current page and and associated frame(s), iframes, and subframes.

Automatic Update Option
The PageMap feature is normally turned off. To turn it on, click on the small icon at the upper left hand corner of the display. This icon controls whether an updated PageMap tree is generated when the page changes. Clicking on this icon toggles this feature ON and OFF.

Performance Note: Expanding the tree each time may slow down navigation, particularly if you are viewing large and complex pages.

Right Click Activation
The PageMap feature is normally turned OFF. To turn it on, click on the small icon second from the left at the top of the display. Clicking on this icon toggles the right-click feature ON and OFF.

Now, to see the details of a part of the current page, simply right-click on it. The PageMap display will automatically navigate to the DOM element you clicked. When you do, the page display to which the PageMap is tied will blink a black-bordered window around the rendered material associated with that DOM element.

Getting PageMap Help
Click the Help on the top border of the page map to get a popup page which compactly summarizes the contents of this the PageMap display.

PageMap GUI
Here is a sample of the PageMap GUI and a description of the information it presents.

Tree Area (Top Window). This shows the actual tree of elements on the page as revealed through eValid's analysis of the internal document object model (DOM). The "+" and "-" symbols are active: click on them to expand or contract parts of the tree (see below). Caution: If the tree is large you can position the tree to the part of interest using the scroll bars. Information Area (Bottom Window). This area shows the complete details of the current selected element of the tree. After using "+" and "-" to expand and contract the tree, you can click on any element to see its contents. Property Name. The data shown is always for the current highlighted element. These properties vary with the type of the element, but these fields are always present: eValid Frame Path. This is the name eValid is using for the particular frame. Source Index. This is the numeric index value for the element. Class Name. The name of the element class. Content Editable. Is the content editable? Id. The value of the ID attribute for the tab. Wid. The value of the current window number (wid). Value. This is the current value of the particular property of that tree element property name on the left.

• Multiple Pages.
  The PageMap will track what's happening when you have multiple dependent pages. Note that the base page is always "Window 0: ..." and that sub-windows, numbered in the order they are opened, are titled "Window 1: ...", "Window 2: ...", "Window 3: ...", etc.

  If the PageMap is large, you may wish to compress (click on "-") some material to reveal the multiple pages shown in the display. Note that if a page is opened as a sub-window and then closed, its number in the sequence will disappear, but other higher numbered windows will remain with that numbering.

• Splitter and Resizing.
  The size of the PageMap display can be changed and the amount of area devoted to each of the two major parts of the display, by clicking and dragging on the "splitter bar" in the display.

Navigating the PageMap
In the PageMap tree +'s and -'s are active symbols for expansion and contraction of the corresponding part of the tree. Click on a "+" to expand the tree; click on a "-" to contract the tree.

Use the arrow keys on your keyboard to navigate through the tree:

• < collapses the current node
• > expands the current node
• ^ goes up one node
• v goes down one node

PageMap To Screen Feedback
To relate the page map diagram to the current screen, click on an element in the page map. The section of the current page that corresponds to the highlighted element in the PageMap display will blink three times.

The page will automatically reposition itself so that the blinks are visible. Note that some page elements that do not have any visible correspondent on the page will show no effect if clicked.

Screen to PageMap Feedback
Make sure the current page is in focus in the eValid browser, and make sure you have the PageMap turned ON. Move the mouse to the part of the screen you are interested in, and then right click the mouse.

Limits and Constraints
Certain limits and constraints apply to PageMap operation.

• The pagemap will not show details of a frame that does not originate from the same server as the parent frame. In this case the Page Map may say "PageMap is not available".
• Results on some types of objects (e.g. movies or special-format controls) that are visible on the screen may be unpredictable vis-a-vis the PageMap display.
• The "feedback loop" (where you see flashing boxes around the nearest element to the clicked element in the tree) is an approximation and for very complex pages should be viewed as a "localizer" for where an element actually is located on the page.