How to add Playwright tests
Installation
Section titled “Installation”To install Playwright run:
pnpm run playwright:install-build-tools
To learn how to write Playwright tests, or ‘specs’, please see Playwright’s official documentation.
Where to Add a Test
Section titled “Where to Add a Test”-
Playwright tests are in the
./e2e
directory. -
Playwright test files are always with a
.spec.ts
extension.
Best Practices for writing E2E tests
Section titled “Best Practices for writing E2E tests”This section will explain in detail about best practices for writing and documenting E2E tests based on Playwright documentation and our community code-style.
Imports
Section titled “Imports”Always start with necessary imports at the beginning of the file.
For example:
import { test, expect, type Page } from '@playwright/test';
Identifying a DOM element
Section titled “Identifying a DOM element”Playwright comes with multiple built-in locators, but we recommend prioritizing the following locators:
getByRole
for querying semantic elements, whose role is important and allows assistive technology to perceive the page correctly.getByText
for querying non-semantic elements such asdiv
,span
, orp
.
For example:
await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();await expect(page.getByText('Hello World')).toBeVisible();
In cases where the elements cannot be queried using the above-mentioned locators, you can use the data-playwright-test-label
attribute as the last resort. This attribute should be used only in Playwright tests, and not for styling or any other purposes.
For example:
<div data-playwright-test-label="landing-page-figure"> <img src="..." alt="..." /></div>
In the test file, you can use the getByTestId
method to identify the element.
For example:
await expect(page.getByTestId('landing-page-figure')).toBeVisible();
Constants
Section titled “Constants”Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
For example:
const landingPageElements = { ... };const superBlocks = [ ... ];
Descriptive test names
Section titled “Descriptive test names”Each test block should have a clear and concise name describing exactly what it’s testing.
For example:
test('The component landing-top renders correctly', async ({ page }) => { // ...});
Human readable assertions
Section titled “Human readable assertions”Each assertion should be as human readable as possible. This makes it easier to understand what the test is doing and what it’s expecting.
For example:
await expect( page.getByRole('heading', { level: 1, name: 'Learn to code — for free.' })).toBeVisible();
Keep it DRY
Section titled “Keep it DRY”Make sure that the tests are not repeating the same code over and over again. If you find yourself repeating the same code, consider refactoring it as a loop or a function.
For example:
for (const logo of await logos.all()) { await expect(logo).toBeVisible();}
Tests for mobile screens
Section titled “Tests for mobile screens”Use the isMobile
argument to test logic that is specific to mobile devices.
For example:
test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({ isMobile}) => { const landingPageImage = page.getByRole('img', { name: 'landing-page-figure' });
if (isMobile) { await expect(landingPageImage).toBeHidden(); } else { await expect(landingPageImage).toBeVisible(); }});
Group related tests
Section titled “Group related tests”Group related tests together using describe blocks. This makes it easier to understand what the tests are doing and what they’re testing.
For example:
describe('The campers landing page', () => { test('The campers landing page figure is visible on desktop and hidden on mobile view', async ({ isMobile }) => { // ... });
test('The campers landing page figure has the correct image', async () => { // ... });});
How to Run Tests
Section titled “How to Run Tests”Ensure that MongoDB and Client Applications are Running
Section titled “Ensure that MongoDB and Client Applications are Running”-
Start MongoDB and seed the database. In order for Playwright tests to work, be sure that you use the
pnpm run seed:certified-user
command.
Run the Playwright Tests
Section titled “Run the Playwright Tests”To run tests with Playwright, check the following commands:
-
To run tests in UI helper mode:
Terminal window npx playwright test --ui -
To run a single test:
Terminal window npx playwright test <filename>For example:
Terminal window npx playwright test landing.spec.ts -
Run a set of test files in respective folders:
Terminal window npx playwright test <pathToFolder1> <pathToFolder2>For example:
Terminal window npx playwright test tests/todo-page/ tests/landing-page/ -
Run the test with the title:
Terminal window npx playwright test -g <title>For example:
Terminal window npx playwright test -g "add a todo item"
Debugging Tests
Section titled “Debugging Tests”Since Playwright runs in Node.js, you can debug it with your debugger of choice e.g. using console.log or inside your IDE
-
Debugging all tests:
Terminal window npx playwright test --debug -
Debugging one test file:
Terminal window npx playwright test example.spec.ts --debug
Generate Test Reports
Section titled “Generate Test Reports”The HTML Reporter shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests.
npx playwright show-report
Troubleshooting
Section titled “Troubleshooting”-
A common error seen in playwright is as follows:
Terminal window Error: page.goto: Could not connect: Connection refused=========================== logs ===========================navigating to "https://127.0.0.1:8000/", waiting until "load"============================================================You can fix the above error with the following steps:
- Check the URL: Ensure that the URL you’re trying to navigate to is correct and properly formatted. Make sure there are no typos in the URL.
- Server Status: Check whether the server at the URL is running and accessible. You might encounter this error if the server is not running or is not accessible.
- Port Availability: Verify that the port mentioned in the URL (8000 in this case) is the correct port and is available for use. Make sure no other process is already using that port.
- Firewall or Security Software: Sometimes, firewall or security software can block connections to specific ports. Check your firewall settings to ensure that the port is allowed.
- Network Connectivity: Ensure that your system has a working network connection and can access external resources.
-
Another common error seen in playwright is as follows:
Terminal window Protocol error (Network.getResponseBody): Request content was evicted from inspector cache
- The network request was made using a method that does not include a response body, such as HEAD or CONNECT.
- The network request was made over a secure (HTTPS) connection, and the response body is not available for security reasons.
- The network request was made by a third-party resource (such as an advertisement or a tracking pixel) that is not controlled by the script.
- The network request was made by a script that has been paused or stopped before the response was received.
For more insights on issues visit the official documentation.
Playwright-Gitpod Setup
Section titled “Playwright-Gitpod Setup”Ensure Development Environment is Running
Section titled “Ensure Development Environment is Running”If starting the Gitpod environment did not automatically develop the environment:
-
Follow the MongoDB installation guide.
-
Create the .env
Terminal window cp sample.env .env -
Create a config file.
Terminal window pnpm run create:shared -
Seed the database
Terminal window pnpm run seed:certified-user -
Develop the server and client
Terminal window pnpm run develop
Install Playwright Build Tools
Section titled “Install Playwright Build Tools”To install necessary dependencies for running Playwright run the following command:
pnpm run playwright:install-build-tools
Run the Playwright Tests on Gitpod
Section titled “Run the Playwright Tests on Gitpod”To run all Playwright tests, run the following command:
npx playwright test