playwright

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/15273 - [BUG] LaunchOptions config has no effect after update to v1.23.0
https://github.com/microsoft/playwright/issues/15351 - [REGRESSION]: Component testing project does not compile anymore
https://github.com/microsoft/playwright/issues/15431 - [BUG] Regression: page.on('console') is ignored in 1.23

Browser Versions

• Chromium 104.0.5112.20
• Mozilla Firefox 100.0.2
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 103
• Microsoft Edge 103

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/15219 - [REGRESSION]: playwright-core 1.23.0 issue with 'TypeError [ERR_INVALID_ARG_TYPE]: The "listener" argument'

Browser Versions

• Chromium 104.0.5112.20
• Mozilla Firefox 100.0.2
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 103
• Microsoft Edge 103

Playwright v1.23 updates

Network Replay

Now you can record network traffic into a HAR file and re-use the data in your tests.

To record network into HAR file:

npx playwright open --save-har=github.har.zip https://github.com/microsoft

Alternatively, you can record HAR programmatically:

const context = await browser.newContext({
  recordHar: { path: 'github.har.zip' }
});
// ... do stuff ...
await context.close();

Use the new methods page.routeFromHAR() or browserContext.routeFromHAR() to serve matching responses from the HAR file:

await context.routeFromHAR('github.har.zip');

Read more in our documentation.

Advanced Routing

You can now use route.fallback() to defer routing to other handlers.

Consider the following example:

// Remove a header from all requests.
test.beforeEach(async ({ page }) => {
  await page.route('**/*', route => {
    const headers = route.request().headers();
    delete headers['if-none-match'];
    route.fallback({ headers });
  });
});

test('should work', async ({ page }) => {
  await page.route('**/*', route => {
    if (route.request().resourceType() === 'image')
      route.abort();
    else
      route.fallback();
  });
});

Note that the new methods page.routeFromHAR() and browserContext.routeFromHAR() also participate in routing and could be deferred to.

Web-First Assertions Update

• New method expect(locator).toHaveValues() that asserts all selected values of <select multiple> element.
• Methods expect(locator).toContainText() and expect(locator).toHaveText() now accept ignoreCase option.

Component Tests Update

• Support for Vue2 via the @playwright/experimental-ct-vue2 package.
• Support for component tests for create-react-app with components in .js files.

Read more about component testing with Playwright.

Miscellaneous

• If there's a service worker that's in your way, you can now easily disable it with a new context option serviceWorkers:

  // playwright.config.ts
  export default {
    use: {
      serviceWorkers: 'block',
    }
  }
  

• Using .zip path for recordHar context option automatically zips the resulting HAR:

  const context = await browser.newContext({
    recordHar: {
      path: 'github.har.zip',
    }
  });
  

• If you intend to edit HAR by hand, consider using the "minimal" HAR recording mode
  that only records information that is essential for replaying:

  const context = await browser.newContext({
    recordHar: {
      path: 'github.har.zip',
      mode: 'minimal',
    }
  });
  

• Playwright now runs on Ubuntu 22 amd64 and Ubuntu 22 arm64. We also publish new docker image mcr.microsoft.com/playwright:v1.23.0-focal.

⚠️ Breaking Changes ⚠️

WebServer is now considered "ready" if request to the specified port has any of the following HTTP status codes:

• 200-299
• 300-399 (new)
• 400, 401, 402, 403 (new)

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/14254 - [BUG] focus() function in version 1.22 closes dropdown (not of select type) instead of just focus on the option

Browser Versions

• Chromium 102.0.5005.40
• Mozilla Firefox 99.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 101
• Microsoft Edge 101

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/14186 - [BUG] expect.toHaveScreenshot() generates an argument error

Browser Versions

• Chromium 102.0.5005.40
• Mozilla Firefox 99.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 101
• Microsoft Edge 101

Introducing Component Testing (preview)

Playwright Test can now test your React, Vue.js or Svelte components. You can use all the features of Playwright Test (such as parallelization, emulation & debugging) while running components in real browsers.

Component Tests (Preview)

Here is what a typical component test looks like:

// App.spec.tsx
import { test, expect } from '@playwright/experimental-ct-react';
import App from './App';

