Best Practices for Integrating Playwright Into a CI/CD Pipeline

In the competition for the release of the high-quality application, end to end testing has a crucial role in evaluating their functionality and performance. The playwright designed tools for end to end automated testing of the web application which is open source. Most of the testers use Playwright due to its cross-platform, cross-language, and cross-browser aspects along with auto-waiting feature. 

In CI/CD pipeline is considered a series of steps which is performed to deliver a new version of the software. It automates software from source code to production. The integration of Playwright into a CI/CD pipeline is the prerequisite option adopted by many developers. The practices vary with the different CI/CD tools like Jenkins, Bitbucket, GitLab CI. Playwright into a CI/CD pipeline can be a great option for automating the end to end testing for the web application. In the present blog, we will discuss the best practices for integrating Playwright into a CI/CD pipeline. 

Before proceeding with this, let’s explore on Playwright and CI/D pipeline 

Playwright

The playwright is considered as a tool for web testing and automation. It offers testing abilities in Chromium, WebKit, and Firefox with a single API. It is developed to enable cross-browser web automation which is reliable and fast. 

It is open source and supports various programming languages like Python, NodeJS, C#, and Java. It comes with Apache 2.0 License and allows DevTools protocol to write stable automated tests. It not only supports end-to-end testing but also API and functional testing. 

CI/CD pipeline

A continuous integration and continuous deployment (CI/CD) pipeline are considered the process that drives software development by the path of building, testing, and deploying codes. It is also thought of as the series of steps that is essential for code to be released. It follows basically below steps: 

• Code: Checked into the repository
• Build: Build is activated and deployed in a test setting.
• Test: Execution of automated test is done
• Deploy: Code is deployed to the stage and release setting.

Need of Playwright integration to CI/CD pipeline

The playwright has all the crucial features of being a good test automation tool. It effectively automates the test process of the web application which is a crucial part of the CI/CD pipeline. Automation testing through the use of tools like Playwright is the core of the CI/CD pipeline based on the fact that CI/CD allows for fast build, test, and fail. The playwright help to run the test faster so that feedback is shared with the developer early. It allows early detection of bugs and provides a bug-free release of the product. 

Playwright significance in CI/CD pipeline

Playwright being an automation testing tool has an important role in CI/CD pipeline which allows its integration. Some of the advantages are mentioned below: 

• It lowers the manual efforts at the time when a similar type of test needs to be run in repetition.
• It helps in giving immediate feedback.
• It makes the test more accurate and includes more test cases.
• It allows the generation and comparison of multiple test outcomes.

It is crucial to note that all the automated test processes in CI/CD pipeline should be tested on real devices and browsers. The playwright is such a tool that allows testing in real browsers and can be better integrated into CI/CD pipeline. 

The practice of Integration of Playwright in CI/CD pipeline

The initial step of integration of the Playwright

To integrate Playwright in CI/CD pipeline, you need to ensure that CI agents can run in the browser. For this, you can use Docker images in the Linux agents. In another way, you can also install the dependencies with the use of Command Line Tools. Followed to this, you have to install Playwright with the use of the below command: 

Then, you can run your automation test with Playwright. It will also automate testing in CI environment. 

Playwright scripts in the Docker environment

You can use Dockerfile.focal for running the Playwright script in the Docker environment. Such an image involves different dependencies required for running a browser in a Docker container. It also includes browsers themselves. It involves Usage and Image tags. Docker images are issued automatically by GitHub Actions. The playwright has pre-built Docker images which can be used directly or as a position for updating the existing Docker definition. If you are working in Python, you can follow the suggested configuration: 

• Use “–ipc=host” at the time of using Chromium.
• You can run your container with docker run –cap-add=SYS_ADMIN, at the time when there is an error in launching Chromium and developing locally.
• You can use –init Docker flag for avoiding special treatment for the process with PID=1.

GitHub action also supports running jobs in Docker containers with the use of jobs.<job_id>.container options. 

Example of the steps that could be followed for integrating Playwright in CI pipeline using Python. 

Page Object Model (POM)

