Explore Mode in View Canvas to locate an element

For a web based application, View provides a powerful set of tools to introspect the application page, develop test logic and maintain it for changes in the application. Element is the fundamental entity in a View that you work with. Locating the right element on the page is the first step in achieving this functionality.

When you are hovering in the View canvas in either Action Logic or in the Context, ACCELQ highlights elements on the screen depending on your mouse cursor position. You can then right-click on a hovered element to insert an operation (in Action logic) or to add the element to the repository or to manage it otherwise. In most instances, this direct hover would work.

Hovering on the right element is important

Most modern web applications are rich in presentation, layout, and UX. Your application developer may have prepared the HTML with multiple nested elements in a given functional area, to bring out desired layout and functionality.

When you are hovering on an element, be sure to review the tooltip to make sure you are dealing with the right kind of element. If required, move around the cursor a bit to get to the desired element.

Exploring the View for conflicting element placements

Occasionally, there may be situations where you are not able to hover on the exact element you need on the View Canvas. This could be due to conflicting placement of elements in the page or a popover control hiding the elements you are interested in etc. Sometimes, background elements on a screen with multiple windows may also be an issue.

Xplore Mode allows you to freely navigate and explore the elements on the View canvas in order to pinpoint the element of interest. It allows you to override the default selection of hover-element for a given cursor position. It offers the flexibility of reaching any arbitrary element on the screen, just like you would do on your browser Dev Tool (Inspect Element on Chrome for example).

When you are in the Xplore mode, you can navigate on a set of elements either based on physical vicinity or on the DOM hierarchy.

Switching to Explore Mode

When you are hovering on a View, you can switch to Explore mode by double-clicking on the element vicinity you are interested in. Pick any approximate element in that area and start exploring by double-clicking.

1. You will find a notification bar at the top of the View indicating you are operating in Explore mode. There are two different traversals possible: Vicinity and DOM
2. You can explore elements using keyboard up/down and right/left arrow keys.
3. Regular mouse hover is disabled on the View. Moving the cursor around the screen has no effect.
4. Right-clicking on any other element gives an error message.
5. You can switch to exploring another element-vicinity by double-clicking again.

Exiting from Explore mode

Simplify press the Escape key on your keyboard to exit Explore mode.

Traversing elements based on Vicinity

This is the default Explore mode navigation type. You can navigate between a set of elements based on their physical vicinity on the page. These elements are related by the physical placement, rather than the DOM hierarchy. This is suitable when you are dealing with a set of overlapping elements located at the same cursor position.

All elements which "contain" the double-clicked cursor position are formed as the set and you can use Keyboard Up/Down arrows to go back and forth between these elements. When you find the element-of-interest, right-click and select an operation in the context menu.

Consider an example. We are trying to insert a command on the "Home" link in the figure below. When you hover on the Home link, it is highlighting a <div> element that is much larger in size. This div element is invisible on the screen but rendered at a higher z-index effectively sealing off access to the "Home" link. You cannot access the "Home" link in this state. 

The second image shows when you hover on the "Home" link and double-click. As you can see, the control is now tied to the "Home" link and it also indicates there are 24 elements hitting in the same cursor position. If needed, you can use keyboard up/down arrows to navigate within these 24 elements.

Now that the control is on the "Home" link, we can right-click and insert a command from the context menu.

DOM-based navigation

This navigation list is formed strictly based on the DOM structure. When you start the Explore mode, a set of elements are formed which are part of the same DOM hierarchy as the currently highlighted one.

You can use Keyboard Up/Down/Right/Left arrows to navigate vertically (ancestors) or horizontally (sibling nodes) in the DOM. A classic example could be an ability to navigate from a table cell <td> to a table row <tr> to the table <table>, in the HTML table control on a page. You can double click in a table cell, and press up/down arrow keys to move up to <tr> or <table>, and click on left/side arrow keys to move between sibling table cells.

Switching between DOM and Vicinity Navigation

Simply click on the switch button in the Explore Mode navigation bar in the top.

Vicinity mode collects all elements which consist of the current cursor position in their area of the display. You can navigate between elements in this collection by using Keyboard up/down arrows.

Note: You cannot use keyboard right/left arrows in this mode.

DOM mode allows you to navigate in the DOM hierarchy like accessing a parent, child or sibling. You can navigate by using keyboard up/down (ancestor and child elements) and right/left (siblings) arrows.

Ambiguous Elements on mouse-hover

When you are freely hovering in the View canvas, there may be situations where multiple elements may be present on the screen at the same position. ACCELQ automatically prioritizes these matching elements and points to one of them by default (indicated by the tooltip on the element-hover).

But there may be occasions when this default cannot be determined with an acceptable level of certainty. In those situations, the hover area is marked as "ambiguous" and suggests the user to double-click and switch to Explore mode. Once you are in the Explore mode, you can use the tools available to zero in on the desired element.