// Let's test component in a dark scheme!
test.use({ colorScheme: 'dark' });

test('should render', async ({ mount }) => {
  const component = await mount(<App></App>);

  // As with any Playwright test, assert locator text.
  await expect(component).toContainText('React');
  // Or do a screenshot 🚀
  await expect(component).toHaveScreenshot();
  // Or use any Playwright method
  await component.click();
});

Read more in our documentation.

Playwright v1.22 updates

Locators Update

• Role selectors allow selecting elements by their ARIA role, ARIA attributes and accessible name.

  // Click a button with accessible name "log in"
  await page.click('role=button[name="log in"]')
  

  Read more in our documentation.

• New locator.filter([options]) API to filter an existing locator

  const buttons = page.locator('role=button');
  // ...
  const submitButton = buttons.filter({ hasText: 'Submit' });
  await submitButton.click();
  

Screenshots Update

New web-first assertions expect(page).toHaveScreenshot() and expect(locator).toHaveScreenshot() that wait for screenshot stabilization and enhances test reliability.

The new assertions has screenshot-specific defaults, such as:

• disables animations
• uses CSS scale option

await page.goto('https://playwright.dev');
await expect(page).toHaveScreenshot();

The new expect(page).toHaveScreenshot() saves screenshots at the same location as expect(screenshot).toMatchSnapshot().

Browser Versions

• Chromium 102.0.5005.40
• Mozilla Firefox 99.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 101
• Microsoft Edge 101

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/pull/13597 - [BUG] fullyParallel created too many workers, slowing down test run
https://github.com/microsoft/playwright/issues/13530 - [REGRESSION]: Pull request #12877 prevents the library from being used on any linux distro that is not Ubuntu

Browser Versions

• Chromium 101.0.4951.26
• Mozilla Firefox 98.0.2
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 100
• Microsoft Edge 100

Playwright v1.21 updates

Highlights

• New experimental role selectors that allow selecting elements by their ARIA role, ARIA attributes and accessible name.

  // Click a button with accessible name "log in"
  await page.click('role=button[name="log in"]')
  

  To use role selectors, make sure to pass PLAYWRIGHT_EXPERIMENTAL_FEATURES=1 environment variable:

  // playwright.config.js
  process.env.PLAYWRIGHT_EXPERIMENTAL_FEATURES = '1';
  module.exports = {
    /* ... */
  };
  

  Read more in our documentation.

• New scale option in Page.screenshot for smaller sized screenshots.

• New caret option in Page.screenshot to control text caret. Defaults to "hide".

• New method expect.poll to wait for an arbitrary condition:

  // Poll the method until it returns an expected result.
  await expect.poll(async () => {
    const response = await page.request.get('https://api.example.com');
    return response.status();
  }).toBe(200);
  

  expect.poll supports most synchronous matchers, like .toBe(), .toContain(), etc.
  Read more in our documentation.

Behavior Changes

• ESM support when running TypeScript tests is now enabled by default. The PLAYWRIGHT_EXPERIMENTAL_TS_ESM env variable is
  no longer required.
• The mcr.microsoft.com/playwright docker image no longer contains Python. Please use mcr.microsoft.com/playwright/python
  as a Playwright-ready docker image with pre-installed Python.
• Playwright now supports large file uploads (100s of MBs) via Locator.setInputFiles API.

Browser Versions

• Chromium 101.0.4951.26
• Mozilla Firefox 98.0.2
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 100
• Microsoft Edge 100

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/13078 - [BUG] Extension required when importing other files with type="module"
https://github.com/microsoft/playwright/issues/13099 - [BUG] beforeAll is called before each test (fullyParallel)
https://github.com/microsoft/playwright/issues/13204 - [BUG] mask stalls the screenshot

Browser Versions

