I will try to demonstrate how I integrated my playwright project with Jenkins and dockerized it. Let's jump into that -

First, open your playwright project and add the Dockerfile to the project's root folder like the image below.

Now it's time to update the Dockerfile. You can add this to your Dockerfile

FROM node:18-bookworm



WORKDIR /usr/src/app

COPY package*.json ./


COPY . .

RUN npm install \ 
    && npx playwright install-deps  \
    && npx playwright install chromium \
    && npx playwright install firefox 


# Expose the port the app runs on
EXPOSE 8080

# Define the command to run the app
CMD ["npx", "playwright", "test"]

That's a bare minimum but obviously, you can update this according to your preferences. We are done with Docker config. Now, we will integrate our project with Jenkins.

Before integrating our project to Jenkins, we need to configure Jenkins a bit. To do that, go to Manage Jenkins and click on Plugins. Now from the search bar, install the following plugins-

• NodeJS Plugin
• CloudBees Docker Build and Publish plugin
• Docker plugin

When you are done with the installation, go to the home page and click on New item. From the next window, Click on Freestyle project and choose a name for your project. Then, hit Ok. It should look like this -

Select the option Git from Source Code Management as we will be using Git. And below in the Repository URL, put the link to your GitHub repo or any other source code repository. If your repo is private, use the Credentials option.

Now from Branches to build, mention the branch that you will be building from. In our case, I will be using my main branch so putting that.

Now head to the build step. Click on Add build step and select the option Execute shell. Put the following commands there.

npm install 
npx playwright install 
npx playwright test --headed --project=firefox

This will trigger the build process of your playwright project inside Jenkins. You can modify the commands if you want to.

Now select Add build step ** again and select **Docker build and publish. In the Repository Name, put your docker repo name where you are going to containerize your project.

When you are done, hit Apply and Save. Now your project is ready to be built and deployed on Docker. Once it's ready, you will see your project is now ready to be built. Click on your project name and hit Build Now.

Once it starts building, you can see the status of your current build by clicking here

Once done, you will see your newly built docker image is ready for conteinerization.