How to add Playwright tests
Installation
To install Playwright run:
To learn how to write Playwright tests, or ‘specs’, please see Playwright’s official documentation.
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
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
Always start with necessary imports at the beginning of the file.
For example:
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:
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:
In the test file, you can use the getByTestId
method to identify the element.
For example:
Constants
Define any constant elements, data sets, or configurations used throughout your tests for easy reference.
For example:
Descriptive test names
Each test block should have a clear and concise name describing exactly what it’s testing.
For example:
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:
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:
Tests for mobile screens
Use the isMobile
argument to test logic that is specific to mobile devices.
For example:
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:
How to Run Tests
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
To run tests with Playwright, check the following commands:
-
To run tests in UI helper mode:
-
To run a single test:
For example:
-
Run a set of test files in respective folders:
For example:
-
Run the test with the title:
For example:
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:
-
Debugging one test file:
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.
Troubleshooting
-
A common error seen in playwright is as follows:
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:
- 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
Ensure Development Environment is Running
If starting the Gitpod environment did not automatically develop the environment:
-
Follow the MongoDB installation guide.
-
Create the .env
-
Create a config file.
-
Seed the database
-
Develop the server and client
Install Playwright Build Tools
To install necessary dependencies for running Playwright run the following command:
Run the Playwright Tests on Gitpod
To run all Playwright tests, run the following command: