Integrating Jenkins With Playwright TypeScript: A Complete Guide

In this blog post, we'll explore how to set up and integrate Jenkins with Playwright TypeScript for automated testing. This integration enables continuous integration and automated test execution in your development pipeline.

Playwright is a modern, open-source automation testing framework developed by Microsoft that enables reliable end-to-end testing for web applications. It supports multiple browser engines (Chromium, Firefox, and WebKit) and allows you to write tests in multiple programming languages, including TypeScript, JavaScript, Python, and .NET. Playwright is known for its auto-wait capabilities, strong reliability, and cross-browser testing features.

Jenkins is a popular, open-source automation server that helps automate various parts of software development, including building, testing, and deploying software. It provides hundreds of plugins to support building, deploying, and automating any project. Jenkins offers easy installation, simple configuration, extensible features, and a thriving community ecosystem.

Prerequisites

• Jenkins installed on your system
• Node.js and npm installed
• Basic knowledge of TypeScript and Playwright
• Git repository with your Playwright tests

Step 1: Setting Up Your Playwright TypeScript Project

Ensure Node.js and npm are installed on your machine by running the following commands in your terminal:  

node -v
npm -v

These commands will display the installed versions of Node.js and npm, respectively. Refer to the image below:

Let's create a basic Playwright TypeScript project:

# Create a new directory
mkdir playwright-jenkins-demo
cd playwright-jenkins-demo

# Initialize npm project
npm init -y

# Install Playwright and TypeScript
npm install -D @playwright/test typescript

Create a basic test file tests/example.spec.ts:

import { test, expect } from '@playwright/test';

test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = await page.title();
  expect(title).toContain('Playwright');
});

Step 2: Configure Playwright

Create playwright.config.ts:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: './tests',
  timeout: 30000,
  reporter: [
    ['html'],
    ['junit', { outputFile: 'test-results/junit-report.xml' }]
  ],
  use: {
    headless: true,
    screenshot: 'only-on-failure',
  },
};

export default config;

Step 3: Create Jenkins Pipeline

Create a Jenkinsfile in your project root:

pipeline {
    agent any

    tools {
        nodejs 'Node16'  // Make sure this matches your Jenkins NodeJS installation name
    }

    stages {
        stage('Checkout') {
            steps {
                checkout scm
            }
        }

        stage('Install Dependencies') {
            steps {
                sh 'npm ci'
                sh 'npx playwright install --with-deps'
            }
        }

        stage('Run Tests') {
            steps {
                sh 'npx playwright test'
            }
        }
    }

    post {
        always {
            junit 'test-results/junit-report.xml'
            publishHTML(target: [
                allowMissing: false,
                alwaysLinkToLastBuild: true,
                keepAll: true,
                reportDir: 'playwright-report',
                reportFiles: 'index.html',
                reportName: 'Playwright Report'
            ])
        }
    }
}

Step 4: Configure Jenkins

1. Install the required Jenkins plugins:
   • NodeJS Plugin
   • JUnit Plugin
   • HTML Publisher Plugin
2. Configure NodeJS in Jenkins:
   • Go to Manage Jenkins > Tools
   • Add NodeJS installation
   • Name it 'Node16' (or update the Jenkinsfile accordingly)

Step 5: Create Jenkins Pipeline Job

1. Create a new pipeline job in Jenkins.
2. Configure SCM:
   • Select Git
   • Enter your repository URL
   • Specify the branch
3. Set the Script Path to Jenkinsfile.

Step 6: Package.json Scripts

Update your package.json:

{
  "scripts": {
    "test": "playwright test",
    "test:report": "playwright show-report"
  },
  "devDependencies": {
    "@playwright/test": "^1.35.0",
    "typescript": "^4.9.0"
  }
}

Running the Pipeline

1. Push your code to the repository.
2. Run the Jenkins pipeline.
3. View test results in Jenkins:
   • JUnit test results
   • HTML report with detailed test execution

Best Practices

1. Always use explicit versions in package.json.
2. Include screenshots and videos for failed tests.
3. Use environment variables for sensitive data.
4. Implement retry mechanisms for flaky tests.
5. Use parallel execution for faster results.

Example of parallel execution configuration in playwright.config.ts:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  testDir: './tests',
  workers: 3, // Run 3 tests simultaneously
  reporter: [['html'], ['junit', { outputFile: 'test-results/junit-report.xml' }]],
  use: {
    headless: true,
    screenshot: 'only-on-failure',
  },
  projects: [
    {
      name: 'Chrome',
      use: { browserName: 'chromium' },
    },
    {
      name: 'Firefox',
      use: { browserName: 'firefox' },
    },
    {
      name: 'Safari',
      use: { browserName: 'webkit' },
    },
  ],
};

export default config;

Benefits

Let's understand the practical benefits of integrating Jenkins with Playwright with real-world examples:

1. Daily Automated Testing

• Instead of manually running tests every morning, Jenkins can automatically run your Playwright tests at 6 AM before the team starts work.
• The team arrives to find test reports ready, knowing if the overnight code changes caused any issues.

2. Git Integration Workflow

• When developers push code to the main branch, Jenkins automatically triggers Playwright tests.
• Developers get immediate email notifications if their changes break any tests.
• No need to wait for manual QA testing.

3. Cross-Browser Testing Made Easy

• Jenkins can run Playwright tests simultaneously on Chrome, Firefox, and Safari. What would take hours to test manually can be done in minutes.
• Test results for all browsers are consolidated in one report.

4. Real Example of Time Saving

• Manual testing of 100 test cases: ~8-10 hours.
• Same tests automated with Playwright + Jenkins: ~30 minutes.
• The QA team can focus on exploratory testing instead.

5. Practical Use in Release Process

• Jenkins runs Playwright tests as part of the deployment pipeline.
  • If tests pass → automatic deployment to staging.
  • If tests fail → team gets notified immediately with screenshots and error logs.
• This prevents broken code from reaching production.

Conclusion

This integration provides a robust automated testing pipeline that can be triggered automatically with each code push. The HTML reports and JUnit results give clear visibility into test execution results, making it easier to identify and fix issues quickly.

Remember to adjust the configuration based on your specific needs and environment. You might need to modify paths, timeouts, or other settings depending on your project requirements.