Let's consider an example
Consider this hotel results page on trivago.com. It displays a series of hotel choices for the user's search criterion.
The page is dynamic, in multiple ways.
- The number of hotels displayed is dynamic.
- The hotels' listed change for every location and from time to time.
- Details for a given hotel are also subject to change from time to time.
- Additionally, not all hotels may display same elements. For example, a "strike-through" or a "discounted" price is not necessarily displayed for all hotel choices.
Let's consider that our objective is to pick one of the hotels displayed either randomly or based on a matching criterion, read its pricing information, and select that hotel.
What is the pattern here?
In the above example, there is a repeatable set of "container" or "anchor" elements, which are the boxes that encompass the details of each hotel. To select a random hotel or a hotel based on some specific criterion, we need to first locate one of these anchor element instances. Once that is done, the member elements like the "Select Hotel" button or "Hotel Name" link can be easily located within that anchor element block.
ACCELQ provides this capability using following element definitions:
- Saving the anchor/container element (a rectangular block that encompasses details of a hotel) as a Repeat element.
- Saving a member element such as the "Select Hotel" button as a child under the anchor element.
Step by step process to work with Anchor elements
Here are the step-by-step instructions to achieve this using the concept of Anchor or Container element in ACCELQ.
Step #1: Identify and save the Container element
- Capture the view into appropriate Context.
- In the View canvas, hover the mouse around one of the hotel choices to find a rectangle that encompasses all the details for a hotel.
- Right-click and "Add to Repository". Make sure to store the element as a "Repeat element" since each of these hotel choices is functionally equivalent and uniqueness is not desired.
Note: Before saving, make sure the Repeat count displayed in the element explorer matches with the number of hotels displayed on the screen.
Step # 2: Capture required elements in the Container
Repeat following process for all elements you are interested to work with, inside the container element:
- Right-click on the element you are interested in. e.g. "Strike-through price" and add to repository.
- When the element explorer opens, change the reference point from "<body>" to the name of the Container element we just created in step #1.
- Make necessary adjustments to selector information. Make sure to use minimal attributes to identify the element. In most cases, you may need only 1 or 2 attributes.
Notice how this element gets a unique match with just the class attribute. Even though there are multiple elements with this class name on the page, we are achieving uniqueness since we are limiting our search within a given Container element.
Step # 3: Develop Action logic
In the Action logic, before you work with any elements under a Container, locate the specific instance of the container you want to work with. In other words, pick the hotel you are interested in. This can be done in 3 different ways:
- By ordinal index: e.g: first hotel or 10th hotel displayed (Locate Container by Ordinal Index)
- By text content: For example, you might want to find a hotel which contains "Holiday Inn" in its name or description (Locate Container by Ordinal Index)
- By a contained element: For example, you might want to find a hotel that displays "strike-through" price (Locate Container by Child Element)
Once this is done, work with the member elements just like you would normally do.
Here is the example that locates the "Renaissance" hotel from the search results.
Notice how all the member elements such as "Select-Hotel Button", "Strike-through price" etc are used straight away without requiring any additional logic.
Container element concept comes in very handy in many situations. It allows you to break down the complexity of dynamic elements to a manageable level. Happy exploration!