PlayWright is a Web UI automation testing framework developed by Microsoft.
It aims to provide a cross-platform, cross-language, and cross-browser automated testing framework, and also supports mobile browsers.
As stated on its official homepage:
- Automatic waits, intelligent assertions on page elements, and execution tracking make it very effective in dealing with web page instability.
- It controls the browser in a different process than the one executing the test, eliminating the limitations of the in-process test runner and supporting Shadow DOM penetration.
- PlayWright establishes a browser context for each test. The browser context is equivalent to a new browser configuration file, which can achieve complete test isolation at zero cost. Establishing a new browser context takes only a few milliseconds.
- Provide the following functions code generation, Step by step debuggingand Trace viewer.
PlayWright vs. Selenium vipress. Cypress
What is the best web UI automation testing framework currently available? Standout options include the decade-old Selenium, the recently popular Cypress, and PlayWright, which we feature here. How are they different? The following is a summary and comparison for your reference
feature | playwright | toner cartridge | cypress |
---|---|---|---|
Supported languages | JavaScript, Java, C#, Python | JavaScript, Java, C#, Python, Ruby | JavaScript/TypeScript |
Supported browsers | Chrome, Edge, Firefox, Safari | Chrome, Edge, Firefox, Safari, IE | Chrome, Edge, Firefox, Safari |
testing framework | Supported language frameworks | Supported language frameworks | Supported language frameworks |
Availability | Easy to use and configure | Complex setup with learning curve | Easy to use and configure |
Code complexity | simple | ease | simple |
DOM manipulation | simple | ease | simple |
community maturity | gradual improvement | Highly mature | quite mature |
Headless mode support | Yes | Yes | Yes |
Concurrency support | support | support | Depends on CI/CD tool |
iframe support | support | support | Supported through plugins |
driver | unnecessary | Requires browser-specific drivers | unnecessary |
Multi-label operation | support | Not supported | support |
Drag and drop | support | support | support |
Built-in reporting | Yes | No | Yes |
Cross-origin support | support | support | support |
Built-in debugging | Yes | No | Yes |
automatically wait | Yes | No | Yes |
Built-in screenshots/videos | Yes | No video | Yes |
Main comparisons:
- Supported languages: PlayWright and Selenium support Java, C#, and Python, which makes them more popular among test engineers who may not be familiar with JavaScript/TypeScript.
- Technical approach: Both PlayWright and Selenium use Google’s remote debugging protocol to control Chromium-based browsers. For browsers like Firefox, if there is no such protocol, they will use JavaScript injection. Selenium encapsulates it in Driver, and PlayWright calls it directly. Cypress, on the other hand, uses JavaScript to control the browser.
- Browser support: Selenium supports Internet Explorer, which has nothing to do with IE being phased out.
- Easy to use: All three frameworks have a learning curve. However, PlayWright and Cypress are more user-friendly for simple scenarios compared to Selenium.
getting Started
Although PlayWright supports multiple languages, it relies heavily on Node.js. Whether you use the Python or Java version, PlayWright requires a Node.js environment when initializing. Download the Node.js driver. Therefore, we will focus on JavaScript/TypeScript for this guide.
Installation and demonstration
- Make sure Node.js is installed.
- Initialize the PlayWright project using
npm
oryarn
:
# Using npm
npm init playwright@latest
# Using yarn
yarn create playwright
- Follow the prompts:
- choose typescript or JavaScript (Default: TypeScript).
- Specify the test directory name.
- Determines whether to install a browser supported by PlayWright (Default: True).
If you choose to download a browser, PlayWright will download Chromium, Firefox, and WebKit, which may take some time. This process only occurs during first setup unless the PlayWright version has been updated.
Project structure
After initialization, you will get a project template:
playwright.config.ts # PlayWright configuration file
package.json # Node.js configuration file
package-lock.json # Node.js dependency lock file
tests/ # Your test directory
example.spec.ts # Template test case
tests-examples/ # Example tests directory
demo-todo-app.spec.ts # Example test case
Run the example test case:
npx playwright test
The test executes silently (in headless mode) and the results appear as:
Running 6 tests using 6 workers
6 passed (10s)
To open the last HTML report run:
npx playwright show-report
Sample source code
This is example.spec.ts
Test case:
import { test, expect } from '@playwright/test';
test('has title', async ({ page }) => {
await page.goto('https://playwright.dev/');
await expect(page).toHaveTitle(/Playwright/);
});
test('get started link', async ({ page }) => {
await page.goto('https://playwright.dev/');
await page.getByRole('link', { name: 'Get started' }).click();
await expect(page).toHaveURL(/.*intro/);
});
- first test: The verification page title contains “Playwright”.
- second test: Click the “Get Started” link and verify the URL.
each test
The methods are:
- one test name (For example,
'has title'
). - one Function Execute test logic.
The main methods include:
-
page.goto
: Navigate to a URL. -
expect(page).toHaveTitle
: Declares the page title. -
page.getByRole
: Position elements by role. -
await
: Wait for asynchronous operations to complete.
Run tests from command line
The following are commonly used instructions:
npx playwright test
- Run a specific test file:
npx playwright test landing-page.spec.ts
npx playwright test --debug
Code recording
use codegen
Features for recording interactions:
npx playwright codegen https://leapcell.io/
The recorded code can be copied into your file. NOTE: The logger may not handle complex operations such as hover.
actions and behaviors
This section describes some typical Playwright actions for interacting with page elements. Please note that locator
The objects introduced earlier do not actually position elements on the page during creation. Even if the element does not exist on the page, you can use the element locator method to obtain it. locator
The object will not throw any exceptions. The actual element lookup only happens during interaction. This is different from Selenium findElement
Method, directly searches for elements on the page, and throws an exception if not found.
Text input
use fill
Text input method, mainly for ,