Setting up Element Identification with Element Explorer

What is Element Identification

Element identification involves setting up attributes so as to uniquely identify the element in the whole page. An element may be uniquely identified in several ways. Picking the right criterion to setup the identification is important. Stability of test execution depends a lot on element identification, so particular attention should be paid.

When the test is running, runtime engine makes use of the identification criterion to uniquely spot the element on the application screen. Once the element is identified on the screen, specified operation is performed on it.

With the advent of UX centric and dynamic web applications, element identification has become a complex activity requiring a deep technical understanding of the underlying DOM structure. ACCELQ takes an innovative visual approach to make this process intuitive and reliable.

Element Explorer

You manage element's identification criterion (also known as Selector) using Element Explorer, which is automatically opened when you add a new element to the Context. Editing an existing element also opens Element Explorer.

Element explorer visually displays the structure of the element and allows you to make updates to arrive at the Selector. When you are adding a new element, explorer opens with a pre-defined unique criterion for the element. You can either accept this or further edit as required. As you make changes in the explorer, elements matching the selector are highlighted in the corresponding view.

Layout of Element Explorer

ACCELQ element explorer seamlessly brings the entire DOM hierarchy of the element to help build a stable identification criterion. You construct the selector by using one or more nodes in the DOM hierarchy. For each node that is part of the selector, you select relevant attributes.

Left side portion of Element Explorer displays the element hierarchy (from the DOM analysis) as a tree. Node identified with "E" indicates the element being evaluated. "A1", "A2" etc. refer to ancestor nodes. "D1", "D2" etc refer to descendant nodes for the element in question. 

Clicking on one of the nodes in the tree displays its attributes on the right side and each attribute can be selected/deselected. 

Footer area in the attribute screen shows the number of matching elements with the current identification criterion.

Bottom portion of the screen shows the formulation of the selector, which identifies the nodes and set of attributes for each node that are currently part of the element selector.

Updating Element Selector

When you add an element to a Context, ACCELQ constructs identification criteria for the element by default. For any reason, if you need to modify this, you are guided by a visual interaction.

Click on a node from the DOM tree that you want to edit. You can select required attributes and also change values for these attributes. As you make these changes, ACCELQ calculates the match count dynamically and flashes the number for analysis. These matching items are also highlighted in the corresponding view canvas on the left side. Once you are done with the changes, you can either choose to save the updates or if the node is not yet part of the selector, you can choose to add the new node to the selector.

You can always reset the selector to the default system-calculated value by clicking on the reset icon in the selector area.