Consider the example below. On the kohls.com website, you have this large size doormat menu with several categories of items displayed under it. Testing requires you to click on a particular category and continue the shopping path.
Here are the challenges with automating this particular activity:
- There are multiple departments, and each department presents a huge set of categories. Potentially, there are hundreds of clickable category links (906 when we checked last) across all the departments.
- From time to time, business may add/modify these categories for a given department.
- You would need a parameterizable logic to be able to select any arbitrary category.
Most mundane way to deal with this requirement would be to learn and save each category as a separate element in the repository and setup conditional logic in your Action to click required category. But this approach is not scalable and the logic becomes pretty convoluted very soon. Keeping up with the changes in categories or adding new categories becomes unmanageable. How do we make this sustainable?
This is an example of a situation where the "Repeat Element" nature is not so evident, but in fact very appropriate.
Step 1: Setup your element as a Repeat Element
Note that we are using a regex pattern for the "href" and avoiding the "text" property in element identification.
Step 2: Update element ID in your action logic
In this example, you pass the Category name as action parameter and the objective is to click the particular category.
- In line #1, updating the Department Name link to point to "Home" department using "Set Repeat Element by text". Note: We did not parameterize the Department name, just to demonstrate the variation as an example.
- In line#3, you are pointing the Category link to the desired category that is passed as a parameter to the Action. Category link is clicked in line #4.
This approach is scalable and adapts to any future changes to categories and departments. At the same time, keeps the logic simple, concise and sustainable!
Here are few more examples, where such situations are common:
A custom drop down list where each item in the list is a separate <div> element. List size and items could be static, but the number of items is large making it hard to manage with separate elements for each item.
A grid with sortable column headers, where the column header text or their number could vary from time to time.