How to Run Playwright Tests in Bitbucket ?

Ensuring high-quality software is crucial for any web application, and thorough testing is a key part of achieving that goal. With the increasing complexity of modern web applications, it’s important to ensure they are reliable, responsive, and free from bugs. Playwright is a powerful testing framework that automates browser interactions, making it easier to test your application across multiple environments. 

By learning how to run Playwright tests in Bitbucket, you can integrate automated testing directly into your CI/CD pipeline. This integration ensures that every change pushed to the repository is automatically tested, giving you fast feedback on the quality of your code and helping catch bugs early. 

In this blog, we’ll walk you through the process of setting up Playwright tests in Bitbucket. You’ll learn how to configure your project, run tests automatically, generate reports, and troubleshoot any issues. By the end, you’ll have an efficient, automated testing pipeline that improves collaboration, test coverage, and overall development efficiency. 

1. Setting Up the Remote Repository in Bitbucket 

Step 1: Create and Clone a Repository 

• Log in to your Bitbucket account and create a repository. 

• Clone the repository locally: 

Step 2: Push Your Playwright Project to Bitbucket 

1. Add your Playwright test project files to the cloned repository. 

2. Initialize Git in the directory if not already initialized: 

git init 

3. Add, commit, and push the files to Bitbucket: 

git add . 
git commit -m “Initial commit with Playwright tests” 
git push origin main 

Prerequisites 

• Ensure you have Node.js and Git installed. 

• Your Playwright project should include a playwright.config.ts file. 

2. Installing and Configuring Playwright 

Step 1: Install Playwright 

Run the following commands in your project directory: 

npm init -y               # Initialize a Node.js project 

npm init playwright@latest    # Install Playwright 

Step 2: Configure Playwright 

1. Use the Playwright CLI to generate a test configuration: 

npx playwright codegen

2. Modify the playwright.config.ts file to suit your testing needs. A minimal configuration might look like this: 

Step 3: Verify Locally 

Run your tests locally to confirm that everything works: 

npx playwright test 

3. Configuring Bitbucket Pipelines 

Step 1: Create bitbucket-pipeline.yml 

Add a file named bitbucket-pipeline.yml to your repository’s root directory. Below is a sample configuration: 

Step 2: Explanation of Configuration 

Image:

The Docker image ensures a consistent testing environment. The Playwright Docker image includes pre-installed browsers and dependencies. 

Steps: 

-> npm install (Installs the project dependencies.) 

-> npx playwright install ( Install browser ) 

-> npx playwright test (Executes the test suite.) 

Artifacts:

Save test results and logs for later review. 

Step 3: Test the Pipeline 

Push the bitbucket-pipeline.yml file to the repository, and Bitbucket will automatically trigger a pipeline for the default branch (usually main). 

4. Trigger Playwright Tests Using Bitbucket API 

Step 1: Generate an App Password 

1. Go to Bitbucket Settings > Personal Settings > App Passwords. 

2. Create an app password with pipeline permissions. 

Step 2: Trigger Pipeline Using Curl 

Use the following command to trigger a pipeline: 

Step 3: Automate Triggering 

Automate pipeline execution with scripts or integrate it into your deployment workflow. 

5. Generating and Accessing Playwright Reports 

Step 1: Enable HTML Reporting 

Ensure the playwright.config.ts file includes an HTML reporter: 

reporter: [[‘html’, { outputFolder: ‘tests/results’ }]], 

Step 2: Access Reports as Artifacts 

• The pipeline configuration specifies reports as artifacts. 

• Navigate to the pipeline run in Bitbucket, locate the “Artifacts” tab, and download the tests/results directory to view the HTML reports. 

6. Debugging Failed Tests 

Step 1: Use Screenshots and Logs 

Playwright automatically generates screenshots and logs for failed tests. Configure your test file to capture them: 

Step 2: Enable Tracing 

Tracing provides detailed execution context for debugging. Enable trace option in playwright config file To view trace use below playwright official link 

https://trace.playwright.dev

Step 3: Review Reports 

Use the HTML reports to analyze passed, failed, and skipped tests. Highlighted sections make debugging straightforward. 

7. Maintaining and Updating Tests 

Step 1: Regular Test Updates 

• Update tests in response to changes in your application. 

• Use feature branches in Bitbucket to isolate test updates. 

Step 2: Automate Regression Testing 

Configure pipelines to run regression tests automatically for pull requests: 

Step 3: Code Reviews for Test Changes 

Leverage Bitbucket’s pull request workflow to review test modifications and ensure high-quality contributions. 

Conclusion 

Integrating Playwright with Bitbucket Pipelines enhances your testing workflow, ensuring that your application remains reliable and bug-free. By automating your tests within the CI/CD pipeline, you can quickly identify issues and maintain high-quality standards throughout development. The ability to run Playwright tests in Bitbucket ensures that every change is verified in real-time, making the development process more efficient. 

At Testrig Technologies, we offer expert automation testing services to optimize your development process. With Playwright, we ensure your web applications meet the highest standards and deliver flawless software. Contact us today to get started!