v1.34.0

microsoft/playwrightv1.34.0May 20, 2023by aslushnikov

AI Summary

A major feature release introducing enhanced UI Mode capabilities, project teardown, and configuration options, while dropping Node.js 14 support.

Key Highlights

  • UI Mode now displays steps, fixtures, and attachments
  • New `testProject.teardown` property for cleanup after dependent projects
  • New `expect.configure` method for pre-configured expectations
  • New `locator.and()` method to create locators matching both conditions
  • New `browserContext.on('console')` and `on('dialog')` events

Breaking Changes

  • `npx playwright test` no longer works if both `playwright` and `@playwright/test` are installed
  • Node.js 14 is no longer supported

New Features

  • UI Mode enhancements (steps, fixtures, attachments)
  • Test project teardown functionality
  • Configurable expectations with `expect.configure`
  • Locator chaining with `locator.and()`
  • Browser context console and dialog event listeners
  • Web server stdout/stderr configuration options

Full Release Notes

<a href="https://youtu.be/JeFD6rqDbBo"><img src="https://github.com/microsoft/playwright/assets/746130/4e165491-1b1b-41c6-8674-4295622b66df" width=340></a>

<a href="https://youtu.be/JeFD6rqDbBo">Playwright v1.33 & v1.34 updates</a>

### Highlights

* UI Mode now shows steps, fixtures and attachments:
  <img src="https://github.com/microsoft/playwright/assets/746130/1d280419-d79a-4a56-b2dc-54d631281d56" width=640>
* New property [`testProject.teardown`](https://playwright.dev/docs/api/class-testproject#test-project-teardown) to specify a project that needs to run after this
  and all dependent projects have finished. Teardown is useful to cleanup any resources acquired by this project.

  A common pattern would be a `setup` dependency with a corresponding `teardown`:
  ```js
  // playwright.config.ts
  import { defineConfig } from '@playwright/test';

  export default defineConfig({
    projects: [
      {
        name: 'setup',
        testMatch: /global.setup\.ts/,
        teardown: 'teardown',
      },
      {
        name: 'teardown',
        testMatch: /global.teardown\.ts/,
      },
      {
        name: 'chromium',
        use: devices['Desktop Chrome'],
        dependencies: ['setup'],
      },
      {
        name: 'firefox',
        use: devices['Desktop Firefox'],
        dependencies: ['setup'],
      },
      {
        name: 'webkit',
        use: devices['Desktop Safari'],
        dependencies: ['setup'],
      },
    ],
  });
  ```
* New method [`expect.configure`](https://playwright.dev/docs/test-assertions#expectconfigure) to create pre-configured expect instance with its own defaults such as `timeout` and `soft`.
  ```js
  const slowExpect = expect.configure({ timeout: 10000 });
  await slowExpect(locator).toHaveText('Submit');

  // Always do soft assertions.
  const softExpect = expect.configure({ soft: true });
  ```
* New options `stderr` and `stdout`  in [`testConfig.webServer`](https://playwright.dev/docs/api/class-testconfig#test-config-web-server) to configure output handling:

  ```js
  // playwright.config.ts
  import { defineConfig } from '@playwright/test';

  export default defineConfig({
    // Run your local dev server before starting the tests
    webServer: {
      command: 'npm run start',
      url: 'http://127.0.0.1:3000',
      reuseExistingServer: !process.env.CI,
      stdout: 'pipe',
      stderr: 'pipe',
    },
  });
  ```
* New [`locator.and()`](https://playwright.dev/docs/api/class-locator#locator-and) to create a locator that matches both locators.

    ```js
    const button = page.getByRole('button').and(page.getByTitle('Subscribe'));
    ```

* New events [`browserContext.on('console')`](https://playwright.dev/docs/api/class-browsercontext#browser-context-event-console) and [`browserContext.on('dialog')`](https://playwright.dev/docs/api/class-browsercontext#browser-context-event-dialog) to subscribe to any dialogs
  and console messages from any page from the given browser context. Use the new methods [`consoleMessage.page()`](https://playwright.dev/docs/api/class-consolemessage#console-message-page)
  and [`dialog.page()`](https://playwright.dev/docs/api/class-dialog#dialog-page) to pin-point event source.

### ⚠️ Breaking changes

* `npx playwright test` no longer works if you install both `playwright` and `@playwright/test`. There's no need
  to install both, since you can always import browser automation APIs from `@playwright/test` directly:

  ```js
  // automation.ts
  import { chromium, firefox, webkit } from '@playwright/test';
  /* ... */
  ```
* Node.js 14 is no longer supported since it [reached its end-of-life](https://nodejs.dev/en/about/releases/) on April 30, 2023.

### Browser Versions

* Chromium 114.0.5735.26
* Mozilla Firefox 113.0
* WebKit 16.4

This version was also tested against the following stable channels:

* Google Chrome 113
* Microsoft Edge 113