Playwright: A Comprehensive Overview of Web UI Automation Testing Framework
December 21, 2024

Playwright: A Comprehensive Overview of Web UI Automation Testing Framework

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

  1. Make sure Node.js is installed.
  2. Initialize the PlayWright project using npm or yarn:
   # Using npm
   npm init playwright@latest

   # Using yarn
   yarn create playwright
Enter full screen mode

Exit full screen mode

  1. 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
Enter full screen mode

Exit full screen mode

Run the example test case:

npx playwright test
Enter full screen mode

Exit full screen mode

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
Enter full screen mode

Exit full screen mode



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/);
});
Enter full screen mode

Exit full screen mode

  • 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
Enter full screen mode

Exit full screen mode

  • Run a specific test file:
  npx playwright test landing-page.spec.ts
Enter full screen mode

Exit full screen mode

  npx playwright test --debug
Enter full screen mode

Exit full screen mode



Code recording

use codegen Features for recording interactions:

npx playwright codegen https://leapcell.io/
Enter full screen mode

Exit full screen mode

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 ,