• Chromium 101.0.4921.0
• Mozilla Firefox 97.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 99
• Microsoft Edge 99

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/12711 - [REGRESSION] Page.screenshot hangs on some sites
https://github.com/microsoft/playwright/issues/12807 - [BUG] Cookies get assigned before fulfilling a response
https://github.com/microsoft/playwright/issues/12814 - [Question] how to use expect.any in playwright
https://github.com/microsoft/playwright/issues/12821 - [BUG] Chromium: Cannot click, element intercepts pointer events
https://github.com/microsoft/playwright/issues/12836 - [REGRESSION]: Tests not detected as ES module in v1.20
https://github.com/microsoft/playwright/issues/12862 - [Feature] Allow to use toMatchSnapshot for file formats other than txt (e.g. csv)
https://github.com/microsoft/playwright/issues/12887 - [BUG] Locator.count() with _vue selector with Repro
https://github.com/microsoft/playwright/issues/12940 - [BUG] npm audit - High Severity vulnerability in json5 package forcing to install Playwright 1.18.1
https://github.com/microsoft/playwright/issues/12974 - [BUG] Regression - chromium browser closes during test or debugging session on macos

Browser Versions

• Chromium 101.0.4921.0
• Mozilla Firefox 97.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 99
• Microsoft Edge 99

Playwright v1.20 updates

Highlights

• New options for methods page.screenshot(), locator.screenshot() and elementHandle.screenshot():

  • Option animations: "disabled" rewinds all CSS animations and transitions to a consistent state.
  • Option mask: Locator[] masks given elements, overlaying them with pink #FF00FF boxes.

• expect().toMatchSnapshot() now supports anonymous snapshots: when snapshot name is missing, Playwright Test will generate one
  automatically:

  expect('Web is Awesome <3').toMatchSnapshot();
  

• New maxDiffPixels and maxDiffPixelRatio options for fine-grained screenshot comparison using expect().toMatchSnapshot():

  expect(await page.screenshot()).toMatchSnapshot({
    maxDiffPixels: 27, // allow no more than 27 different pixels.
  });
  

  It is most convenient to specify maxDiffPixels or maxDiffPixelRatio once in TestConfig.expect.

• Playwright Test now adds TestConfig.fullyParallel mode. By default, Playwright Test parallelizes between files. In fully parallel mode, tests inside a single file are also run in parallel. You can also use --fully-parallel command line flag.

  // playwright.config.ts
  export default {
    fullyParallel: true,
  };
  

• TestProject.grep and TestProject.grepInvert are now configurable per project. For example, you can now
  configure smoke tests project using grep:

  // playwright.config.ts
  export default {
    projects: [
      {
        name: 'smoke tests',
        grep: /@smoke/,
      },
    ],
  };
  

• Trace Viewer now shows API testing requests.

• locator.highlight() visually reveals element(s) for easier debugging.

Announcements

• We now ship a designated Python docker image mcr.microsoft.com/playwright/python. Please switch over to it if you use Python. This is the last release that includes Python inside our javascript mcr.microsoft.com/playwright docker image.
• v1.20 is the last release to receive WebKit update for macOS 10.15 Catalina. Please update MacOS to keep using latest & greatest WebKit!

Browser Versions

• Chromium 101.0.4921.0
• Mozilla Firefox 97.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 99
• Microsoft Edge 99

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/12091 - [BUG] playwright 1.19.0 generates more than 1 trace file per test
https://github.com/microsoft/playwright/issues/12106 - [BUG] Error: EBUSY: resource busy or locked when using volumes in docker-compose with playwright 1.19.0 and mcr.microsoft.com/playwright:v1.15.0-focal

Browser Versions

• Chromium 100.0.4863.0
• Mozilla Firefox 96.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 98
• Microsoft Edge 98

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/12075 - [Question] After update to 1.19 firefox fails to run
https://github.com/microsoft/playwright/issues/12090 - [BUG] did something change on APIRequest/Response APIs ?

Browser Versions

• Chromium 100.0.4863.0
• Mozilla Firefox 96.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 98
• Microsoft Edge 98

Playwright v1.19 updates

Playwright Test Updates

Soft assertions

Playwright Test v1.19 now supports soft assertions. Failed soft assertions do not terminate test execution, but mark the test as failed. Read more in our documentation.

// Make a few checks that will not stop the test when failed...
await expect.soft(page.locator('#status')).toHaveText('Success');
await expect.soft(page.locator('#eta')).toHaveText('1 day');

// ... and continue the test to check more things.
await page.locator('#next-page').click();
await expect.soft(page.locator('#title')).toHaveText('Make another order');

