E2E Testing Node.js Apps with Playwright or Puppeteer

This article provides a comprehensive guide on how to perform end-to-end (E2E) testing for Node.js applications using Playwright and Puppeteer. You will learn the core differences between these two powerful automation libraries, how to set them up in your Node.js environment, and how to write and execute your first automated browser tests.

Choosing Between Playwright and Puppeteer

While both tools are designed for browser automation, they serve slightly different needs:

• Playwright (developed by Microsoft) supports cross-browser testing out of the box (Chromium, Firefox, and WebKit/Safari) and comes with a built-in test runner, auto-awaiting mechanism, and powerful debugging tools.
• Puppeteer (developed by Google) focuses primarily on Chromium/Chrome. It is highly efficient for scraping, PDF generation, and Chrome-specific automation, but requires an external test runner (like Jest or Mocha) for E2E testing.

Method 1: E2E Testing with Playwright

Playwright is highly recommended for E2E testing due to its native test runner and multi-browser support.

1. Installation and Setup

Initialize Playwright in your existing Node.js project by running:

npm init playwright@latest

This command will ask you a few configuration questions, install the necessary browsers, and create a playwright.config.ts (or .js) file along with a sample test directory.

2. Writing a Playwright Test

Create a file named tests/auth.spec.js to test a login flow:

const { test, expect } = require('@playwright/test');

test.describe('Login Flow', () => {
  test('should log in successfully with valid credentials', async ({ page }) => {
    // Navigate to the login page
    await page.goto('http://localhost:3000/login');

    // Fill in credentials
    await page.fill('input[name="username"]', 'testuser');
    await page.fill('input[name="password"]', 'password123');

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

    // Assert that the URL has changed to the dashboard
    await expect(page).toHaveURL('http://localhost:3000/dashboard');

    // Assert that a welcome message is visible
    const welcomeMessage = page.locator('h1');
    await expect(welcomeMessage).toHaveText('Welcome back, testuser!');
  });
});

3. Running Playwright Tests

Run the tests using the command-line interface:

npx playwright test

To run tests with a visible browser (headed mode), use:

npx playwright test --headed

Method 2: E2E Testing with Puppeteer

If you prefer using Puppeteer, you will need to pair it with a test runner like Jest to handle assertions.

1. Installation and Setup

Install Puppeteer along with Jest and the Jest-Puppeteer environment:

npm install --save-dev puppeteer jest jest-puppeteer

Configure Jest by creating a jest.config.js file:

module.exports = {
  preset: 'jest-puppeteer',
  testMatch: ["**/*.test.js"],
};

2. Writing a Puppeteer Test

Create a file named login.test.js to perform the same login flow:

const puppeteer = require('puppeteer');

describe('Login Flow', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch({ headless: "new" });
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  test('should log in successfully with valid credentials', async () => {
    await page.goto('http://localhost:3000/login');

    // Type credentials
    await page.type('input[name="username"]', 'testuser');
    await page.type('input[name="password"]', 'password123');

    // Click submit and wait for navigation to complete
    await Promise.all([
      page.click('button[type="submit"]'),
      page.waitForNavigation({ waitUntil: 'networkidle0' }),
    ]);

    // Assert URL
    const url = await page.url();
    expect(url).toBe('http://localhost:3000/dashboard');

    // Assert heading text
    const headingText = await page.$eval('h1', el => el.textContent);
    expect(headingText).toBe('Welcome back, testuser!');
  });
});

3. Running Puppeteer Tests

Execute your test suite using Jest:

npx jest