The NitroX User Interface

When using NitroX you’ll notice some subtle differences to the standard Test Builder user interface. When authoring a Test Case with Test Builder, NitroX will automatically detect custom Lightning Web Components which have matched the mapping criteria when selecting Add to Test Case for an element on the page. You’ll be able to identify if NitroX is being used to map a component by seeing the PageStructure section within Test Builder which shows the structure of the custom component and the field artifact being mapped (type of component).

Above: Snapshot of Test Builder interface.

Page Structure

The Page Structure section displays the component hierarchy used to locate an element on a web page. 

Above: Snapshot of Page Structure.

On selecting each level in the hierarchy, the name and type of the component is displayed and highlighted in blue on the web page.

Above: Snapshot of Filters.

Field Details

The field details section displays the information about the element selected:

• Field Title: the name given to mapping the element, this will be pre-populated if NitroX can identify an appropriate label to be used. 
• Metadata Mapping toggle: provides the ability to use either a metadata approach to storing selected elements attributes and properties to locate it or to allow you to explicitly define the locator using ProvarX
• Metadata fields: the element attributes or properties that can be used to map the element.
• Field Artifact: the type of element selected on the web page.

Above: Snapshot of Field Details.

Depending on the type of element selected you may also be presented with a Field Detail section which has a sub-section called Metadata parameters which gives you the ability to inject parameterised values for certain element attributes or properties when locating the element to make the locator more reusable and reduce duplication.

Above: Snapshot of Metadata Parameters.

This allows you to add and remove parameters and set the appropriate operator and set a literal value to locate the element with.

Above: Snapshot of Metadata Parameters.

Or use Provar expressions to set the desired value for the parameter to locate the element with.

Above: Snapshot of Metadata Parameters.

Interaction Type

The Interaction section displays the interactions available for the type of element selected, the list of available interactions will only display interactions available for the current state of the selected element.

Above: Snapshot of Interaction Type.

Some Field Artifact types may have a specific interaction and user interface to provide a similar user experience for the selected element, for example, the Lightning Slider would appear with a slider:

Above: Snapshot of Interaction Type.

Or provide additional validation for particular fields like dates if Nitrox can extract the relevant information to validate the format of the value provided and mirror the experience of the web page.

Above: Snapshot of Interaction Type.