Quality assurance E2E Tests

This project is a containerized version of TestCafe web-based functional testing framework. It allows to run quality assurance end2end tests in the following modes:

• with a real browser installed on your host (for development). Basically you will be asked to open the URL on the browser of your choice to start the tests.
• with headless browsers installed on a Docker image used to run tests in continuous integration

• Note: For development if you have NPM and Node installed locally you can run the test suite without using the Docker image however we strongly recommend to use it.

Getting Started

These instructions will allow you to set the project up and running on your local machine for development and testing purposes.

Prerequisites

• docker
• docker-compose
• GNU make

For Linux users

sudo apt-get install build-essential

For Mac users You can get make with the latest version of Xcode (with Make), available from Apple's Mac Dev Center.

• Docker If you will follow the set-up with Docker (see below) then install last Docker for your specific OS.

Installing

Docker

• with Visual Studio Code

From the root of the project launch the following if you are using Linux and you installed VS code via Snap

code .

For Mac/Windows user just open the VS code manually and the project to your workspace.

In all cases it should automatically propose you to build and run the project into a container. If not just follow the steps indicated on Microsoft's offical documentation. Then open the terminal of the container and run

make install

• without Visual Studio Code

From the root of the project from the host

cd .devcontainer
docker-compose up -d --build --force-recreate
make install

• Note: Independently if you're running the remote container with or Visual Studio Code you will see that on the docker-compose.yml a port configuration mapping. This mapping is used essentially if you want to add breakpoints within the code with VS Code.

Docker is already handling the .env file hence once configured it should be possible to run Docker by reading automatically the environment variables. Unluckily if you are using VS Code it's not actually supported (see this) and therefore when you run VS code with a such configuration

- "${JAVASCRIPT_DEBUG_PORT}:9229"

it fails miserably. We had therefore no other choice to "harcode" it into the docker-file.yml

For more information about the port configuration please take a look at Docker's official documentation

• commands

First install the libraries

make install

Then you can try to run the test suite on a specific domain with the headless way

make tests-search-headless

Of if you want to try it on your host

make tests-search

Without Docker by using Node & NPM installed on host

First install the libraries

npm install

Then you can try to run the test suite on a specific domain

node index.js --domain=search --isBrowserStack=false

Debugging tests with test cafe

You can stop a test and debug it by using

await t.debug();

Or you can run only a specific test by using

test.only('...');

or

fixture.only('...');

For more information please refer to the official TestCafe documentation.

Distro

the distribution installed on the remote container is a Debian 9 based.

Browser versions supported

each browser installed on the container runnable in headless mode has its specific version configurable on the Dockerfile as a build-time ARG variable. These are the versions supported by the quality assurance team therefore it will be our duty to update them when needed.

Software packages versions

each software package within this project is versioned:

• docker-compose
• testcafe (within package.json)
• lint (within package.json)
• nodejs (within Dockefile)

Linter

this project allows you to automatically install a linter. We decide to choose one of the best for Javascript Eslint. You can run it either directly from the remote container if you chose to install the project with Docker

npm run lint

and to apply the fix

npm run lint-fix

or directly from your host through make

make lint

and to apply the fix

make lint-fix

Debugging Javascript code with Visual Studio

it's possible to add break points on the code so to debug it. By clicking on the left icon "Run" or "Ctrl+shift+d" you will find on the top a list of commands called "e2e debug {DOMAIN}" which you can run to enable the debugging of the Javascript code.

Page Object Pattern

Page object is a design pattern that is recommended as best practices. The functionality classes (PageObjects) in this design represent a logical relationship between the pages of the application. The current project takes also inspiration of:

"A page object wraps an HTML page, or fragment, with an application-specific API, allowing you to manipulate page elements without digging around in the HTML." by Martin Fowler

"By introducing the “elements as first class citizens” principle it is now possible to build up large test suites using this pattern. There are no additional packages required to create page objects. It turns out that Object.create provides all necessary features we need:

• inheritance between page objects
• lazy loading of elements and
• encapsulation of methods and actions

The goal behind page objects is to abstract any page information away from the actual tests. Ideally you should store all selectors or specific instructions that are unique for a certain page in a page object, so that you still can run your test after you’ve completely redesigned your page." by WebDriverIO

Object repository pattern

We aim to have end2end tests resilients to change therefore we adopted the Selenium object repository pattern. Within the properties file all the locations of the DOM elements or the values used by the tests are defined as constants.

Useful links

https://devexpress.github.io/testcafe/example/ https://devexpress.github.io/testcafe/documentation/getting-started/ https://devexpress.github.io/testcafe/documentation/using-testcafe/using-testcafe-docker-image.html#test-on-the-host-machine