Are TDD and automated UI testing compatible?

a diagram depicting the key elements of test-driven development

Image credit: SoapUI

Test-driven development is awesome — unless you’re dealing with UI testing automation.

Sure, test-driven UI development is technically possible, but TDD isn’t exactly ideal for situations requiring full functional tests, and full functional tests are indispensable to UI testing. For this reason, using TDD for UI border on overengineering. Choose this path, and you’ll end up working with mock objects or project object models (POM), adding new layers of complexity to your project. And in many cases, you won’t be able to tell if doing this will pay off.

Besides, the way UI testing automation is done in real-life projects another problem. In real life, UIs — and web UIs in particular — undergo a lot of tweaking. No matter how well-specked your UI is, once you do a UI prototype and play around with it, changes are always coming.

So how do people do UI testing automation in a TDD project?

The short answer is they don’t.

What they do instead is clearly separate concerns between the UI and the underlying logic with MVC, MVP, MVVM, or similar architectural patterns. Basically, the main idea here is to keep the UI logic minimal so it’s mostly a view layer invoking services. This way, most projects can minimize the need of testing on the UI layer.

Most companies using this approach will plan to run UI testing automation once the UI is stable. But in many real-life cases, companies never automate their UI tests at all and fall back on manual testing. This happens due to several reasons:

  • Proper UI testing requires a browser which makes test execution slow and resource-hungry.
  • UI tests require everything to work (including your web server, service, database, etc.), so they are a lot harder to get to pass.
  • Most development frameworks offer excellent support for unit tests, yet they lack decent built-in support for UI test automation.

Given these factors, manual UI testing might seem like a reasonable option to many. However, we all know that manual testing is a painful road that dead-ends into a dark cave.

manual testing compared to stone-age craft

Image credit: Shutterstock.

Anybody out there?

So if you can’t really do effective TDD for UI, what can you do? If you do commit to automating UI testing, the traditional choices are low-level frameworks like Selenium or complex solutions like QTP. Neither one ensures good ROI, both require development skills, and the more tests you write, the bigger is the maintenance pain. Hardly an alternative for the awesomeness of TDD.

The logos of Selenium and QTP

Image credit: Alecia Petridis

In the end, most companies will keep a small number of automated smoke tests, fall back on manual tests, and pray that their developers are writing bug-free code. Oh yeah, and there’s always the shameful option of letting users report bugs and fixing them…

But wait! It’s not hopeless. There are new platforms coming out that challenge the status quo and promise pain-free UI testing automation. To deliver on this promise, these new platforms need to succeed where currently-used QA automation solutions have failed. In particular, they need to focus on these three challenges:

  • They should handle visual and CSS regressions.
  • They should be much easier to build and maintain than what current tools offer.
  • They need to provide a higher ROI as compared to manual UI testing.

Visual regression testing with Screenster

Screenster is a QA automation platform that has been specifically built for testing web UIs. The platform offers a new take on visual regression testing by capturing the visual baseline, along with the DOM baseline of a UI. Whenever you introduce a change, Screenster will compare the new UI version to these baselines and detect regressions.

Visual regression testing with Screenster: a screenshot with dynamic UI regions

Thanks to its visual baselines and pixel-perfect comparison algorithms, Screenster is the weapon of choice when it comes to UI testing automation. Instead of targeting individual UI components, the platform processes complete UX scenarios and scans the whole structure of a UI, along with its styles (i.e. CSS) and behaviour. If a particular change is intended, you can add it to the baseline. If some parts of your UI have dynamic content, you can ignore these regions and exclude them from comparison.

Screenster facilitates QA automation by enabling both technical and non-technical people to create UI tests. It provides a UI-based management of the test script which doesn’t require coding, and that saves a ton of time and effort.

Creating new Screenster tests is a matter of minutes and once you try it, you’ll never want to go back to hand-coding. Just record a series of actions required to test the functionality of the UI, and the platform will do everything else for you. Test maintenance is pain-free thanks to magic like smart selectors and auto-healing tests.

Sounds too good to be true? Try it yourself and see if it’ll live up to your expectations.

Bottom Line

In the brave new world of today, the quality of your UI determines the success of your application. If your UI is broken, users will leave. For this reason, thorough UI testing is crucial for 99.99% of software projects. And in many cases, automation of UI testing is the only rational choice.

While using TDD for UI development would be an overkill in most cases, you still need a reliable solution that allows you to automate your UI tests once your UI is stable. With Screenster, you can very quickly secure freshly-built UI with automated tests and manage changes effectively, giving UI developers a much needed safety net.

Doesn’t this seem like something that can benefit your TDD project? Leave a comment and tell us how you deal with UI testing automation in your software development projects.

Want to try Screenster on the cloud?

Try Online

Are TDD and automated UI testing compatible? was last modified: January 24th, 2017 by Ilya Goncharov

WordPress Image Lightbox Plugin