5 Favorite Web Apps To Practice Test Automation

We recently talked with one of our clients and asked him about some recommendations to get introduced in practicing Test Automation.
He advised us that he always requires an acceptable application under test whenever he needs to undertake some test automation-related exercise or proof of concept. There are a hundred various sample apps available, and it might be difficult to find a nice app while not wasting too much time on it. As a result, he provided us with his selection of top five most often used sample web applications and he gave us a quickly explanation of his selection.

What does he normally require?

He utilizes these applications for the following reasons:

• To conduct a proof of concept for a certain test automation tool/plugin/approach build/test/deploy a realistic application using a minimal CI pipeline.
• To learn about a certain software development tool or concept by reverse engineering and modifying an existing application

Criteria that these applications must meet:

• The major requirement for selecting an example app is the availability of the application's source code. This helps him comprehend the application he's using, he can control the data and prevent interfering with other people (by installing an app on his own), and he can make changes to the program to tailor it to his requirements or induce certain behavior.
• Apps of different complexities – he doesn't want to deploy an app for a half-day merely to run a 15-minute one-method check.
• In addition to UI, he frequently wants an API and a database.

1.- TodoMVC (TasteJS)

Public instance: https://todomvc.com
GitHub: https://github.com/tastejs/todomvc
Underlying technology: ~50 different frontend frameworks

When should we utilize it: Frontend proofs of concept and prototyping. All implementations in various technologies have public instances, and because the app lacks a backend, it might be used without the requirement to develop a private instance.

2.- Restful booker (Mark Winteringham)

Public instance: https://restful-booker.herokuapp.com

GitHub: https://github.com/mwinteringham/restful-booker

Underlying technology: NodeJS/Express

When you may require a CRUD restful API for tool testing or demonstrations, This is a recomendation to use it since it has purposely built-in bugs that can be quite useful for API testing practice.

3.- The Internet (Saucelabs)

Public instance: http://the-internet.herokuapp.com

GitHub: https://github.com/saucelabs/the-internet

Underlying technology: Ruby/HTML/CSS

When should we utilize it: This program is nicely described in the official about section: An example application that captures conspicuous and unsightly web functionality. When you need to experiment with iframes, big DOM, or specialized HTML components, it's fine to use The Internet.

4.- Real World App (Cypress.io)

Public instance: https://www.cypress.io

GitHub: https://github.com/cypress-io/cypress-realworld-app

Underlying technology: NodeJS/Express/React/lowdb

When should we use it: As a simple yet comprehensive web application for E2E testing practice. It also offers a variety of authentication techniques (Auth0, Okta, Amazon Cognito, Google).

End-to-end test automation that is easy to maintain

Our client began building up test automation using Cypress once they had sketched out the manual tests they intended to run on a regular basis - roughly a hundred in total. Cypress is an excellent tool for performing end-to-end testing. It automatically records videos of test runs, and its test runner is Google Chrome, which almost all engineers are acquainted with. It also captures the activities it performed on the DOM on video, providing you with clear, visually debuggable recordings of failed test runs. It's a fantastic tool right out of the box.

Integrating Cypress Test Runs and Results with TestQuality

Selenium, a battle-tested browser automation technology, on the other hand is used elsewhere at our client for process automation. They evaluated it as a way to reduce the number of technologies in the stack, but chose Cypress because of the benefits listed above. It was love at first sight when they first started using Cypress and discovered that integrating TestQuality with GitHub or Jira also worked wonderfully in CI with little configuration!

Their Cypress tests are comprehensive end-to-end tests; nothing is mocked out. They have a staging environment where the tests are conducted, complete with their own clones of the databases and other services required by their platform. The tests were to be written in such a way that they resembled human-readable test stages as much as feasible.

Most of the time, you're reading through a failed exam. That means you have a problem to solve, and understanding the meaning of the test should be the least of your worries. A good test case should be self-documenting and easy to understand. It is also important to consider the reusability of testing code. Assume you have a top bar in your app that allows users to choose between experiences; you'd want to reuse the code that enables those actions.

5.- Realworld (Thinkster & several contributors)

Public instance: https://demo.realworld.io

GitHub: https://github.com/gothinkster/realworld

All implementations: https://codebase.show/projects/realworld

Underlying technology: ~100 different variants of frontend/backend/DB frameworks

When should be used: When we have special needs linked to application technology and we need an application that is as similar to a real app as feasible in terms of complexity that we wish to duplicate. This application needs the setup of a frontend, backend, routing, and a database, thus it is not suitable for short tests.

In terms of technology, remember our recommendation:

• Try to keep the e2e testing as close to user-facing as feasible. This aids with maintenance, readability, and establishes the appropriate standards for the engineering team.
• Don't be scared to incorporate e2e test support right into your API. If you require some UI that is only visible in e2e testing, that's OK — it's a key use case that has to be addressed.

Add TestQuality to your workflow today

TestQuality can simplify test case creation and organization, it offers a very competitive price but it is free when used with GitHub free repositories providing Rich and flexible reporting that can help you to visualize and understand where you and your dev or QA Team are at in your project's quality lifecycle. But also look for analytics that can help identify the quality and effectiveness of your test cases and testing efforts to ensure you're building and executing the most effective tests for your efforts.

Sign Up for a Free Trial and add TestQuality to your workflow today!