Highlights

This patch includes bug fixes for the following issues:

#8287 - [BUG] webkit crashes intermittently: "file data stream has an unexpected number of bytes" #8281 - [BUG] HTML report crashes if diff snapshot does not exists #8230 - Using React Selectors with multiple React trees #8366 - [BUG] Mark timeout in isVisible as deprecated and noop

Browser Versions

• Chromium 94.0.4595.0
• Mozilla Firefox 91.0
• WebKit 15.0

This version of Playwright was also tested against the following stable channels:

• Google Chrome 92
• Microsoft Edge 92

<a href="https://youtu.be/LczBDR0gOhk"></a> <a href="https://youtu.be/LczBDR0gOhk">Playwright v1.14 updates</a>

🎭 Playwright Library

⚡️ New "strict" mode

Selector ambiguity is a common problem in automation testing. "strict" mode ensures that your selector points to a single element and throws otherwise.

Pass strict: true into your action calls to opt in.

// This will throw if you have more than one button!
await page.click('button', { strict: true });

📍 New Locators API

Locator represents a view to the element(s) on the page. It captures the logic sufficient to retrieve the element at any given moment.

The difference between the Locator and ElementHandle is that the latter points to a particular element, while Locator captures the logic of how to retrieve that element.

Also, locators are "strict" by default!

const locator = page.locator('button');
await locator.click();

Learn more in the documentation.

🧩 Experimental React and Vue selector engines

React and Vue selectors allow selecting elements by its component name and/or property values. The syntax is very similar to attribute selectors and supports all attribute selector operators.

await page.click('_react=SubmitButton[enabled=true]');
await page.click('_vue=submit-button[enabled=true]');

Learn more in the react selectors documentation and the vue selectors documentation.

✨ New nth and visible selector engines

• nth selector engine is equivalent to the :nth-match pseudo class, but could be combined with other selector engines.
• visible selector engine is equivalent to the :visible pseudo class, but could be combined with other selector engines.

// select the first button among all buttons
await button.click('button >> nth=0');
// or if you are using locators, you can use first(), nth() and last()
await page.locator('button').first().click();

// click a visible button
await button.click('button >> visible=true');

🎭 Playwright Test

✅ Web-First Assertions

expect now supports lots of new web-first assertions.

Consider the following example:

await expect(page.locator('.status')).toHaveText('Submitted');

Playwright Test will be re-testing the node with the selector .status until fetched Node has the "Submitted" text. It will be re-fetching the node and checking it over and over, until the condition is met or until the timeout is reached. You can either pass this timeout or configure it once via the testProject.expect value in test config.

By default, the timeout for assertions is not set, so it'll wait forever, until the whole test times out.

List of all new assertions:

• expect(locator).toBeChecked()
• expect(locator).toBeDisabled()
• expect(locator).toBeEditable()
• expect(locator).toBeEmpty()
• expect(locator).toBeEnabled()
• expect(locator).toBeFocused()
• expect(locator).toBeHidden()
• expect(locator).toBeVisible()
• expect(locator).toContainText(text, options?)
• expect(locator).toHaveAttribute(name, value)
• expect(locator).toHaveClass(expected)
• expect(locator).toHaveCount(count)
• expect(locator).toHaveCSS(name, value)
• expect(locator).toHaveId(id)
• expect(locator).toHaveJSProperty(name, value)
• expect(locator).toHaveText(expected, options)
• expect(page).toHaveTitle(title)
• expect(page).toHaveURL(url)
• expect(locator).toHaveValue(value)

⛓ Serial mode with describe.serial

Declares a group of tests that should always be run serially. If one of the tests fails, all subsequent tests are skipped. All tests in a group are retried together.

test.describe.serial('group', () => {
  test('runs first', async ({ page }) => { /* ... */ });
  test('runs second', async ({ page }) => { /* ... */ });
});

Learn more in the documentation.

🐾 Steps API with test.step

Split long tests into multiple steps using test.step() API:

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

test('test', async ({ page }) => {
  await test.step('Log in', async () => {
    // ...
  });
  await test.step('news feed', async () => {
    // ...
  });
});

Step information is exposed in reporters API.

🌎 Launch web server before running tests

To launch a server during the tests, use the webServer option in the configuration file. The server will wait for a given port to be available before running the tests, and the port will be passed over to Playwright as a baseURL when creating a context.

// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  webServer: {
    command: 'npm run start', // command to launch
    port: 3000, // port to await for 
    timeout: 120 * 1000, 
    reuseExistingServer: !process.env.CI,
  },
};
export default config;

Learn more in the documentation.

Browser Versions

• Chromium 94.0.4595.0
• Mozilla Firefox 91.0
• WebKit 15.0

This version of Playwright was also tested against the following stable channels:

• Google Chrome 92
• Microsoft Edge 92