Understanding Nodes, Features and UI Elements

TABLE OF CONTENTS

1. Profiling Overview

1.1 Node

1.2 Feature

1.3 UI Element 

1. Profiling Overview

Profiling involves mimicking a UI model of an application under test (AUT) using nodes, features and UI elements.

The following screenshot shows how different parts of the Amazon website are organized into nodes, features, and UI elements, giving a clear view of its structure.

Consider the following example to understand the flow of the interface:

• Node (Screen): The Women's Ethnic Footwear screen, where you can view the product collection.
• Features (Tabs within a Screen): The Delivery and Payment Method tab, where you choose how your order will be delivered and paid for.
• Controls (UI Elements on the Page in the Tab): The Store Pickup option, which you can select from a dropdown or checkbox to choose in-store pickup as your delivery method.

In this example, you first navigate to the Women's Ethnic Footwear screen (Node), then go to the Delivery and Payment Method tab (Feature), and finally select the Store Pickup option (UI element) to complete your selection.

1.1 Node

A Node (page, screens and sections) is formed when several features are combined and mapped to the UI elements. 

You can associate UI elements of an application with specific nodes and features. For example,  pages, screens, and sections can be considered as nodes within the Amazon application's structure.

1.2 Feature

A Feature is a distinct function or section within an application, such as tabs, menus, or pop-ups.

For example, in the preceding screenshot, the following features are shown:

• Handmade Jutti sandals: A feature within the Women Ethnic Footwear Page that displays a collection of handmade Jutti sandals.
• Delivery and Payment: A feature available during checkout where you select your delivery method and payment options.
• Pop-up: A pop-up feature, such as one that appears for adding your location in an Amazon website.

1.3 UI Element 

A UI element (User Interface element) is a control within an application that users interact with to perform tasks or access information. Common UI elements include text boxes, buttons, dropdowns, labels, and radio buttons.

In the preceding screenshot, the following UI elements are shown:

• Color Filter: Allows you to filter footwear by color.
• Price Range: Lets you sort products by price range.