As WordPress developers we want our code covered by automated tests, however sometimes creating unit tests is not an easy task as our code is not ready yet for this kind of tests, here is when end-to-end tests comes into handy as they doesn’t rely on how the code works internally but on the functionality from the user perspective.

In this tutorial I’m going to show you how to write Playwright tests in WordPress, we are going to create a test that covers a user email subscription, you can find Playwright examples in the GitHub repository.

Install and Configure Playwright

To write our tests we’ll use @wordpress/scripts package from WordPress as it includes Playwright, to install it run the following:

npm install -D @wordpress/scripts

Then add the following scripts to your package.json:

  "scripts": {
    "test:playwright": "wp-scripts test-playwright",
    "test:playwright:help": "wp-scripts test-playwright --help",
    "test:playwright:debug": "wp-scripts test-playwright --debug",
    "test:playwright:headed": "wp-scripts test-playwright --headed"
  },

Finally create playwright.config.js file in the root of the plugin with the following content:

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

export default defineConfig({
    testDir: 'tests/acceptance',
    use: {
        baseURL: 'http://localhost:8888'
    }
});

In this file we define where our tests are located and the base url of our development environment.

Creating the Test

We want to create a test that covers a user email subscription, so first of all let’s reproduce it manually to figure out the steps we need to include in our test.

Now that we know the steps lets run Playwright in debug mode so we can record the steps in its console, these steps can then be used as a base in our tests, that way we don’t have to figure out and create all the steps from scratch, to run Playwright in debug mode run the following command:

npm run test:playwright:debug

Based on what Playwright debug recorded, here are the steps that we’ll use in our test:

await page.locator('#form-validation').getByPlaceholder('E-mail').fill('test@example.com');
await page.locator('#form-validation').getByRole('button', { name: 'SUBMIT' }).click();

The above steps are responsible of filling the email input field and click the submit button.

We also need to check if the email entry was created in the database, to do so we have to login as admin and check the subscriptions page to see if the email is there, we can use Playwright debug again to record the steps to log as admin and visit the subscriptions page:

await page.goto('/wp-admin');
await page.getByLabel('Username or Email Address').fill('admin');
await page.getByLabel('Password', { exact: true }).fill('password');
await page.getByRole('button', { name: 'Log In' }).click();
await page.getByRole('link', { name: 'DSubscribers', exact: true }).click();

Playwright Assertions

To check if the email is registered correctly we need a unique identifier for the email so we can use it in the subscription form and then check if it exist in our admin subscriptions page:

const name = crypto.randomUUID()
await page.locator('#form-validation').getByPlaceholder('E-mail').fill(`${name}@example.com`);

Then we can check if it exist in the admin page like so:

await expect(page.getByText(name)).toBeVisible()

Here is the final code for the test:

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

test('user subscribe', async ({page}) => {
    await page.goto('/')

    const name = crypto.randomUUID()

    await page.locator('#form-validation').getByPlaceholder('E-mail').fill(`${name}@example.com`);
    await page.locator('#form-validation').getByRole('button', { name: 'SUBMIT' }).click();

    await page.goto('/wp-admin');
    await page.getByLabel('Username or Email Address').fill('admin');
    await page.getByLabel('Password', { exact: true }).fill('password');
    await page.getByRole('button', { name: 'Log In' }).click();
    await page.getByRole('link', { name: 'DSubscribers', exact: true }).click();

    await expect(page.getByText(name)).toBeVisible()
})

That’s all for this WordPress testing tutorial, we have created a complete end-to-end test using Playwright. I hope that you’ve enjoyed it, I’ll see you in the next one!