Blog

Functional UI/API Cross-Testing

Published on
December 23, 2021
Tessa McDaniel
Content Specialist

UI and API testing are both important for your website, but combining them transforms them into a super-powerup!

UI (user interface) testing and API (application programming interface) testing are both fundamental parts of ensuring that your website is working properly 24/7, but wouldn’t they be more powerful if they were combined? Why, yes, yes they would! We’ll discuss UI and API testing separately, then look at how meaningfully combining (please feel free to skip to this juicy bit) UI or functional and API testing can streamline your efficiency through the green pipe

UI Testing

UI testing tests the interface of the website, but it’s also a bit more complicated than that. It covers functional and visual testing, and there are two types of UIs: command-line interface (CLI) and graphic user interface (GUI). CLIs are definitely complex, as they work by the user inputting commands through a terminal like the Command Prompt app on Windows devices. GUIs are much more intuitive with text fields, buttons to click, pretty much anything you can picture on a modern website. UI testing, for the most part, focuses on GUI testing. It tests how a website can handle actions from the mouse and keyboard, whether or not different elements like buttons and navigation bars work, usability, and so much more. 

API Testing

API is what connects the UI to the backend data part of the website using business logic. That means it determines how data is created, stored, and changed and who can access it. So API testing works on the business logic, data responses, security, and bottlenecks. With API testing, the testing phase can start before the UI is even put together to interact with. It tests how the system responds to requests from the software, not the UI. There are a lot of advantages to API testing. Generally, it is much quicker than UI testing, so bugs can be found and fixed quicker. 

Put Them Together And You Get…

A star-shaped powerup! Ok, not literally, but you will supercharge your testing into overdrive. By combining UI and API testing, you move towards end-to-end testing. Which is…? Ok, let’s keep this simple by going back to basics. Why do we test? Well, it’s to ensure that the application or website being tested functions just as it should and provides a good user experience. So, we want test automation that mimics (as near as possible) a real user’s journey through the app. This is why we create functional tests of the UI. But often, API testing is done in isolation, which is a good thing. There is absolutely a place for stand-alone API testing; it would be madness to argue anything else for the reasons outlined above. That said, if we want to mimic real user journeys through our application, then combining functional UI and API tests gives us an approach that is greater than the sum of its parts. You can automate end-to-end journeys from a user perspective, encompassing the API layer to give a true reflection of the user experience. The advantages are multiple:


⭐ Cross-check front end UI logic with API tests

⭐ Optimize permutations and combinations with a UI setup and API execution 

⭐ Enhanced defect triggering 


Now, we mentioned earlier that UI testing involves both functional and visual testing. So it would be remiss of us not to talk about combining visual regression as well (particularly when you consider that Virtuoso does that as well). Visual regression, or visual testing, validates the look and feel of the user interface against the requirements/specifications. This type of testing tends to be very manually driven, labor-intensive, and not scalable. But imagine a world (and not a pixelated world of Italian plumbers, a real one!) where you could take your functional tests and have a snapshot of the application taken. You can then use these snapshots as a baseline and be alerted to any visual regressions. And isn’t that convenient, we’ve written a blog on just this subject!

By combining UI and API testing, you know everything looks on point, is functioning flawlessly, and integrates with the back end. Now that’s some serious test coverage! Instead of bumping into question-mark boxes, you have the certainty of quality end-2-end testing delivers. The UI and API levels can act perfectly when separate but act up once put together. Plus, you’ll have less test maintenance by running both kinds of tests together. And wouldn’t you know it, but with Virtuoso, you can indeed run functional and visual UI and API tests! So, why wait? Sprint to that flag pole and book a demo to see the cross-testing in action!

Subscribe to our Newsletter