How to test a dropdown that depends on the value in another dropdown

Question

I have two drop downs. One of the drop down list is dependent on the Selected item from from other drop down.

I need to verify data in the dependent list is correctly listed based on the selected value. (note:- Both lists are dynamic and gets updated every week)

Eg: IF I select Truck, dependent drop down should have all small parts of truck.

The data coming in the dependent list is not always updated in the application I am working on.

How do I test this using automation(Selenium webdriver and java)?

I was thinking of grabbing data from the SQL DB and storing it in a list and comparing displayed list and acquired list.

Is this approach good, as there are many dependent fields? Also the application has different filters, so need to always verify returned data is accurate.

Answer 1

I agree with points raised by both Peter and Michael.

Assuming the app exposes an API, there should be API tests. You need to test the API to have confidence that that layer works as expected before moving up a layer and testing the UI. What you have pointed out is that there is a problem, what you don't know (yet) is whether the problem is API related or between the interaction between the two components in the UI.

For the API tests, I'd suggest using SoapUI or Postman. With these tools, you can call the API, store the response, then call the db and verify that the response contains the expected db items. Take a look at Asserts. If the API response doesn't match the expected items from the db, then the API test is a fail. You can also trace how long these API calls take, which might help when testing the UI....

In terms of the UI test. Is the speed of the test too fast for the interaction between the two components? Have you tried manually testing with the console window open to see if there are any logging messages? This might give you a clue as to any issues between the two components. In the UI test, you can pause whilst you wait for the parts dropdown to load after the vehicle dropdown has been clicked.

Answer 2

Given that the UI has to call the backend to populate those dropdowns, I would look to do both unit and user acceptance tests

In the unit test you make sure that the rules to determine values used in dropdown#2 that are dependent on the value used in dropdown#1 You use a small set of fake data. You call the methods directly on the backend code.

User acceptance UI tests can then be more simple. One option is to just make sure that you can use the first dropdown value in each of the dropdowns by using key events, for example arrow down and then tab to select the first value in a dropdown. This makes sure that the dropdown works without worrying about the actual values when they are dynamically supplied by the back end or are dependent on the specific value selected in another dropdown.

You will probably not be testing the weekly changes in the production data. That is not practical or the best way to add value.
You will probably not be comparing totals in sql with totals viewed through the app because you assume that the database access and ORM models handle that correctly.

If you still have concerns about data being loaded correctly - perhaps the data extraction and load is complicated and costly - write some tests examples for the data loading process to make sure records with various attributes are being loaded correctly. Each test will use a specific permutation of fixed data for deterministic tests.

Answer 3

If possible, this should be tested on two levels. I'll use your truck example too.

1. Data validity: Testing the question "Do I get back correct list of small truck parts when input is 'Truck'?" Here you focus on the output correctness: does it contain all parts? Does it contain some parts that should not be there? Is some answer provided for all possible inputs? Ideally, you should not test it through UI using Selenium, but via API. Even better if even filtering is provided by the data source. Of course, this depends on how the data gets into the dropdown.

2. When the bulk of the data correctness is tested directly, you can then just check, using Selenium, if the data is correctly presented in UI: if the second dropdown eventually fills, if it's filled with expected content, etc. Because you have confidence in the underlying data source, you need fewer tests over the UI (they are notoriously flakey and slower).

If 1) is not possible, then going with Selenium might be the way to go. If going this way, make sure you only use the minimum possible interaction with the UI. Basically just get the data from the elements as simply as possible.