Initial version of a e2e test suite created with Cypress and Cucumber

[Holger-Mayer]

Introduce Cypress test framework for e2e testing

Overview

The Protractor test package reached end-of-life in August 2023. A new end to end testing solution is necessary. Cypress is a modern Javascript based testing solution for e2e and component tests. This pull request implements an initial installation of a Cypress test suite. Currently, we only test basic front-end functions. These tests and the test infrastructure code behind these lay the base for further test suite enhancements. The implemented test framework adds a Cucumber interface to Cypress, allowing tests to be described in Gherkin and executed using Javascript glue code.

Installation

The following have been installed and are now included in the package.json.

You need these for Cypress with Cucumber. npm install --save-dev [email protected] - npm install --save-dev @badeball/cypress-cucumber-preprocessor npm install --save-dev @bahmutov/cypress-esbuild-preprocessor npm install --save-dev ts-loader

We need concurrently and wait-on for starting the angular application and wait for the start of the testing until the website is ready

npm install --save-dev concurrently npm install --save-dev wait-on

We need rimraf because when switching between Cypress App and headless testing, Cypress gets problems with the .angular/cache. rimraf is used to delete the cache before starting a headless test.

npm install rimraf --save-dev

Configuration Changes

The file e2e/cypress/fixtures/config.json is loaded by the test suite for the base URLs of the rest server app and the Angular front end app. If these are not the standard values, these need to be changed.

cypress.config.ts

Defines core parameter for cypress, especially the paths to test and result files.

tsconfig.json

This change is necessary for using Cypress with the Cucumber preprocessor.

    "paths": {
        "@badeball/cypress-cucumber-preprocessor/*": ["./node_modules/@badeball/cypress-cucumber-preprocessor/dist/bundler-utils/*"]
      }

package.json

Package.json changed for

• new scripts
• additional devDependencies

README .md

The e2e test paragraph underwent changes.

A test suite documentation README.md is available under e2e/cypress/docs/README.md.

.gitignore

I changed the Git ignore to prevent storing the result files of a test run in git.

First simple frontend tests - form validation

I implemented form validation tests and CRUD-Tests for pet owner. Once this pull request is accepted, we can and should implement additional tests.

Future steps

• CRUD-Tests for all objects
• Workflow tests

Current Bug in Angular Application

Currently, there is a bug in the veterinarian edit function of the angular application. While the html source code specifies a minimum length for the veterinarian’s first name, the application does not. It needs at least 2 characters for a valid first name.

Github Actions

The test suite is not integrated into the Github actions script!

This should be done at a late evolution step of the suite instead of right now possibly creating havoc.