Playwright

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/16319 - [BUG] webServer.command esbuild fails with ESM and Yarn
https://github.com/microsoft/playwright/issues/16460 - [BUG] Component test fails on 2nd run when SSL is used
https://github.com/microsoft/playwright/issues/16665 - [BUG] custom selector engines don't work when running in debug mode

Browser Versions

- Chromium 105.0.5195.19
- Mozilla Firefox 103.0
- WebKit 16.0

This version was also tested against the following stable channels:

- Google Chrome 104
- Microsoft Edge 104

VSCode Extension

- **New Playwright actions view**

<img width="246" alt="Playwright actions" src="https://user-images.githubusercontent.com/883973/184041259-812722f2-26e3-4561-a972-a1c7973f1332.png">

- **Pick selector**
You can pick selector right from a live page, before or after running a test

<img width="660" alt="Pick selector" src="https://user-images.githubusercontent.com/883973/184041462-288b9458-1650-4789-bd9e-b60d2ccd11dc.png">

- **Record new test**
Start recording where you left off with the new 'Record new test' feature.

- **Show & reuse browser**
Watch your tests running live & keep devtools open. Develop while continuously running tests.

<img width="660" alt="extension screenshot" src="https://user-images.githubusercontent.com/746130/184043183-1b3932ec-2ca9-4775-a10e-e6fbb20f9a95.jpg">

Test Runner

* [`test.step(title, body)`](https://playwright.dev/docs/api/class-test#test-step) now returns the value of the step function:

ts
test('should work', async ({ page }) => {
const pageTitle = await test.step('get title', async () => {
await page.goto('https://playwright.dev');
return await page.title();
});
console.log(pageTitle);
});


* Added [`test.describe.fixme(title, callback)`](https://playwright.dev/docs/api/class-test#test-describe-fixme).
* New `'interrupted'` test status.
* Enable tracing via CLI flag: `npx playwright test --trace=on`.
* New property [`testCase.id`](https://playwright.dev/docs/api/class-testcase#test-case-id) that can be use in reporters as a history ID.

Announcements

* 🎁 We now ship Ubuntu 22.04 Jammy Jellyfish docker image: `mcr.microsoft.com/playwright:v1.25.0-jammy`.
* 🪦 This is the last release with macOS 10.15 support (deprecated as of 1.21).
* 🪦 This is the last release with Node.js 12 support, we recommend upgrading to Node.js LTS (16).
* ⚠️ Ubuntu 18 is now deprecated and will not be supported as of Dec 2022.

Browser Versions

* Chromium 105.0.5195.19
* Mozilla Firefox 103.0
* WebKit 16.0

This version was also tested against the following stable channels:

* Google Chrome 104
* Microsoft Edge 104

Highlights

This patch includes the following bug fixes:

Highlights

This patch includes the following bug fixes:

https://github.com/microsoft/playwright/issues/15898 - [BUG] Typescript error: The type for webServer config property (TestConfigWebServer) is not typed correctly
https://github.com/microsoft/playwright/issues/15913 - [BUG] hooksConfig is required for mount fixture
https://github.com/microsoft/playwright/issues/15932 - [BUG] - Install MS Edge on CI Fails

Browser Versions

- Chromium 104.0.5112.48
- Mozilla Firefox 102.0
- WebKit 16.0

This version was also tested against the following stable channels:

- Google Chrome 103
- Microsoft Edge 103

Browser Versions

- Chromium 104.0.5112.48
- Mozilla Firefox 102.0
- WebKit 16.0

This version was also tested against the following stable channels:

- Google Chrome 103
- Microsoft Edge 103

🌍 Multiple Web Servers in `playwright.config.ts`

Launch multiple web servers, databases, or other processes by passing an array of configurations:

ts
// playwright.config.ts
import type { PlaywrightTestConfig } from 'playwright/test';
const config: PlaywrightTestConfig = {
webServer: [
{
command: 'npm run start',
port: 3000,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
},
{
command: 'npm run backend',
port: 3333,
timeout: 120 * 1000,
reuseExistingServer: !process.env.CI,
}
],
use: {
baseURL: 'http://localhost:3000/',
},
};
export default config;


🐂 Debian 11 Bullseye Support

Playwright now supports Debian 11 Bullseye on x86_64 for Chromium, Firefox and WebKit. Let us know
if you encounter any issues!

Linux support looks like this:

| | Ubuntu 18.04 | Ubuntu 20.04 | Ubuntu 22.04 | Debian 11
| :--- | :---: | :---: | :---: | :---: |
| Chromium | ✅ | ✅ | ✅ | ✅ |
| WebKit | ✅ | ✅ | ✅ | ✅ |
| Firefox | ✅ | ✅ | ✅ | ✅ |

🕵️ Anonymous Describe

It is now possible to call [`test.describe(callback)`](https://playwright.dev/docs/api/class-test#test-describe-2) to create suites without a title. This is useful for giving a group of tests a common option with [`test.use(options)`](https://playwright.dev/docs/api/class-test#test-use).

ts
test.describe(() => {
test.use({ colorScheme: 'dark' });

test('one', async ({ page }) => {
// ...
});

test('two', async ({ page }) => {
// ...
});
});


🧩 Component Tests Update

Playwright 1.24 Component Tests introduce `beforeMount` and `afterMount` hooks.
Use these to configure your app for tests.

Vue + Vue Router

For example, this could be used to setup App router in Vue.js:

js
// src/component.spec.ts
import { test } from 'playwright/experimental-ct-vue';
import { Component } from './mycomponent';

test('should work', async ({ mount }) => {
const component = await mount(Component, {
hooksConfig: {
/* anything to configure your app */
}
});
});


js
// playwright/index.ts
import { router } from '../router';
import { beforeMount } from 'playwright/experimental-ct-vue/hooks';

beforeMount(async ({ app, hooksConfig }) => {
app.use(router);
});


React + Next.js

A similar configuration in Next.js would look like this:

js
// src/component.spec.jsx
import { test } from 'playwright/experimental-ct-react';
import { Component } from './mycomponent';

test('should work', async ({ mount }) => {
const component = await mount(<Component></Component>, {
// Pass mock value from test into `beforeMount`.
hooksConfig: {
router: {
query: { page: 1, per_page: 10 },
asPath: '/posts'
}
}
});
});


js
// playwright/index.js
import router from 'next/router';
import { beforeMount } from 'playwright/experimental-ct-react/hooks';

beforeMount(async ({ hooksConfig }) => {
// Before mount, redefine useRouter to return mock value from test.
router.useRouter = () => hooksConfig.router;
});


Browser Versions

- Chromium 104.0.5112.48
- Mozilla Firefox 102.0
- WebKit 16.0

This version was also tested against the following stable channels:

- Google Chrome 103
- Microsoft Edge 103