Working with large set of context menu items in your test application

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 choose a department, click on a particular category and continue the shopping path.

Here are the challenges with automating this particular activity:

1. There are multiple departments, and each department presents a huge set of categories. Potentially, there are hundreds of clickable category links (906, when we last checked) across all the departments.
2. From time to time, business may add/modify these categories for a given department.
3. 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 we use a design pattern called, Similar Elements. Here, all the 906 category links are unique, but at the same time functionally similar, in they way they are used in testing.

Step 1: Setup a sample element to represent all the Similar Elements

Here we are using the "text" property to identify the element and since this alone may be too loose or open, we are also including the href attribute to make sure no other arbitrary text link on the screen will match the category link. This is especially true since we are dealing with hundreds of links, potentially changing from time to time and any such text may appear on the screen in a different context in the future.

Again, since the URL for href actually refers to the specific category (/catalog/sale-for-the-home.jsp?CN=Promotions:Sale+Activity:For%20the%20Home&cc=for_thehome-TN2.0-S-homesale) , we are eliminating that portion with a regex and generalizing to a URL that starts with "/category/".

Step 2: Update element ID in your action logic

Logic demonstrated in this Action clicks on a given Department Name (passed as parameter) and then clicks on a given Category name (passed as parameter). The logic is generalized, so that it works with any set of Department/Categories while at the same time using only TWO elements from the Element Repository.

1. In line #1, updating the Department Name link to point to "Home" department using "Update Element Text Property". We parameterized Department Name so that the Action can be used with any arbitrary Department Name.
2. In line #2, we click the Department Name link. Remember, it is already pointing to the required department, no matter what the original element in the Repository may be pointing to.
3. In line#3, you are pointing the Category link to the desired category that is passed as a parameter to the Action.
4. 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! And just 2 elements to handle 906 Categories!

Here are a 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. These column header elements can be saved as a sample element and update as per the Similar Element concept.