Custom error messages

You can now specify a custom error message as a second argument to the expect and expect.soft functions, for example:

await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();

The error would look like this:

    Error: should be logged in

    Call log:
      - expect.toBeVisible with timeout 5000ms
      - waiting for selector "text=Name"


      2 |
      3 | test('example test', async({ page }) => {
    > 4 |   await expect(page.locator('text=Name'), 'should be logged in').toBeVisible();
        |                                                                  ^
      5 | });
      6 |

Parallel mode in file

By default, tests in a single file are run in order. If you have many independent tests in a single file, you can now
run them in parallel with method: test.describe.configure:

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

test.describe.configure({ mode: 'parallel' });

test('parallel 1', async () => {});
test('parallel 2', async () => {});

⚠️ Potentially breaking change in Playwright Test Global Setup

It is unlikely that this change will affect you, no action is required if your tests keep running as they did.

We've noticed that in rare cases, the set of tests to be executed was configured in the global setup by means of the environment variables. We also noticed some applications that were post processing the reporters' output in the global teardown. If you are doing one of the two, learn more

Locator Updates

Locator now supports a has option that makes sure it contains another locator inside:

await page.locator('article', {
  has: page.locator('.highlight'),
}).locator('button').click();

The snippet above will select article that has highlight in it and will press the button in it.
Read more in locator documentation

Other Updates

• New method: Locator.page
• method: Page.screenshot and method: Locator.screenshot now automatically hides blinking caret
• Playwright Codegen now generates locators and frame locators
• New option url in testConfig.webServer to ensure your web server is ready before running the tests
• New property: TestInfo.errors and property: TestResult.errors that contain all failed assertions and soft assertions.

Browser Versions

• Chromium 100.0.4863.0
• Mozilla Firefox 96.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 98
• Microsoft Edge 98

Highlights

This patch includes improvements to the TypeScript support and the following bug fixes:

https://github.com/microsoft/playwright/issues/11550 - [REGRESSION]: Errors inside route handler does not lead to unhandled rejections anymore
https://github.com/microsoft/playwright/issues/11552 - [BUG] Could not resolve "C:\repo\framework\utils" in file C:\repo\tests\test.ts.

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97

Playwright v1.18 updates

Locator Improvements

• locator.dragTo(locator)
• expect(locator).toBeChecked({ checked })
• Each locator can now be optionally filtered by the text it contains:

  await page.locator('li', { hasText: 'my item' }).locator('button').click();
  

  Read more in locator documentation.

Testing API improvements

• expect(response).toBeOK()
• testInfo.attach()
• test.info()

Improved TypeScript Support

1. Playwright Test now respects tsconfig.json's baseUrl and paths, so you can use aliases
2. There is a new environment variable PW_EXPERIMENTAL_TS_ESM that allows importing ESM modules in your TS code, without the need for the compile step. Don't forget the .js suffix when you are importing your esm modules. Run your tests as follows:

npm i --save-dev @playwright/[email protected]
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test

Create Playwright

The npm init playwright command is now generally available for your use:

# Run from your project's root directory
npm init playwright
# Or create a new project
npm init playwright new-project

This will scaffold everything needed to get started with Playwright Test: configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts.

New APIs & changes

• new testCase.repeatEachIndex API
• acceptDownloads option now defaults to true

Breaking change: custom config options

Custom config options are a convenient way to parametrize projects with different values. Learn more in the parametrization guide.

Previously, any fixture introduced through test.extend could be overridden in the testProject.use config section. For example,

// WRONG: THIS SNIPPET DOES NOT WORK SINCE v1.18.

