In today’s fast-paced software development world, delivering high-quality web applications quickly and reliably is more critical than ever. Continuous Integration and Continuous Deployment (CI/CD) pipelines streamline the processes of building, testing, and deploying software, enabling teams to deliver updates more quickly and with fewer errors. One crucial piece of this puzzle is automated end-to-end (E2E) testing, which simulates real user interactions to ensure your application works correctly across all supported browsers and devices.

Among the many testing frameworks available, Playwright has rapidly become a favorite for its speed, reliability, and cross-browser capabilities. In this blog, we’ll explore how to seamlessly integrate Playwright E2E tests into a Jenkins CI/CD pipeline, enabling your team to catch bugs early and maintain confidence in every release.

Why Use Playwright for End-to-End Testing?

Playwright is an open-source testing library developed by Microsoft that supports automation across the three major browser engines: Chromium (Google Chrome, Edge), Firefox, and WebKit (Safari). Its unified API lets you write tests once and run them across all browsers, ensuring your app behaves consistently everywhere.

Key advantages include:

• Cross-browser support without changing your test code.
• Ability to run tests in headless mode (without a visible UI) for speed or headed mode for debugging.
• Support for parallel test execution, speeding up large test suites.
• Advanced features like network request interception, mocking, and screenshot comparisons.
• Built-in generation of HTML test reports that are easy to share and analyze.

These features make Playwright an excellent choice for modern E2E testing workflows integrated into CI/CD.

Setting Up Playwright in Your Project

To get started, install Playwright and its dependencies using npm:

npm install -D @playwright/test

npx playwright install

Create a simple test file, e.g., example.spec.ts:

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

test('verify homepage title is correct', async ({ page }) => {

await page.goto('https://example.com');

  await expect(page).toHaveTitle(/Example Domain/);

});

Run the tests locally to ensure everything is working:

npx playwright test

Integrating Playwright Tests into Jenkins Pipelines

To automate testing in Jenkins, you’ll add Playwright test execution to your pipeline configuration. A typical Jenkins pipeline (using a Jenkinsfile) for running Playwright tests looks like this:

