Design and build a collaborative user experience for a chance to win cool prizes!
Blog

Introducing UI Unit Testing with TestBench

By  
Mikael Sukoinen
Mikael Sukoinen
·
On Sep 27, 2022 2:09:19 PM
·
In Product

Whether you’re testing your application manually or automatically, it’s important that you find looming errors before your users do.

UI Unit Testing is a new feature of Vaadin TestBench that we released with the latest minor platform version, Vaadin 23.2. UI Unit Testing allows you to write unit tests for your user interfaces without running a browser and servlet container. This speeds up your test runs and the results are less flaky compared to the traditional end-to-end tests.

But don't get us wrong, we still love and support end-to-end testing! End-to-end tests are for the entire application and remain the only way to test the UI in a real browser to simulate real-world use. 

UI Unit Testing is a complement to end-to-end tests and it is a great way to test the UI logic in isolation.TestBench still supports the traditional end-to-end tests. This means you can use both UI Unit Testing and end-to-end testing in the same project. 

What is TestBench?

TestBench provides a set of tools for testing Vaadin applications. With the introduction of UI Unit Testing, TestBench now has two different testing modes: UI unit and end-to-end testing.

Traditionally, TestBench has been used for end-to-end testing where the tests are executed in a real browser to simulate user actions. The tests are executed against a running servlet container.

TestBench UI Unit Testing took its inspiration from the Karibu unit testing library by Martin Vsyny. The Karibu unit testing library allows you to write unit tests for your UIs without running the browser and the servlet container. The TestBench UI Unit Testing feature is a reimplementation and expansion of the Karibu unit testing library.

TestBench is a professional feature available in all commercial Vaadin subscriptions or with a Pro trial.

The benefits of UI unit testing

There are two main advantages of unit testing over end-to-end testing with TestBench:

  1. Fast results: UI unit tests are up to 100 times quicker than end-to-end tests. They typically run in 5-60 milliseconds depending on their complexity. This allows you to run 600 UI tests in 7 seconds, as opposed to 1 to 2 hours with an end-to-end test.
  2. Reliable results: As UI unit tests are running in the server without the need to run the browser, they are less flaky than end-to-end tests. The latter is more ambiguous because running the browser during tests is a complex process that can behave differently depending on the browser version, the operating system of the machine, the specifications of the testing machine, etc.

With these benefits, testing can be done continuously for every commit. 

Why choose end-to-end testing?

TestBench end-to-end testing is still an excellent choice for simulating the actions of real-world users of your application. For example, end-to-end testing can verify that a sign-up form works as expected when the user fills in the form with invalid values and submits it. 

Moreover, end-to-end testing enables you to test those parts of your application that are based on JavaScript code or Lit/Polymer templates. These parts cannot be tested with the UI unit testing approach because they are executed in the browser.

These benefits keep end-to-end testing relevant. However, they aren't necessary for every pushed commit.

Get started with TestBench today!

UI unit testing with TestBench tutorial → 

End-to-end testing with TestBench tutorial →  

Not a Pro subscriber? Start a free trial!

Mikael Sukoinen
Mikael Sukoinen
Mikael has a passion for writing text, code and music. He’s currently utilising his skills to explain difficult concepts in plain language at Vaadin Ltd.
Other posts by Mikael Sukoinen