Testing Garage: Automation Strategy - How to Automate on Web UI Table for the Data Displayed in Table

Use Case to Automate and a Problem Statement

I read the below question in The Test Tribe's Discord community server. As I read, I realized, we all go through it when we think of automating a use case. The credit of this question is to Avishek Behera.

Picture: Description of a use case to automate and a problem statement

Here is the copy-paste of the use case and problem statement posted by Avishek Behera:

Hello everyone, here is a use case I came across while having a discussion on automating it.
A webpage has a table containing different columns,let's say employees table with I'd, name, salary , date, etc
It also has pagination in UI, we can have 20 rows in one screen or navigate to next 20 records based on how many total records present,it could go about 10 + pages and so on....

Problem statement:
How to validate the data displayed in table are correctly displayed as per column header , also correct values like names, amount etc. Use case is to validate data.
The data comes from an underlying service, different endpoints basically.
Now it's not about automation but about right and faster approach to test this data.
What are different ways can we think of?
I know this is a basic scenario but since I was thinking of different possible solutions.
One way my friend suggested to use selenium, loop through tables ,get values ,assert with expected. Then it is time consuming, is it right approach just to validate data using selenium?

These are the useful attributes of this question:

It had the preset of context and the context information to the reader
The availability of context information gave an idea of

What would API look like
The request and type
The response and details
The consumer of this API

It helped to imagine and visualize how the data would be interpreted by consumers to render
I get to see what Avishek is looking for in the said context

Interpreting the Use Case and Problem Statement

What it is?

Looks like the consumer is a web UI interface

Mention of Selenium library supports this interpretation

The response has a data which is displayed in the table kind of web UI
There can be no data to multiple rows of data displayed in the table
Pagination is available for this result in the UI

Is pagination available in the API request and response or not, this is not sure from the problem description
20 rows are shown on one page of a table
The number of pages in the table can be more than one
The response will have a filter flag

I assume that data displayed in the table can be validated accordingly

The response will have the data on the number of result pages

This makes the result in a page to be of fixed length
That is 20 results on each page and I cannot choose the number on the UI
The response will have the offset or a value that tells the number of records displayed or/and returned in the response

Is it a GET or POST request?

This is not said in the problem description
But from the way the problem is described, it looks like a GET request
But should I assume that it is an HTTP request?

I assume it for now!

I assume the data is received in JSON format by the consumer
I assume the data responded by the endpoint or the service, are sorted and returned

The consumer need not process the response, sort, filter, and display
If the consumer has to process the response, then filter, sort and display,

it would be a heavy operation on the client and the client-side automation for this use case

If it is other than an HTTP request, it should not matter much. The underlying working and representation may remain something similar to HTTP requests and responses unless the data is transferred in binary format.

Automation Strategy for the Use Case

The key question I ask myself here is:

What is the expectation from automating this use case?

How I automate and where I automate is important but it comes later on answering the key question. The key is in knowing:

What is the expectation by automating this use case?
What am I going to do from the outcome of this automation?
What if the outcome of the automation gives me False Positive information and feedback?

These questions help me to see:

How should I weigh and prioritize the automation of this use case?
How should I approach automating this use case to be close to precise and accurate with deterministic attributes?
What and whose problem am I solving from automating this use case?

It gives me the lead to the idea of different approaches for automating the same; helps in picking the best for the context

That said, the use case shared by Avishek Behera is not a problem or a challenge with the Selenium library or any other similar libraries. Also, it is not a problem or a challenge with libraries used in the automation of web requests and responses.

Challenges in the Problem Statement

I do not see any problem in automating the use case. But there are challenges in approaching the automation of this use case.

On the web UI, if I automate on data returned, filtered, sorted, and displayed, it is a heavy task for automation. Eventually, this is a very good candidate for soon to be a fragile test.

Do the below said are the expectation from automation of the use case?

To have a fragile test
To have high code maintenance for this use case
To do high rework in the automation when UI of the web change
To complicate the deterministic attribute of this use case automation

If these are not the expectations, then picking an approach that has lower cost and maintenance is a need.

The challenges here are:

It is an Automation Strategy and Approaching challenge
It is a sampling challenge

Yes, automation at its best is as well a sampling, not just the testing

It is about having better data, state, and response which helps to have accuracy in the deterministic attributes of automation

To know if it is a:

true positive
false positive
true negative
false negative
an error
not processable

The layer where we want to automate

The layers which we want to use together in automation, and how much

Automate to what extent for having information and the confidence -- if this sampling works then most data should work in this context of a system?
The availability of test data that helps me to evaluate faster and confidently

Let whatever the system have in the underhood that is GraphQL, gRPC, ReST API, or any other technology stack services, one has to work on -- how to make a request; go through the response, and analyze it in context. Like testing depends on context, automation as well depends on context. In fact, context drives testing and automation better when it is included.

