Skip to content

chore(deps): update playwright to v1.46.1

GitLab Dependency Bot requested to merge gitlab-renovate-forks/gitlab-ui:renovate/playwright into main

This MR contains the following updates:

Package Type Update Change
playwright (source) minor 1.45.3 -> 1.46.1
playwright (source) devDependencies minor ^1.45.3 -> ^1.46.1
playwright-core (source) devDependencies minor ^1.45.3 -> ^1.46.1

MR created with the help of gitlab-org/frontend/renovate-gitlab-bot

Release Notes

microsoft/playwright (playwright)

v1.46.1

Compare Source

Highlights

https://github.com/microsoft/playwright/issues/32004 - [REGRESSION]: Client Certificates don't work with Microsoft IIS https://github.com/microsoft/playwright/issues/32004 - [REGRESSION]: Websites stall on TLS handshake errors when using Client Certificates https://github.com/microsoft/playwright/issues/32146 - [BUG]: Credential scanners warn about internal socks-proxy TLS certificates https://github.com/microsoft/playwright/issues/32056 - [REGRESSION]: 1.46.0 (TypeScript) - custom fixtures extend no longer chainable https://github.com/microsoft/playwright/issues/32070 - [Bug]: --only-changed flag and project dependencies https://github.com/microsoft/playwright/issues/32188 - [Bug]: --only-changed with shallow clone throws "unknown revision" error

Browser Versions
  • Chromium 128.0.6613.18
  • Mozilla Firefox 128.0
  • WebKit 18.0

This version was also tested against the following stable channels:

  • Google Chrome 127
  • Microsoft Edge 127

v1.46.0

Compare Source

TLS Client Certificates

Playwright now allows to supply client-side certificates, so that server can verify them, as specified by TLS Client Authentication.

When client certificates are specified, all browser traffic is routed through a proxy that establishes the secure TLS connection, provides client certificates to the server and validates server certificates.

The following snippet sets up a client certificate for https://example.com:

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

export default defineConfig({
  // ...
  use: {
    clientCertificates: [{
      origin: 'https://example.com',
      certPath: './cert.pem',
      keyPath: './key.pem',
      passphrase: 'mysecretpassword',
    }],
  },
  // ...
});

You can also provide client certificates to a particular test project or as a parameter of browser.newContext() and apiRequest.newContext().

--only-changed cli option

New CLI option --only-changed allows to only run test files that have been changed since the last git commit or from a specific git "ref".


##### Only run test files with uncommitted changes
npx playwright test --only-changed

##### Only run test files changed relative to the "main" branch
npx playwright test --only-changed=main
Component Testing: New router fixture

This release introduces an experimental router fixture to intercept and handle network requests in component testing. There are two ways to use the router fixture:

  • Call router.route(url, handler) that behaves similarly to page.route().
  • Call router.use(handlers) and pass MSW library request handlers to it.

Here is an example of reusing your existing MSW handlers in the test.

import { handlers } from '@​src/mocks/handlers';

test.beforeEach(async ({ router }) => {
  // install common handlers before each test
  await router.use(...handlers);
});

test('example test', async ({ mount }) => {
  // test as usual, your handlers are active
  // ...
});

This fixture is only available in component tests.

UI Mode / Trace Viewer Updates
  • Test annotations are now shown in UI mode.
  • Content of text attachments is now rendered inline in the attachments pane.
  • New setting to show/hide routing actions like route.continue().
  • Request method and status are shown in the network details tab.
  • New button to copy source file location to clipboard.
  • Metadata pane now displays the baseURL.
Miscellaneous
Possibly breaking change

Fixture values that are array of objects, when specified in the test.use() block, may require being wrapped into a fixture tuple. This is best seen on the example:

import { test as base } from '@​playwright/test';

// Define an option fixture that has an "array of objects" value
type User = { name: string, password: string };
const test = base.extend<{ users: User[] }>({
  users: [ [], { option: true } ],
}); 

// Specify option value in the test.use block.
test.use({
  // WRONG: this syntax may not work for you
  users: [
    { name: 'John Doe', password: 'secret' },
    { name: 'John Smith', password: 's3cr3t' },
  ],
  // CORRECT: this syntax will work. Note extra [] around the value, and the "scope" property.
  users: [[
    { name: 'John Doe', password: 'secret' },
    { name: 'John Smith', password: 's3cr3t' },
  ], { scope: 'test' }],
});

test('example test', async () => {
  // ...
});
Browser Versions
  • Chromium 128.0.6613.18
  • Mozilla Firefox 128.0
  • WebKit 18.0

This version was also tested against the following stable channels:

  • Google Chrome 127
  • Microsoft Edge 127

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Never, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this MR and you won't be reminded about these updates again.

  • If you want to rebase/retry this MR, check this box

This MR has been generated by Renovate Bot.

Edited by GitLab Dependency Bot

Merge request reports