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.
These instructions will allow you to set the project up and running on your local machine for development and testing purposes.
- 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.
- 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
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
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.
the distribution installed on the remote container is a Debian 9 based.
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.
each software package within this project is versioned:
- docker-compose
- testcafe (within package.json)
- lint (within package.json)
- nodejs (within Dockefile)
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
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 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
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.
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