On preventing your test suite from becoming too user interface-heavy

In August of last year, I published a blog post talking about why I don’t like to think of automation in terms of frameworks, but rather in terms of solutions. I’ve softened a little since then (this is probably a sign of me getting old..), but my belief that building a framework might lead to automation engineers subsequently trying to fit every test left, right and center into that framework still stands. One example of this phenomenon in particular I still see too often: engineers building a feature-rich end-to-end automation framework (for example using Selenium) and then automating all of their tests using that framework.

This is what I meant in the older post by ‘framework think’: because the framework has made it so easy for them to add new tests, they skip the step where they decide what would be the most efficient approach for a specific test and blindly add it to the test suite run by that very framework. This might not lead to harmful side effects in the short term, but as the test suite grows, chances are high that it becomes unwieldy, that the time it takes to complete a full test run becomes unnecessarily long and that maintenance efforts are not being outweighed by the added value of having the automated tests any more.

In this post, I’d like to take the practical approach once more and demonstrate how you can take a closer look at your application and decide if there might be a more efficient way to implement certain checks. We’re going to do this by opening up the user interface and see what happens ‘under the hood’. I’m writing this post as an addendum to my ‘Building great end-to-end tests with Selenium and Cucumber / SpecFlow‘ course, by the way. Yes, that’s right, one of the first things I talk about during my course on writing tests with Selenium is when not to do so. I firmly believe that’s the on of the very first steps towards creating a solid test suite: deciding what should not be in it.

The application under test
The application we’re going to write tests for is an online mortgage orientation tool, provided by a major Dutch online bank. I’ve removed all references to the client name, just to be sure, but it’s not like we’re dealing with sensitive data here. The orientation tool is a sequence of three forms, in which people that are interested in a mortgage fill in details about their financial situation, after which the orientation tool gives an indication of whether or not the applicant is eligible for a mortgage, as well as an estimate of the maximum amount of the mortgage, the interest rate and the monthly installments payable.

Our application under test - the mortgage orientation tool

What are we going to automate?
Now that we know what our application under test does, let’s see what we should automate. We’ll assume that there is a justified need for automated checks in the first place (otherwise this would have been a very short blog post!). We’ll also assume that, maybe for tests on some other part of the bank’s website, there is already a solid automation framework written around Selenium in place. So, this being a website and all, it makes sense to write some additional checks and incorporate them into the existing framework.

First of all, let’s try and make sure that the orientation tool can be used and completed, and that it displays a result. I’d say, that would be a good candidate for an automated test written using Selenium, since it confirms that the application is working from an end user perspective (there is value in the test) and I can’t think of a lower level test that would give me the same feedback. Since there are a couple of different paths through the orientation tool (you can apply for a mortgage alone or with someone else, some people have a house to sell while others have not, there are different types of contracts, etc.), I’d even go as far as to say you’ll need more than one Selenium-based test to be able to properly claim that all paths can be traversed by an end user.

Next, I can imagine that you’d want to make sure that the numbers that are displayed are correct, so your customers aren’t misinformed when they complete the orientation tool. This would lead to some massive issues of distrust later on in the mortgage application process, I’d assume.. Since we’ve been able to add the previous tests so easily to our existing framework, it makes sense to add some more tests that walk through the forms, add the data required to trigger a specific expected outcome and verify that the result screen we saw in the screenshot above displays the expected numbers. Right?

No. Not right.

It’s highly likely that the business logic used to perform the calculation and serve the numbers displayed on screen isn’t actually implemented in the user interface. Rather, it’s probably served up by a backend service containing the business logic and rules required to perform the calculations (and with mortgages, there are quite a few of those business rules, I’ve been told..). The user interface takes the values entered by the end user, sends them to a backend service that performs calculations and returns the values indicating mortgage eligibility, interest rate, height of monthly installment, etc., which are then interpreted and displayed again by that same user interface.

So, since the business logic that we’re verifying isn’t implemented in the user interface, why use the UI to verify it in the first place? That would highly likely only lead to unnecessarily slow tests and shallow feedback. Instead, let’s look if there’s a different hook we can use to write tests.

I tend to use on of two different tactics to find out if there are better ways to write automated tests in cases like these:

  1. Talk to a developer. They’re building the stuff, so they’ll probably know more about the architecture of your application and will likely be happy to help you out.
  2. Use a network analyzing tool such as Fiddler or WireShark. Tools like these two let you see what happens ‘under water’ when you’re using the user interface of a web application.

Normally, I’ll use a combination of both: find out more about the architecture of an application by talking to developers, then using a network analyzer (I prefer Fiddler myself) to see what API calls are triggered when I perform a certain action.

Analyzing API calls using Fiddler
So, let’s put my assumption that there’s a better way to automate the tests that will verify the calculations performed by the mortgage orientation tool to the test. To do so, I’ll fire up Fiddler and have it monitor the traffic that’s being sent back and forth between my browser and the application server while I interact with the orientation tool. Here’s what that looks like:

Traffic exchanged between client and server in our mortgage orientation tool

As you can see, there’s a mortgage orientation API with a Calculate operation that returns exactly those numbers that appear on the screen. See the number I marked in yellow? It’s right there in the application screenshot I showed previously. This shows that pretty much all that the front end does is performing calls to a backend API and presenting the data returned by it in a manner attractive to the end user. This means that it would not make sense to use the UI to verify the calculations. Instead, I’d advise you to mimic the API call (or sequence of calls) instead, as this will give you both faster and more accurate feedback.

