What you'll learn

  • How to create a new docker image
  • How to copy the tests to the docker image
  • How to run the docker image and ship the results to Xray


Overview

Playwright is a recent browser automation tool that provides an alternative to Selenium.

Docker is a containerization technology that lets you create an image with the same operative system, characteristics, versions, code, and configurations you can run everywhere and have the same experience.

In the example below, we use Playwright code to test an application and Xray API to ship the results back to Xray. This is encapsulated in a Node container with all the dependencies installed.

Prerequisites


For this example we will use the code from the Xray Playwright Tutorial and create a customized Docker image that will run the tests and ship the results back to Xray. 

 What you need:

  • Access to Playwright tutorial code
  • Access to Docker hub
  • Docker engine installed

Build a Custom Docker Image

Creating custom Docker images allows testers to tailor their testing environments to specific project requirements. 

For this example, we are going to use the Playwright code that we created for one of our tutorials here, create a Docker container with Node, install Playwright, and copy the code into it. Once the container is ready, we will launch it, execute the tests, and ship the results back to Xray.

Here's a step-by-step guide on building a new Docker image.


Define a Dockerfile

Start with a base image. In our case, Node, to support Playwright.

Use the FROM instruction to specify the base image.

Dockerfile
FROM node:20-bookworm

Notes:

  • Docker Hub has a lot of images available, to enhance stability we advise to use only official images or from Verified publishers
  • Specify the version to use to make sure the experience will be the same for all users


Install Dependencies

Use RUN instructions to install necessary dependencies. For instance, if your tests require Playwright, add:

Dockerfile
RUN npx -y playwright@1.42.0 install --with-deps

Notes:

  • When installing anything in the image make sure you specify the version and install all the dependencies needed (in this case we have defined the version 1.42.0 and used the flag "--with-deps" to install all browsers and OS dependencies with a single command.)


Copy Test Code

Use COPY instructions to add your test code to the image. For example, COPY . /app to copy the local directory into the /app directory in the image.

Dockerfile
COPY . /app

Notes:

  • Make sure you copy everything you need to run your application, in this case we are just copying the code of the application.


Set the Work directory

Use WORKDIR to define the working directory, it's the directory from where the scripts will be executed.

Dockerfile
WORKDIR /app


Expose Ports

If your tests involve services running on specific ports, use the EXPOSE instruction to make these ports accessible.

Build the Image

The final Dockerfile will look like this:

Dockerfile
# Get the base image of Node 
FROM node:21-bookworm

# Install Playwright, browsers and browser system dependencies
RUN npx -y playwright@1.42.0 install --with-deps

# Set the work directory for the application
WORKDIR /app
 
# Set the environment path to node_modules/.bin
ENV PATH /app/node_modules/.bin:$PATH

# COPY the needed files to the app folder in Docker image
COPY . /app

# Install the dependencies in Node environment
RUN npm install


Run the docker build command to build your custom image. Use a meaningful tag to differentiate this image from others you may have on your machine, this tag will be used to run the container.

For example:

Command line
docker build -t playwright-tutorial .

Notes:

  • You can check what images exist on your machine using: docker image ls


Run the Container

Once built, you can run a container based on your custom image using the docker run command. Specify any additional parameters needed, such as environment variables or volume mounts.

For this example we have built a shell script that executes the tests and ships the results back to Xray:

Bash Script (i.e., "shipResultsToXray.sh")
#!/bin/sh

npm run test

export token=$(curl -H "Content-Type: application/json" -X POST --data "{ \"client_id\": \"CLIENT_ID\",\"client_secret\": \"CLIENT_SECRET\" }" https://xray.cloud.getxray.app/api/v2/authenticate| tr -d '"')

curl -H "Content-Type: text/xml" -H "Authorization: Bearer $token" --data @xray-report.xml  "https://xray.cloud.getxray.app/api/v2/import/execution/junit?projectKey=<YOUR_PROJECT_KEY>"


We can now run the container and invoke that script to run the tests and ship the result back to Xray like so:

Comman line
docker run -it playwright-tutorial ./shipResultsToXray.sh

Notes:

  • With the above command we are running the container in iterative mode and launching the script upon start
  • Use docker volumes if you want the container to save any data in your local disk


By combining existing Docker images with your customizations, you can create versatile and tailored testing environments that meet the specific needs of your projects.

This approach ensures consistency and reproducibility in testing, whether running unit tests, integration tests, or end-to-end tests within Docker containers. These containers are ready to be used anywhere, in a local machine or in your CI/CD environment ensuring that all test dependencies are met.



Tips

  • After results are imported in Jira, and if you havent'd already done so directly in the test code, Tests can be linked to existing requirements/user stories, so you can track the impact of their coverage.
  • Results from multiple builds can be linked to an existing Test Plan in order to facilitate the analysis of test result trends across builds.
  • Results can be associated with a Test Environment, in case you want to analyze coverage and test results by that environment later on. A Test Environment can be a testing stage (e.g. dev, staging, prepod, prod) or an identifier of the device/application used to interact with the system (e.g. browser, mobile OS).


References