My Approach to Automate this Use Case

I will not automate the functional flow of this use case entirely on the web UI. My thought will be to have those tests which are more reliable and the result influencing and driving the decision.

This thought has nothing to do with the Test Automation Pyramid and its advocacy that is to have the minimal number of UI tests at the UI layer and much more at the integration (or service) layer. I'm looking for what works best in the context and where to have the tests that give me information and feedback so I have the confidence to decide and act.

To start, I identify the below functional tests for the said use case:

Does the endpoint exist and serve?
Assuming it is HTTP, I see what HTTP methods this endpoint serves?
What does the endpoint serve when it has no data to return?

The different HTTP status code this endpoint is programmed to return and not programmed but still returns

What inputs (data, state, and event) does this endpoint need to return the data?
In what format and how the input is sent in the request?
In what format the response will be returned from the endpoint?
Is the response sorted and filtered by the endpoint?
How does the response look when there is no data available for any key?
What if certain keys and their value are not available in the response? How does it impact the client when displaying the data in a table?

For example,

No filter data is returned or it is invalid to a consumer to process
No sorted data is returned or it is invalid to a consumer to process
No pagination data is returned or it is invalid to a consumer to process
The contract mismatch between provider and consumer for data returned

What the web UI shows in the table data

Any locale or environment-specific data format and its conversion when the client consumes the data that is returned by the endpoint
The data when sorted by consumer and provider differs
The data is sorted on a state by the endpoint and that might change at any time when being consumed by the consumer
Is it a one time response or a lazy loading

If it is a lazy response, does the response have the key which tells the number of pages

and more cases as we explore ...

and more tests as we explore ...

Should we automate all of these tests? Maybe no per business needs. Imagine the complexity it carries when automating all these tests at the UI level. But there are a few cases that need to be automated at the UI level.

Then, should we to look at the table rows on different pages to test in this automation? No! But we can sample and thereby we try to evaluate with as much as minimal data. This highlights the importance and usefulness of the Test Data preparation and availability. While, preparing the test data is a skill, the using of minimal test data to sample is also a skill.

API Layer Test

I have a straight case here for first. That is to evaluate:

The key (table header) and its value are returned as expected

Is it filtered?
If yes, is it filtered on key what I want?
Is it sorted upon filtering?
There is no null or no value for a key that needs to have a value in any case
The data count (usually the JSON array object), that is the number of rows
The page index and current offset value
The number of result pages returned by the endpoint

Can I accomplish this with an API test?

Yes, I can and it will be efficient for the given context

I will have five to ten test data which will help me to know if the data is sorted and filtered
Another test will be to receive more than 10 rows and how these data look on filtered and sorted

Especially in case of lazy loading
I will try to evaluate the filtering and sorting with minimal data
I will have my test data available for the same in the system

UPDATE: I missed this point so adding it as an update. I'm exploring the Selenium 4 feature where I can use the dev toolbar and monitor the network. If I can accomplish what I can and it is simple in the context, this will help.

UI Layer Test

I have a straight case here as well to evaluate in the given context:

I assume the provider and consumer abides by the contract

If not then this is not an automation problem
It is a culture and practice problem to address and fix

I assume the data returned data is sorted on the filter; the web UI just consume it to display

If not, I will understand why the client is doing heavy work to filter and sort

What makes it to be this way?

You see, this is not an automation problem; it is a design challenge that can become a problem to product, not jot just for automation

Asserting the data in the web UI table:

I will keep minimal data on the UI to assert that is not more than 4 or 5 rows
These rows should have data that tells me the displayed order is sorted and filtered

Let's call the above 1 and 2 as one test

To evaluate pagination that is number of result pages, I will use the response of API and use the same on the web UI to assert

Let's call the above another test that is the second test
Again, the test data will be the key here

To see if the pagination is interactive and navigatable on UI, I make an action to navigate for page number 'n'

If it is lazy loading, I will have to think about how to test table refresh

Mostly I will not assert for data

In testing the endpoint,

I would have validated for the results returned and its length

I will assert for number of rows in the table now

Let's call it a third test

I will not do the data validations and its heavy assertions on the web UI unless I have no other way

This is not a good approach to pick either
One test will try to evaluate just one aspect and I do not club tests into one test

Note: The purpose of the test is not check if the web UI is loading the same rows in all pages. If this is the purpose, then it will be another test and I will try to keep minimal assertion on the web UI.

The Parallel Learnings

If observed, the outcome of automation and its effectiveness is not just dependent and directly proportional to how we write automation. It is also dependent on:

The design of the system (& product)
The environment and maintenance
The test data and maintenance
The way we sequence the tests to execute in automation
Where and how we automate
The person and team doing the automation

The organization's thought process and vision for testing and automation
The organization's expectation from testing and automation
How, why, and what the people, organization, and customers understand for testing and automation