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.
- As to how many hotels or what hotels get displayed is completely dynamic.
- Details for a given hotel are also dynamic.
- Additionally, not all hotels may display same elements. For example, a "strike-through" price is not necessarily displayed for all hotel choices.
Let's consider our objective is to pick one of the hotels displayed (based on some requirement), read its pricing information and select that hotel. Here are the step-by-step instructions to achieve this using the concept of Anchor or Container element in accelQ.
Step #1: Identify 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 the store the element as a "Repeat element" since each of these hotel choices is functionally equivalent and uniqueness is not required.
Note: Before saving, make sure the repetition count displayed in the element explorer matches with what is displayed on the screen.
Step # 2: Capture required elements in the Container
Repeat following process for all elements you are interested to work with.
- Right click on the element you are interested. e.g. "Strike-through price" and add to repository.
- When the element explorer opens, change the reference point from "<body>" to the just created container element.
- 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.
Step # 3: Develop Action logic
Before you work with elements under a Container, in the Action logic, identify 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 "Holiday Inn" (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 elements just like you would normally do. Here is the example that works for "Renaissance" hotel.
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!