End-to-End testing with Playwright

Summary

This screencast covers setting up Playwright for end-to-end testing in a Sails.js application. It includes:

• Installing Playwright and setting up the test environment.

• Configuring Playwright settings in the project.

• Writing and running tests for a counter button and navigation functionality.

• Viewing Playwright’s test report for debugging.

With this setup, you can efficiently automate user interactions and test workflows in your Sails.js application using Playwright.

Transcript

I recently started using Playwright after discovering it a while ago, and I finally decided to set it up in my Sails.js codebase. In this screencast, I’ll show you how I did that so you can set up Playwright in your own codebase as well.

Before we dive into the setup, let's discuss what Playwright is. Playwright is a web automation tool for end-to-end testing, created by Microsoft. Other similar tools include Cypress and Puppeteer. Playwright allows you to test the entire workflow of your application from a user’s perspective—whether they can click buttons, visit pages, submit forms, or complete a checkout process.

Setting Up Playwright in Sails.js

I started with a scaffolded full-stack Sails application using the create-sails CLI. The app is a basic Sails and Inertia setup. The goal of this demo is to automate checking whether a button is clicked and whether it navigates correctly to an example page.

Environment Setup

I like having a dedicated test environment in my Sails application. This allows me to separate production and test configurations. In my test setup:

• I run tests on port 3333.

• I use sails-disk for the database.

• I prefer using in-memory sessions for testing.

Installing Playwright

To install Playwright, I ran:

npm init playwright@latest

This command provides a CLI setup wizard where you can:

• Choose a test folder (tests or E2E).

• Set up a GitHub Actions workflow for CI testing.

• Install Playwright dependencies, including Chromium, WebKit, and Firefox.

Once installed, running npx playwright test executes the default example test provided by Playwright.

Configuring Playwright

I started by editing the Playwright config file to:

• Set the base URL to http://localhost:3333.

• Define the web server setup to ensure Playwright starts Sails before running tests.

• Specify the test environment settings.

Writing Tests

First Test: Counter Button

I created a test to verify if:

1. The counter button is visible.

2. Clicking the button increments the count.

Code snippet:

test('Counter button can be clicked and count increments', async ({ page }) => {
    await page.goto('/');
    const counterButton = page.locator('text=Click 0 times');
    await expect(counterButton).toBeVisible();
    await counterButton.click();
    await expect(page.locator('text=Click 1 times')).toBeVisible();
});

Running Tests

To run tests, I executed:

npx playwright test

Playwright provides a test report in HTML format, which can be accessed via a local server.

Second Test: Navigation Test

I wrote another test to check if clicking on "Go to Example Page" correctly navigates to /example.

Code snippet:

test('Example page link is working', async ({ page }) => {
    await page.goto('/');
    const exampleLink = page.locator('text=Go to Example Page');
    await expect(exampleLink).toHaveAttribute('href', '/example');
    await exampleLink.click();
    await expect(page).toHaveURL(/\/example$/);
});

Running Tests in Multiple Browsers

By default, Playwright runs tests across Chromium, WebKit, and Firefox. Since I wrote two tests, running them across three browsers resulted in six total test executions.