Using Page Objects to manage complexity

NOTE: This is the fourth part of the series. If you haven’t read the previous articles yet here are the links:
-
Clean Up Your Frontend Tests: Part 1. Why we focus on integration tests for UI components
-
Clean Up Your Frontend Tests: Part 2. Tips And Tricks
- Clean Up Your Frontend Tests: Part 3. Reusable testing modules

Credits to Paweł Nowakowski, co-creator of the series.

Image for post
Image for post
Photo by Negative Space from Pexels

As the complexity of features you are implementing grows, so will your test files. More and more cases need to be covered, which is fine. What is worse with the number of cases the file will also fill up with a lot of “plumbing” code. You will need more and more references to the DOM elements to simulate user behavior and assert results. …


Stencil provides a nice support when you want to write tests for your components and apps. It brakes down tests into two categories.

Unit tests are not run within a browser so that they can be simple and fast. You can use them to test bits of logic in isolation, assuming that you are not really simulating some user experience in a realistic way.

When you want to simulate the behaviour of the app, Stencil provides support for end-to-end tests. They are run in a real browser using Puppeteer. …


Why we focus on integration tests for UI components

Credits to Paweł Nowakowski, co-creator of the series.

We believe that writing automated tests for a frontend app is crucial.
We have written quite a lot of them. A report for one of the projects, which was made up of multiple modules, states we recently surpassed 3K tests.

Image for post
Image for post

The effort of writing all of the test code seems to have paid back with a reduced bug count.

What we learned along the way, is that writing a lot of bad tests might actually hurt you more than not writing them at all. …

Stawiarski Jakub

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store