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

eValid -- PageMap GUI
eValid Home

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:

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 PageMap Automatic Expansion ON/OFF 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 PageMap Right Click ON/OFF 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.

PageMap GUI Display
  • 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.

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:

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.