Playwright, Testing WordPress Themes Locally

Playwright for Testing WordPress Themes Locally

Testing your WordPress themes is crucial for ensuring they function correctly across different browsers and devices. One powerful tool for automating this testing process is Playwright, which offers cross-platform support with web scraping capabilities. In this guide, we will walk you through setting up Playwright in a local environment so that you can test the front-end user interface of your WordPress themes, effectively exploring Playwright testing WordPress themes locally.

Step 1: Setting Up a Local Development Environment

Install WordPress locally using Local by flywheel. This will aid in the smooth execution of Playwright testing on WordPress themes locally.

Local by Flywheel or Similar Tools

Use WordPress-specific local development tools:

1. Install Local by Flywheel (free WordPress local development tool)
2. Create a new WordPress site through the GUI
3. Install your theme in the new site
4. Run Playwright tests against the local URL (usually something like http://your-site.local)

Step 2: Installing Playwright

First and foremost, ensure that Playwright is installed on your system. You can install it via npm by running:

npm init playwright@latest

This command installs Playwright as a development dependency in your project. It’s an essential step for those who want to test WordPress themes locally with Playwright.

Verify Installation

To verify the installation, you can run:

npx playwright test

The test command runs browser tests to confirm that Playwright is functioning as expected in your environment.

Step 3: Writing Your Test Cases with Playwright

Now that Playwright is set up in your local environment, it’s time to write some tests using the npx playwright test command, allowing for effective testing of WordPress themes.

1. In the tests Directory: Inside your WordPress theme directory, you should already see a directory named tests
2. Define Test Cases: Create a file named login.spec.ts inside the tests directory with the following content:

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

test('WordPress theme loads correctly', async ({ page }) => {
	await page.goto('/');

	// Test theme elements
	await expect(page.getByRole('banner')).toBeVisible();
	await expect(page.getByRole('contentinfo')).toBeVisible();
	await expect(page.getByRole('main')).toBeVisible();

	// Test responsive design
	await page.setViewportSize({ width: 375, height: 667 }); // Mobile
	await expect(page.locator('h1')).toBeVisible();
});

test('WordPress admin functionality', async ({ page }) => {
	await page.goto('/wp-admin');
	await page.fill('#user_login', 'your-username');
	await page.fill('#user_pass', 'your-password');
	await page.click('#wp-submit');

	await expect(page.locator('#wpadminbar')).toBeVisible();
});

In the first test, playwright is checking to ensure your home page as a banner role (<header>), a contentinfo role (<footer), and a main role (<main>).

In the second test, the test case verifies that navigating to /wp-login.php successfully loads the WordPress login form and then navigates to the dashboard upon successful authentication. Be sure you updated this code with your username and password information for them to pass.

React App in 2025 with Vite

3. Update your playwright.config.ts file so the baseURL is set to the site domain setting in Local by flywheel.

use: {
    /* Base URL to use in actions like `await page.goto('/')`. */
    // baseURL: 'http://localhost:3000',
    baseURL: 'http://whatever-your-local-url-is', // Your local WordPress URL
headless: false, // Set to true for CI
    trace: 'on-first-retry',
  },

3. Run Your Tests: To run your tests locally:

   npx playwright test

Additional Notes

• Integration: You can integrate Playwright with a continuous integration (CI) service like GitHub Actions or Circle CI for automated testing during development.
• Performance: Playwright’s ability to handle multi-browser and multi-device scenarios makes it ideal for performance optimization of your WordPress themes.

By following these steps, you should have successfully set up Playwright in your local environment to test the front-end user interface of your WordPress themes. This setup ensures that your theme functions seamlessly across different browsers and devices, enhancing its overall usability and reliability, essentially perfecting the art of Playwright testing of WordPress themes locally.

Test a React Text Input with jest userEvent