Page Object Model is the common pattern that helps in avoiding duplication, eases the interaction between pages, and improves maintainability in a different test. In CI/CD pipeline, it is required to write test cases or structure your test suites which could be simplified by the use of POM. The playwright is integrated into CI/CD pipeline in the stage of automation of the testing process. Page Object simplifies authoring by structuring a high-level API that aligns with your application. It also maintains the test cases by capturing element selectors in one place. Further, it creates reusable code to eliminate repetition. 

Caching browsers

The playwright is able to download browser binaries as default action at the time when NPM packages are installed. It has a postinstall hook that downloads the browser binaries on every run. Such behavior can be modified with different environmental variables. 

The majority of the CI providers cache the nmp-cache directory. However, if you note that CI pipeline caches the node_modules directory and in such case, if you run nmp install despite the nmp ci, your default configuration will not be executed. The main reason is that nmp install will search for the Playwright NMP package on disk. As the result postinstall step will not be executed. 

You can follow the below steps to fix such behavior: 

• Move to caching $HOME/.npm
• Include PLAYWRIGHT_BROWSERS_PATH=0 as the environmental variable prior to running npm install. It will allow you to download the browser binaries in the node-modules directory and cache them using the package code.
• Instead of npm install, you have to use nmp ci. It will allow clean installation by eliminating the existing node_modules directory.

Now you can cache the browser binaries with the below steps. Playwright downloads the browser binaries based on the following directories. 

You can now cache the browser downloads amid CI runs. This location can be cache in your CI configuration contrary to the botch of the Playwright version. 

Hence, Playwright can be integrated into the CI/CD pipeline in the above-mentioned way for caching browsers.

Parallel testing with Playwright

The main idea of CI/CD pipeline is to lower the Time-To-Market of a requirement. The main issue faced by the testers and developers is to merge the code frequently which challenges the time and resources for running the test. The challenges can be overcome by the use of parallel testing. Playwright form an apt example of running test parallelly. Playwright supports parallel testing of tests in a single file. It is integrated into the CI/CD pipeline for parallel testing which saves lots of time and eliminates the testing holdup. 

Debug the test

In the process of CI/CD pipeline, the testing of the application may end up showing an error or bug which eventually fails the test. It is a commonly noted bug in the launching of the browser. A playwright can be integrated into CI/CD pipeline as debugging tool. It supports “DEBUG” environment variable for outputting debug logs at the time of execution. You just need to set it to pw:browser* while debugging the below error:

Error: Failed to launch the browser

Running test in a headless browser

The playwright helps in running the test in a headless browser, where it is integrated into the CI/CP pipeline. It makes the test faster and easy deployment. By default, if you are using Playwright for the testing phase, it launches the browser in headless mode. It makes the test easier to run and speeds up the execution time. 

For example, if you are on Linux agent, Xvfb needs to be installed for headed execution. Further, Playwright’s doctor image and GitHub Action have already Xvfb installed. You just need to add Xvfb-run before the Node.js command for running the browser in headed mode with Xvfb. 

Using LambdaTest for integrating Playwright with CI/CD pipeline

LambdaTest is the cross-browser automation testing platform that integrates with CI/CD solutions. You can use LambdaTest to run the Playwright test in CI/CD in different browsers in the cloud. It allows integration with different CI/CD tools like Bamboo, Jenkins, and more. It will not only reduce the lead time but also helps in transferring quality build quickly.  You can follow the below step to run the Playwright test through CI/CD pipeline. 

• First, you have to develop a web application or code. It should be hosted on a staging environment for testing.
• Then you have to run the Playwright test on the LambdaTest platform.
• On the basis of the CI/CD configuration, the deployment stage might be present or absent.

Conclusion

Integration of Playwright in the CI/CD pipeline not only helps you to initiate faster automation testing but also assist you in the easy identification of bug. You can easily record the test and evaluate the test error by playing the recording. The present blog has presented various practices for integrating Playwright in the CI/CD platform. 

However, the information given is in general and can help you to get started with. Different CI/CD pipeline tools have different ways of integrating Playwright. Additionally, the purpose of automation testing in CI/CD pipeline remains the same.