Using Cypress to test a Web App

Using Cypress to test a Web App

Cooking with Amateurs

πŸ–Ό Cover image by Marta XimenisCampins

πŸ–₯ Check a demo of the App

Some context

During the beginning of the pandemic 🦠, a friend who works as a cook πŸ‘¨πŸΌβ€πŸ³ started to teach us some new recipes during weekly video calls πŸ“². I started this project to manage those cooking recipes and the photos of the resulting dishes 🍽.

I named it "Cooking with Amateurs" ("Cocinando con Amateurs" in Spanish). At the time I was already developing a Components Library πŸ“š named Chemistry-UI (I even wrote a previous postβ€Œ about it!).

I wanted this project to be scalable πŸ’—, and a good showcase of best practices as I'm bored πŸ₯± of doing code tests for potential future employers and I wanted to have a decent portfolio πŸ–Ό.

So, I needed to develop a good test suite βœ… for this project (I even added a coverage script). For unit tests, it was clear to me that I wanted to use Jest and that I was going to focus on the "model" modules, where my main business logic βš™ was gathered. But for Functional Tests, I needed something else πŸ€”.

About Functional Tests Tools

There are a lot of different tools πŸ› . In addition to Cypress, I have worked in the past with Selenium too.

When choosing the right testing library for you βš–, it's important to look for one that somehow "enforces" a good testing paradigm. I have been using Cypress 🌳 in many projects, professional and side projects. It always adapts wonderfully: its API is clear and there are some interesting community-developed pluginsΒ΄πŸ’–.

Can't say I find Selenium so easy to use: in many projects I worked on in the past, app developers had to develop libraries πŸ“š on top of selenium in order to get a consistent platform that every user in the team could use without much effort πŸ˜….

Who should develop these tests?

In big companies, there's usually an independent role πŸ‘©πŸΏβ€πŸ’Ό (QA Engineer, or Testing Engineer) in charge of developing this type of testing. I believe this is not the more optimal management: there're many benefits that you gain when App Developers πŸ‘©πŸΌβ€πŸ’» create functional tests too:

  • Functional tests, as unit tests in TDD, forces you to uncouple πŸͺ“ your code to test it properly. For example, defining an API allows you to mock that API and show any data you want on the UI πŸ–₯. Another case: calling an external module πŸ“ž from inside the module you want to test. You'll find that you need to inject that dependency in a way you can mock it πŸ€₯. This will also result in better quality app code 🌟.

  • If you write descriptively named tests πŸ“„, you can mimic the actual requirements for that development! At some point, I worked on a project that used Selenium + Cucumber πŸ₯’ + an abstraction layer that allowed anybody without technical knowledge to write tests as requirements ✍🏼 (for example: "User enters the page and completes the login").

  • You can randomize the characters and the lengths of the strings that your UI displays πŸ’». This is useful to check the responsiveness of that UI and allows frontend developers to be more aware of possible visual bugs πŸ›.

Some last comments

Functional Tests have a lot of benefits, but you have to develop them in good measure βš–. They are usually expensive to run πŸ’°, so you don't really need to cover all your features. It's better to just cover the core features (for example, the login or the buying process) βœ….

If you want to test complex logic βš™ or achieve a code coverage close to the 100%, you need to invest in unit tests, not functional ones.

So, what do you think? Have you tried Cypress already, do you love it πŸ€—?

Β