// fixtures.js
const test = base.extend({
  myParameter: 'default',
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

The proper way to make a fixture parametrized in the config file is to specify option: true when defining the fixture. For example,

// CORRECT: THIS SNIPPET WORKS SINCE v1.18.

// fixtures.js
const test = base.extend({
  // Fixtures marked as "option: true" will get a value specified in the config,
  // or fallback to the default value.
  myParameter: ['default', { option: true }],
});

// playwright.config.js
module.exports = {
  use: {
    myParameter: 'value',
  },
};

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97

(1.18.0-beta-1642620709000)

Locator Improvements

• locator.dragTo(locator)
• expect(locator).toBeChecked({ checked })
• Each locator can now be optionally filtered by the text it contains:

  await page.locator('li', { hasText: 'my item' }).locator('button').click();
  

  Read more in locator documentation.

Testing API improvements

• expect(response).toBeOK()
• testInfo.attach()
• test.info()

Improved TypeScript Support

1. Playwright Test now respects tsconfig.json's baseUrl and paths, so you can use aliases
2. There is a new environment variable PW_EXPERIMENTAL_TS_ESM that allows importing ESM modules in your TS code, without the need for the compile step. Don't forget the .js suffix when you are importing your esm modules. Run your tests as follows:

npm i --save-dev @playwright/[email protected]
PW_EXPERIMENTAL_TS_ESM=1 npx playwright test

Create Playwright

The npm init playwright command is now generally available for your use:

# Run from your project's root directory
npm init playwright
# Or create a new project
npm init playwright new-project

This will scaffold everything needed to get started with Playwright Test: configuration file, optionally add examples, a GitHub Action workflow and a first test example.spec.ts.

New APIs & changes

• new testCase.repeatEachIndex API
• new option fixtures
• acceptDownloads option now defaults to true

Browser Versions

• Chromium 99.0.4812.0
• Mozilla Firefox 95.0
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 97
• Microsoft Edge 97

Bugfixes

#11274 - fix: pin colors to 1.4.0
#11228 - fix(click): don't fail on stale context while click

Highlights

This patch includes bug fixes for the following issues:

https://github.com/microsoft/playwright/issues/10638 - [BUG] Locator.click -> subtree intercepts pointer events since version 1.17.0
https://github.com/microsoft/playwright/issues/10632 - [BUG] Playwright 1.17.0 -> After clicking the element - I get an error that click action was failed
https://github.com/microsoft/playwright/issues/10627 - [REGRESSION]: Can no longer click Material UI select box
https://github.com/microsoft/playwright/issues/10620 - [BUG] trailing zero width whitespace fails toHaveText

Browser Versions

• Chromium 98.0.4695.0
• Mozilla Firefox 94.0.1
• WebKit 15.4

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

• Google Chrome 96
• Microsoft Edge 96

(1.17.1)

Playwright v1.17 updates

Frame Locators

Playwright 1.17 introduces frame locators - a locator to the iframe on the page. Frame locators capture the logic sufficient to retrieve the iframe and then locate elements in that iframe. Frame locators are strict by default, will wait for iframe to appear and can be used in Web-First assertions.

Frame locators can be created with either page.frameLocator(selector) or locator.frameLocator(selector) method.

const locator = page.frameLocator('#my-iframe').locator('text=Submit');
await locator.click();

Read more at our documentation.

Trace Viewer Update

Playwright Trace Viewer is now available online at https://trace.playwright.dev! Just drag-and-drop your trace.zip file to inspect its contents.

NOTE: trace files are not uploaded anywhere; trace.playwright.dev is a progressive web application that processes traces locally.

• Playwright Test traces now include sources by default (these could be turned off with tracing option)
• Trace Viewer now shows test name
• New trace metadata tab with browser details
• Snapshots now have URL bar

HTML Report Update

• HTML report now supports dynamic filtering
• Report is now a single static HTML file that could be sent by e-mail or as a slack attachment.

Ubuntu ARM64 support + more

• Playwright now supports Ubuntu 20.04 ARM64. You can now run Playwright tests inside Docker on Apple M1 and on Raspberry Pi.
• You can now use Playwright to install stable version of Edge on Linux:

  npx playwright install msedge
  

New APIs

• Tracing now supports a 'title' option
• Page navigations support a new 'commit' waiting option
• HTML reporter got new configuration options
• testConfig.snapshotDir option
• testInfo.parallelIndex
• testInfo.titlePath
• testOptions.trace has new options
• expect.toMatchSnapshot supports subdirectories
• reporter.printsToStdio()

Browser Versions

• Chromium 98.0.4695.0
• Mozilla Firefox 94.0.1
• WebKit 15.4

This version was also tested against the following stable channels:

• Google Chrome 96
• Microsoft Edge 96