--- title: "Containerize Playwright tests with Docker" canonical: "https://docs.getxray.app/space/XRAY/301409084/Containerize%20Playwright%20tests%20with%20Docker" format: markdown --- > ℹ️ ### 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](https://github.com/Xray-App/tutorial-js-playwright) 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
Expand For this example we will use the code from the Xray [Playwright Tutorial](https://getxraydocs.atlassian.net/wiki/display/XRAY/Testing+web+applications+using+Playwright) 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 will use Playwright code created for one of our tutorials [here](https://github.com/Xray-App/tutorial-js-playwright) and 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** ```shell 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** ```shell 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** ```shell 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** ```shell 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** ```shell # 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** ```shell 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")** ```shell #!/bin/sh npm run test curl -H "Content-Type: multipart/form-data" -u : -F "file=@xray-report.xml" http:///rest/raven/2.0/import/execution/junit?projectKey= ``` We can now run the container and invoke that script to run the tests and ship the result back to Xray like so: ##### **Command line** ```shell 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](https://docs.docker.com/storage/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 - [https://playwright.dev/docs/test-intro/](https://playwright.dev/docs/test-intro/) - [https://playwright.dev/](https://playwright.dev/) - [https://hub.docker.com/](https://hub.docker.com/) - [https://www.docker.com/](https://www.docker.com/) > Macro (toc) > Macro (style)