End-to-end testing

Introduction

E2E verifies working order of a system from start to end, taking into account real world scenarios the system can run(simulate user experience)

Most of the projects of the applications at the company are mainly in Django with a React frontend.

To accomplish E2E testing, we use playwright. It supports all the major browsers used today.

Getting started

To get started with Playwright, you need to ensure you have playwright installed in your device locally. There are a variety of playwright packages, but as per our standards, we will use Playwright Node.js package.

Installing Node.js

To set up Node.js in Debian/Ubuntu or Fedora, the binary distributions for Node.js are available at Nodesource. The binary setups are directly installed.

For NixOS, the configuration can be found at NixOS packages. You can go ahead and search for the Node.js version best suited. The configuration for that package is then added to etc/nixos/configuration.nix.

environment.systemPackages = [
    pkgs.nodejs_18
  ];

For NixOS users, it is an added advantage if direnv is installed. When you navigate into the specific directory e.g., ci-tests, your environment will be set up.

NOTE: For this to work for Nix-OS users, ensure the directory has an .envrc and default.nix file. shell.nix file also works.

Installing playwright using npm

At the root of your project directory Project, navigate to playwright.

cd playwright

In the playwright directory, there are two more directories:

$ ls
ci-tests staging-tests

To set up a new playwright project use:

npm init playwright@latest

To update an existing project use:

npm install -D @playwright/test@latest

To configure playwright step by step, you will have to:

To install all browsers and all its dependencies:
```
npx playwright install --with-deps
```

To install one browser and its dependencies

npx playwright install chromium --with-deps

Setting up playwright

For continuous integration(`CI`):

Playwright does support Continuous Integration. For more information, visit the playwright ci docs.

Navigate to playwright/ci-tests directory.

In the directory ensure the below files are present:

$ cd ci-tests
$ ls
package.json playwright.config.ts

Then you can proceed with setting up playwright:

To update npm dependencies
```
npm install
```
To install CI dependencies
```
npm ci
```
To install playwright package, browsers and linux dependencies
```
npx playwright install --with-deps
```
To run tests:
```
npx playwright test
```
By default, this test will run in headless mode(No browser will be opened).

For staging tests

In setting up environment for staging tests, it uses the same approach as in setting up for CI. The only difference is that installing dependencies for CI won't be required.

NOTE: Both ci-tests and staging-tests directory will have scripts to assist in setting up the environment easily.

The scripts are:

create-auth.sh: Used to create a cookie file with the session state saved.
record-test.sh: Used to record new tests.
run-tests.sh: Used to run tests.

These scripts check if you have the required environment is set up, if it is not, the script will set up everything. After setting up the environment, the script will proceed to run the next step.

Start off by creating the session state file.
Shows how to run the script in your terminal
The script will prompt you if you want to save the auth.json file.
Proceed to log in.
The auth.json will be created. You can then proceed to record your tests.
To record your tests, proceed to run the next script record-test.sh. The script takes a name argument for the file to be created ./record-test.sh demo.
The script will open a browser and load the required page. It will use the session state that was previously created.
Click on the page elements to record a test.
NOTE: For playwright version 1.40 and above, you get a mini-toolbar that helps you in:
Assert if an element is visible.
Assert if an element contains a specific text
Assert if an element has a certain value
This is the generated script from the above action of recording tests. expect is used in assertions as seen below.
To run the tests, use ./run-tests.sh.
It will open a GUI playwright test runner with all tests. You can then proceed to run the tests.

For visual studio code

Install extension Playwright extention

Click on the vscode's extension icon:

Extension

Search for playwright test, select the below playwright test extension:

Playwright extension

Install the extension:

Playwright extension install

On your keyboard, press ctrl + shift + P. Search for playwright, select Install Playwright.

Playwright install

It will open up the following menu:

set up playwright

For option 1: You can choose to install one or all the browsers.

For option 2: - Use TypeScript as a default(current preferred standard). - You can enable to add GitHub actions if the tests are for CI. - Enable to Install Linux dependencies if you are on Debian/Ubuntu. You can check this option if you are installing playwright for the first time.

Press Ok to proceed: It will install and set up the project.

Installation process

Running playwright tests in visual studio code

To run tests in vscode, click on this testing icon.

Testing

It will scan your tests directory for playwright tests.

Testing 2

To run, click on the triangle icon:

Running tests

1: Lists down all tests functions. You can test normally and also debug from here.
2: You can run the test functions from here.
3: Shows the test results for each session.

The tests will run and the results shown.

For more information, look at the playwright docs for vscode.