Playwright UI Test Automation with TypeScript

A comprehensive suite of UI test cases built using Playwright for the SauceDemo website. This repository demonstrates how Playwright can seamlessly integrate with various tools and technologies for efficient test execution, reporting, and CI/CD automation.

Table of Contents

• Getting Started
• Database Integration
• Test Trend Analysis with InfluxDB 2.0
• Docker Integration
• Jenkins Pipeline
• GitHub Actions Workflow
• Kubernetes Deployment
• Live Test Execution with ReportPortal
• Code Quality with Husky
• Related Blogs & Resources

Getting Started

Clone and Run Locally

Clone the repository and install dependencies:

git clone https://github.com/thananauto/playwright-ui-typescript.git  
cd playwright-ui-typescript  
npm install  
npx playwright test  

Test reports will be generated with timestamps at:

./playwright-report/<timestamp>/  

Database Integration

Test Trend Analysis with InfluxDB 2.0

Playwright's custom reporter allows test summary results to be stored in a time-series database like InfluxDB 2.0.

• Set up InfluxDB using Docker by referring to docker-compose.yml.
• Configure the integration using files in ./custom_report.

Docker Integration

To run tests inside a Docker container:

1. Build the Docker image:

   docker build -t playwright-tests .  
   

2. Run tests inside the container:

   docker run -it -v $(pwd)/report:/app/playwright-report playwright-tests -c "npx playwright test"  
   

Jenkins Pipeline

Execute tests inside a Docker container through a Jenkins pipeline. The pipeline archives test results for each build.

GitHub Actions Workflow

For continuous integration, GitHub Actions can execute Playwright tests seamlessly.

1. Run tests in a GitHub-hosted Linux server: Workflow
2. Build and push Docker image to Docker Hub: Workflow
3. Pull Docker image and execute tests: Workflow

Kubernetes Deployment

Execute Playwright tests within a Kubernetes environment using the provided manifest files:

1. Persistent Volume for test results: pv.yml
2. Persistent Volume Claim: pvc.yml
3. Deploy job for test execution: job.yml

Live Test Execution with ReportPortal

To enable real-time test execution monitoring with ReportPortal:

1. Start ReportPortal using Docker:

   docker compose -f docker-compose-reportportal.yml up  
   

2. Configure rpConfig.ts and .env.rp with ReportPortal details.
3. Add the reporter type in playwright.config.ts:

   reporters: [['@reportportal/agent-js-playwright', rpConfig]]  
   

Code Quality with Husky

Husky enforces code quality by ensuring consistent commit messages and code formatting.

• Prettier for code formatting
• Lint-staged for staged file validation
• Commit lint to enforce commit message conventions

For structured commits, follow this format:

[QA][Smoke] - Fixed Smoke test  

This indicates that the commit is related to the QA environment and includes a smoke test fix.

For more details, check this blog:
Custom Git Commit Rules with Husky

Related Blogs & Resources

• Executing Tests on Remote Browser and Browser in Servers
• Reusing Browser Sessions for Debugging in Playwright
• Optimizing Playwright Test Execution in Minimal Docker Images
• Live Visualization of Test Results Using Playwright and InfluxDB 2.0
• CI/CD Pipeline: Running Playwright Tests in Jenkins with Docker
• Enhancing Playwright Test Reports with Decorators

For a complete list of related blogs, check out Medium.