To take things even further, I’d recommend you to dive into the application even deeper and see if the calculations can be covered with a decent set of unit tests. The easiest way to do this is to start talking to a developer and see if this is a possibility, and if they haven’t already done so. No need to maintain two different sets of automated checks that cover the same logic, and no need to cover logic that can be tested through unit tests with API-level checks..

Often, though, I find that writing tests like this at the API level hits the sweet spot between coverage, effort it takes to write the tests and speed of execution (and as a result, length of the feedback loop). This might be because I’m not too well versed in writing unit tests myself, but it has worked pretty well for me so far.

Deciding what to automate where: a heuristic
The above has just been one example where it would be better (as well as easier) to move specific checks from the UI level to the API level. But can we make some more generic statements about when to use UI-level checks and when to dive deeper?

Yes, we can. And it turns out, someone already did! In a recent blog post called ‘UI Test Heuristic: Don’t Repeat Your Paths‘, Chris McMahon talked about this exact subject, and the heuristic he presents in his blog post applies here perfectly:

  • Check that the end user can complete the mortgage orientation tools and is shown an indication of mortgage eligibility and associated figures > different paths through the user interface > user interface-level tests
  • Check that the figures served up by the mortgage orientation tool are correct > repeating the same paths multiple times, but with different sets of input data and expected output values > time to dive deeper

So, if you want to prevent your automated test suite from becoming too bloated with UI tests, this is a rule of thumb you can (and frankly, should) apply. As always, I’d love to hear what you think.

12 thoughts on “On preventing your test suite from becoming too user interface-heavy

  1. I usually consider the same approach, that includes:
    – verifying all network requests that app under test does (Chrome Dev Tools)
    – double checking my findings with a developer (I might skip step #1)
    – splitting verification into two parts: webservices and UI
    – checking services with Postman and further automating their testing with Java-Rest assured etc.
    – building Selenium verification for UI (might combine with API validations)

    Above are high-level tests.

    Just wondering, wouldn’t it be slight overhead checking networks requests with such powerful tools like Fiddler or Wireshark? I use them only when troubleshooting requests, made by automation scripts. Chrome devTools -> Network tab gives the pretty descriptive info for web apps I think. But maybe I am missing some business cases for using tools above?

    • Whatever works for you 🙂 If you’re happy with the insight that Chrome dev tools provides, by all means do that. I prefer Fiddler, but to each his own.

  2. Excellent and timely written article.

    More and more companies are heading towards a Continuous Integration approach to delivery and increasing pressure is being applied to testers to create full proof automated tests. A purely ui approach would inevitably lead to brittle tests in the lonn term, but a combination of API tests and ui tests seems to be the way to go.

    I guess its hows to balance the two methods which is difficult to ascertain.

    I’ve used VS 2015 to create webtests, by simply following a user journey through a website. The webtests records requests that are being made from client to the server, which maps out a step by step footprint of a API method.

    Are you aware of any other tools that do something similar. Webtests recording is only available in VS Enterprise edition which is expensive.

  3. I agree 100% on avoiding UI automation tests in situations where automation can be done differently.

    A few years ago, I was involved in a project of delivering a business portal using the Tableau Reporting Tools.

    The portal provided business users with many reports that were incredibly rich in functionality.

    Initially, I thought about automating the testing of the reports, both UI and data, using Selenium.

    The automation of the UI seemed doable initially but in a few weeks, I realized that it is a waste of time.

    One reason was bad HTML attributes, the other the high number of ways of customizing the reports.

    Also, the test automation should have covered verifying that the reports display the correct numbers.

    So I scraped the Selenium automation for the UI and just tested the UI manually.

    I did automation for the report data validations using SQL stored procedures.

  4. Great article. As always :).

    After reading this blog post, I have proved my personal beliefs again.

    I think, that in order to get the most value from your automated tests, the test engineer (automation or not) should firstly look at system’s architecture and effectively decompose the system onto testable parts.
    Then tester should effectively test this parts separately and only after that verify, how the system’s parts works as integrated system.

    The question here is where to start: should we concentrate on business user journeys first and then decompose the system into parts and test it more deeply?
    Or should we start from low level tests and then –
    moving to the top?

    • What I typically see is the latter option, start with small tests for small components and move up. However, I recently read a blog post advocating the other way round, and that had some compelling arguments as well. Couldn’t find a link, unfortunately.

    • The answer to that question is: it depends. Ask yourself why you are testing in the first place? Who is your stakeholder and what do they want? What information are you providing and who is the consumer of that information?

      I believe answering these questions gets you the answer to where to start.

      Hope that helps.

  5. Pingback: Java Testing Weekly 51 / 2017

  6. Interesting stuff as always Bas. I’ve used Fiddler a bit in the past but feel inclined to dive a bit deeper now to get a better understanding of it and use it for my testing.

    Out of interest, in the above example provided if you were to write the tests at the API level using fiddler how could you make these tests repeatable? Is that a facility in Fiddler or would you call these from Selenium(or your test automation tool of choice?). I’m just trying to understand how these API level tests would sit alongside the UI-tests

    Cheers

    Andy

    • Hey Andy,

      I’m using Fiddler just to see what’s happening under the hood, so to say, not necessarily to create and execute tests. Fiddler does have a record and playback function that you could use for that purpose, but my tool of choice here (at least in the Java ecosystem) is REST Assured. Since that’s a Java library, just like Selenium WebDriver is available as a Java library, it’s not that hard to create an automation solution that contains both UI- and API-driven tests.

  7. Pingback: Java Weekly, Issue 208 | Baeldung

Leave a Reply to Alexander Romanov Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.