pipeline {

    agent any

stages {

    // Stage 1: Checkout the source code from the SCM repository configured for this job

    stage('Checkout') {

        steps {

            checkout scm

        }

    }

Stage 2: Install all project dependencies and Playwright browsers.

    stage('Install Dependencies') {

        steps {

            // Install npm packages using 'ci' for a clean and reliable install

            sh 'npm ci'

            // Install Playwright browsers and necessary dependencies for running tests

            sh 'npx playwright install --with-deps'

        }

    }

Stage 3: Run Playwright tests and generate reports.

  stage('Run Playwright Tests') {

        steps {

            // Execute Playwright tests with two reporters: list (console) and html (for report generation)

            sh 'npx playwright test --reporter=list,html'

        }

        post {

            always {

                // Archive all files in the 'playwright-report' folder for later access or download

                archiveArtifacts artifacts: 'playwright-report/**', allowEmptyArchive: true

                // Publish the HTML test report to Jenkins UI for easy viewing

                publishHTML(target: [

                    reportName: 'Playwright Test Report',

                    reportDir: 'playwright-report',

                    reportFiles: 'index.html',

                    keepAll: true,

                    allowMissing: true

                ])

            }

        }

    }

}

What does this pipeline do?

• Checkout: Pulls the latest code from your repository.
• Install Dependencies: Installs Node.js packages and Playwright browser binaries.
• Run Tests: Executes your Playwright test suite, generating both console and HTML reports.
• Publish Reports: Archives the HTML report as a Jenkins artifact and displays it within Jenkins for easy access.

This setup helps your team catch failures early and provides clear, actionable feedback right in your CI dashboard.

Best Practices for Maintaining Speed and Reliability in CI

CI environments can sometimes be less forgiving than local machines, so keep these tips in mind:

• Avoid fixed delays, such as waitForTimeout(). Instead, wait for specific elements with await page.waitForSelector().
• Add retry logic or test retries in your Playwright config to reduce flaky test failures.
• Disable animations or transitions during tests to improve stability.
• Execute tests in headless mode to improve speed and resource efficiency. Use headed mode selectively when you need to debug a failing test.
• Utilize parallel test execution to shorten the overall testing duration.

Conclusion

Integrating Playwright end-to-end tests into your Jenkins CI/CD pipeline enables your team to deliver reliable, high-quality web applications quickly and efficiently. Automated cross-browser testing detects bugs before they reach production, enhancing user experience and minimizing costly hotfixes.

With Playwright’s robust features, simple API, and built-in support for CI reporting, setting up effective E2E testing is straightforward. As you grow, explore adding visual regression testing tools like Percy or containerizing your tests with Docker for even more reproducibility.

In the world of automated testing, maintaining flexibility and scalability is crucial—especially when it comes to validating functionality across multiple data inputs. Data-driven testing enables QA professionals to decouple test scripts from the input data, allowing the same test flow to run with multiple sets of inputs.

This tutorial explains how to set up data-driven tests in Playwright using TypeScript, where external CSV files provide varying input data for each scenario.

This approach is highly effective for validating login scenarios, form submissions, and any functionality that depends on multiple sets of data.

Why Use Data-Driven Testing?

Data-driven testing provides several benefits:

• Reduced Code Duplication: Instead of writing multiple similar tests, a single test reads various inputs from an external file.
• Improved Maintainability: Test data can be modified independently of the test logic.
• Scalability: Enables easier scaling of testing across a wide range of input combinations.

When working with TypeScript and Playwright, using CSV files for test input is a natural fit for structured test cases, such as form validation, login testing, and e-commerce transactions.

Setting Up the Project

To get started, make sure you have a Playwright and TypeScript project set up. If not, here’s how to initialize it:

npm init -y

npm install -D @playwright/test

npx playwright install

Enable TypeScript support:

npm install -D typescript ts-node

Create a basic tsconfig.json:

{

  "compilerOptions": {

    "target": "ES6",

    "module": "commonjs",

    "strict": true,

    "esModuleInterop": true,

    "outDir": "dist"

  },

  "include": ["*.ts"]

}

Now, install a CSV parsing library:

npm install csv-parse

Creating the CSV File

We’ll begin by setting up a basic loginData.csv file containing sample login credentials.

username, password

user1,password1

user2,password2

invalidUser,wrongPass

Save it in your project root directory.

Reading CSV Data in TypeScript

Create a helper function, readCSV.ts, to parse CSV files:

import fs from 'fs';

import { parse } from 'csv-parse';

export async function loadCSV(fileLocation: string): Promise<Record<string, string>[]> {

  return new Promise((resolve, reject) => {

    const results: Record<string, string>[] = [];

    fs.createReadStream(fileLocation)

      .pipe(parse({ columns: true, skip_empty_lines: true }))

      .on('readable', function () {

        let row;

        while ((row = this.read()) !== null) {

          results.push(row);

        }

      })

      .on('end', () => resolve(results))

      .on('error', (error) => reject(error));

  });

}

Writing the Data-Driven Test in Playwright

Now, let’s write a test that uses this CSV data. Create a file named login.spec.ts:

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

import { readCSV } from './readCSV';




test.describe('Data-Driven Login Tests', () => {

  let testData: Array<{ username: string; password: string }>;




  test.beforeAll(async () => {

    testfile = await readCSV('./loginData.csv');

  });




  for (const data of testfile || []) {

    test(`Log in attempt with ${data.username}`, async ({ page }) => {

      await page.goto('https://example.com/login');

      await page.fill('#username', data.username);

      await page.fill('#password', data.password);

      await page.click('button[type="submit"]');




      // Adjust this check based on expected outcomes

      if (data.username.startsWith('user')) {

        await expect(page).toHaveURL(/dashboard/);

      } else {

         expect(page.locator('.error-text')).toBeVisible();

      }

    });

  }

});

The approach reads each row from the CSV and generates individual test cases dynamically, using the data from each entry as input parameters.

Best Practices

• Separate Test Data from Logic: Always keep your data files separate from test scripts to simplify maintenance.
• Validate Test Inputs: Ensure CSV files are clean and correctly formatted.
• Parameterize Conditions: Adjust validation logic based on the nature of test data (e.g., valid vs. invalid credentials).

Conclusion

Using CSV-based data-driven testing with Playwright and TypeScript offers a powerful way to scale test coverage without bloating your codebase. It’s ideal for login scenarios, input validation, and other repetitive test cases where only the data varies.

By externalizing your data and looping through test scenarios programmatically, you can reduce redundancy, improve maintainability, and support continuous delivery pipelines more effectively.

As your application grows, this strategy will help ensure that your test suite remains efficient, readable, and scalable.