v1.45.1

Highlights

#31473 - [REGRESSION]: Playwright raises an error ENOENT: no such file or directory, open 'test-results/.playwright-artifacts-0/hash.zip' with Electron
#31442 - [REGRESSION]: Locators of elements changing from/to hidden have operations hanging when using --disable-web-security
#31431 - [REGRESSION]: NewTab doesn't work properly with Chrome with --disable-web-security
#31425 - [REGRESSION]: beforeEach hooks are not skipped when describe condition depends on fixtures
#31491 - [REGRESSION]: @playwright/experimental-ct-react doesn't work with VSCode extension and PNPM

Browser Versions

• Chromium 127.0.6533.5
• Mozilla Firefox 127.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 126
• Microsoft Edge 126

v1.45.0

Clock

Utilizing the new Clock API allows to manipulate and control time within tests to verify time-related behavior. This API covers many common scenarios, including:

• testing with predefined time;
• keeping consistent time and timers;
• monitoring inactivity;
• ticking through time manually.

// Initialize clock and let the page load naturally.
await page.clock.install({ time: new Date('2024-02-02T08:00:00') });
await page.goto('http://localhost:3333');

// Pretend that the user closed the laptop lid and opened it again at 10am,
// Pause the time once reached that point.
await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));

// Assert the page state.
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');

// Close the laptop lid again and open it at 10:30am.
await page.clock.fastForward('30:00');
await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:30:00 AM');

See the clock guide for more details.

Test runner

• New CLI option --fail-on-flaky-tests that sets exit code to 1 upon any flaky tests. Note that by default, the test runner exits with code 0 when all failed tests recovered upon a retry. With this option, the test run will fail in such case.

• New enviroment variable PLAYWRIGHT_FORCE_TTY controls whether built-in list, line and dot reporters assume a live terminal. For example, this could be useful to disable tty behavior when your CI environment does not handle ANSI control sequences well. Alternatively, you can enable tty behavior even when to live terminal is present, if you plan to post-process the output and handle control sequences.

  # Avoid TTY features that output ANSI control sequences
  PLAYWRIGHT_FORCE_TTY=0 npx playwright test
  
  # Enable TTY features, assuming a terminal width 80
  PLAYWRIGHT_FORCE_TTY=80 npx playwright test

• New options testConfig.respectGitIgnore and testProject.respectGitIgnore control whether files matching .gitignore patterns are excluded when searching for tests.

• New property timeout is now available for custom expect matchers. This property takes into account playwright.config.ts and expect.configure().

  import { expect as baseExpect } from '@playwright/test';
  
  export const expect = baseExpect.extend({
    async toHaveAmount(locator: Locator, expected: number, options?: { timeout?: number }) {
      // When no timeout option is specified, use the config timeout.
      const timeout = options?.timeout ?? this.timeout;
      // ... implement the assertion ...
    },
  });

Miscellaneous

• Method locator.setInputFiles() now supports uploading a directory for <input type=file webkitdirectory> elements.

  await page.getByLabel('Upload directory').setInputFiles(path.join(__dirname, 'mydir'));

• Multiple methods like locator.click() or locator.press() now support a ControlOrMeta modifier key. This key maps to Meta on macOS and maps to Control on Windows and Linux.

  // Press the common keyboard shortcut Control+S or Meta+S to trigger a "Save" operation.
  await page.keyboard.press('ControlOrMeta+S');

• New property httpCredentials.send in apiRequest.newContext() that allows to either always send the Authorization header or only send it in response to 401 Unauthorized.

• New option reason in apiRequestContext.dispose() that will be included in the error message of ongoing operations interrupted by the context disposal.

• New option host in browserType.launchServer() allows to accept websocket connections on a specific address instead of unspecified 0.0.0.0.

• Playwright now supports Chromium, Firefox and WebKit on Ubuntu 24.04.

• v1.45 is the last release to receive WebKit update for macOS 12 Monterey. Please update macOS to keep using the latest WebKit.

Browser Versions

• Chromium 127.0.6533.5
• Mozilla Firefox 127.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 126
• Microsoft Edge 126

v1.44.1

Highlights

#30779 - [REGRESSION]: When using video: 'on' with VSCode extension the browser got closed
#30755 - [REGRESSION]: Electron launch with spaces inside executablePath didn't work
#30770 - [REGRESSION]: Mask elements outside of viewport when creating fullscreen screenshots didn't work
#30858 - [REGRESSION]: ipv6 got shown instead of localhost in show-trace/show-report

Browser Versions

• Chromium 125.0.6422.14
• Mozilla Firefox 125.0.1
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 124
• Microsoft Edge 124

v1.44.0

New APIs

Accessibility assertions

• expect(locator).toHaveAccessibleName() checks if the element has the specified accessible name:

  const locator = page.getByRole('button');
  await expect(locator).toHaveAccessibleName('Submit');

• expect(locator).toHaveAccessibleDescription() checks if the element has the specified accessible description:

  const locator = page.getByRole('button');
  await expect(locator).toHaveAccessibleDescription('Upload a photo');

• expect(locator).toHaveRole() checks if the element has the specified ARIA role:

  const locator = page.getByTestId('save-button');
  await expect(locator).toHaveRole('button');

Locator handler

• After executing the handler added with page.addLocatorHandler(), Playwright will now wait until the overlay that triggered the handler is not visible anymore. You can opt-out of this behavior with the new noWaitAfter option.
• You can use new times option in page.addLocatorHandler() to specify maximum number of times the handler should be run.
• The handler in page.addLocatorHandler() now accepts the locator as argument.
• New page.removeLocatorHandler() method for removing previously added locator handlers.

const locator = page.getByText('This interstitial covers the button');
await page.addLocatorHandler(locator, async overlay => {
  await overlay.locator('#close').click();
}, { times: 3, noWaitAfter: true });
// Run your tests that can be interrupted by the overlay.
// ...
await page.removeLocatorHandler(locator);

Miscellaneous options

• multipart option in apiRequestContext.fetch() now accepts FormData and supports repeating fields with the same name.

  const formData = new FormData();
  formData.append('file', new File(['let x = 2024;'], 'f1.js', { type: 'text/javascript' }));
  formData.append('file', new File(['hello'], 'f2.txt', { type: 'text/plain' }));
  context.request.post('https://example.com/uploadFiles', {
    multipart: formData
  });

• expect(callback).toPass({ intervals }) can now be configured by expect.toPass.inervals option globally in testConfig.expect or per project in testProject.expect.

• expect(page).toHaveURL(url) now supports ignoreCase option.

• testProject.ignoreSnapshots allows to configure per project whether to skip screenshot expectations.

Reporter API

• New method suite.entries() returns child test suites and test cases in their declaration order. suite.type and testCase.type can be used to tell apart test cases and suites in the list.
• Blob reporter now allows overriding report file path with a single option outputFile. The same option can also be specified as PLAYWRIGHT_BLOB_OUTPUT_FILE environment variable that might be more convenient on CI/CD.
• JUnit reporter now supports includeProjectInTestName option.

Command line

• --last-failed CLI option for running only tests that failed in the previous run.

  First run all tests:

  $ npx playwright test
  
  Running 103 tests using 5 workers
  ...
  2 failed
    [chromium] › my-test.spec.ts:8:5 › two ─────────────────────────────────────────────────────────
    [chromium] › my-test.spec.ts:13:5 › three ──────────────────────────────────────────────────────
  101 passed (30.0s)

  Now fix the failing tests and run Playwright again with --last-failed option:

  $ npx playwright test --last-failed
  
  Running 2 tests using 2 workers
    2 passed (1.2s)

Browser Versions

• Chromium 125.0.6422.14
• Mozilla Firefox 125.0.1
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 124
• Microsoft Edge 124

v1.43.1

Highlights

#30300 - [REGRESSION]: UI mode restarts if keep storage state
#30339 - [REGRESSION]: Brand new install of playwright, unable to run chromium with show browser using vscode

Browser Versions

• Chromium 124.0.6367.29
• Mozilla Firefox 124.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 123
• Microsoft Edge 123

v1.43.0

New APIs

• Method browserContext.clearCookies() now supports filters to remove only some cookies.

  // Clear all cookies.
  await context.clearCookies();
  // New: clear cookies with a particular name.
  await context.clearCookies({ name: 'session-id' });
  // New: clear cookies for a particular domain.
  await context.clearCookies({ domain: 'my-origin.com' });

• New mode retain-on-first-failure for testOptions.trace. In this mode, trace is recorded for the first run of each test, but not for retires. When test run fails, the trace file is retained, otherwise it is removed.

  import { defineConfig } from '@playwright/test';
  
  export default defineConfig({
    use: {
      trace: 'retain-on-first-failure',
    },
  });

• New property testInfo.tags exposes test tags during test execution.

  test('example', async ({ page }) => {
    console.log(test.info().tags);
  });

• New method locator.contentFrame() converts a Locator object to a FrameLocator. This can be useful when you have a Locator object obtained somewhere, and later on would like to interact with the content inside the frame.

  const locator = page.locator('iframe[name="embedded"]');
  // ...
  const frameLocator = locator.contentFrame();
  await frameLocator.getByRole('button').click();

• New method frameLocator.owner() converts a FrameLocator object to a Locator. This can be useful when you have a FrameLocator object obtained somewhere, and later on would like to interact with the iframe element.

  const frameLocator = page.frameLocator('iframe[name="embedded"]');
  // ...
  const locator = frameLocator.owner();
  await expect(locator).toBeVisible();

UI Mode Updates

• See tags in the test list.
• Filter by tags by typing @fast or clicking on the tag itself.
• New shortcuts:
  • F5 to run tests.
  • Shift F5 to stop running tests.
  • Ctrl ` to toggle test output.

Browser Versions

• Chromium 124.0.6367.29
• Mozilla Firefox 124.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 123
• Microsoft Edge 123

v1.42.1

Highlights

#29732 - [Regression]: HEAD requests to webServer.url since v1.42.0
#29746 - [Regression]: Playwright CT CLI scripts fail due to broken initializePlugin import
#29739 - [Bug]: Component tests fails when imported a module with a dot in a name
#29731 - [Regression]: 1.42.0 breaks some import statements
#29760 - [Bug]: Possible regression with chained locators in v1.42

Browser Versions

• Chromium 123.0.6312.4
• Mozilla Firefox 123.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 122
• Microsoft Edge 123

v1.42.0

New APIs

• Test tags

  New tag syntax for adding tags to the tests (@-tokens in the test title are still supported).

  test('test customer login', { tag: ['@fast', '@login'] }, async ({ page }) => {
    // ...
  });

  Use --grep command line option to run only tests with certain tags.

  npx playwright test --grep @fast

• Annotating skipped tests

  New annotation syntax for test annotations allows annotating the tests that do not run.

  test('test full report', {
    annotation: [
      { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
      { type: 'docs', description: 'https://playwright.dev/docs/test-annotations#tag-tests' },
    ],
  }, async ({ page }) => {
    // ...
  });

• page.addLocatorHandler()

Warning

This feature is experimental, we are actively looking for the feedback based on your scenarios.

New method page.addLocatorHandler() registers a callback that will be invoked when specified element becomes visible and may block Playwright actions. The callback can get rid of the overlay. Here is an example that closes a cookie dialog when it appears.

// Setup the handler.
await page.addLocatorHandler(
    page.getByRole('heading', { name: 'Hej! You are in control of your cookies.' }),
    async () => {
      await page.getByRole('button', { name: 'Accept all' }).click();
    });
// Write the test as usual.
await page.goto('https://www.ikea.com/');
await page.getByRole('link', { name: 'Collection of blue and white' }).click();
await expect(page.getByRole('heading', { name: 'Light and easy' })).toBeVisible();

• Project wildcard filter
  Playwright command line flag now supports '*' wildcard when filtering by project.

  npx playwright test --project='*mobile*'

• Other APIs

  • expect(callback).toPass({ timeout })
    The timeout can now be configured by expect.toPass.timeout option globally or in project config

  • electronApplication.on('console')
    electronApplication.on('console') event is emitted when Electron main process calls console API methods.

    electronApp.on('console', async msg => {
      const values = [];
      for (const arg of msg.args())
        values.push(await arg.jsonValue());
      console.log(...values);
    });
    await electronApp.evaluate(() => console.log('hello', 5, { foo: 'bar' }));

  • page.pdf() accepts two new options tagged and outline.

Breaking changes

Mixing the test instances in the same suite is no longer supported. Allowing it was an oversight as it makes reasoning about the semantics unnecessarily hard.

const test = baseTest.extend({ item: async ({}, use) => {} });
baseTest.describe('Admin user', () => {
  test('1', async ({ page, item }) => {});
  test('2', async ({ page, item }) => {});
});

Announcements

• ⚠️ Ubuntu 18 is not supported anymore.

Browser Versions

• Chromium 123.0.6312.4
• Mozilla Firefox 123.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 122
• Microsoft Edge 123

v1.41.2

Highlights

#29123 - [REGRESSION] route.continue: Protocol error (Fetch.continueRequest): Invalid InterceptionId.

Browser Versions

• Chromium 121.0.6167.57
• Mozilla Firefox 121.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 120
• Microsoft Edge 120

v1.41.1

Highlights

#29067 - [REGRESSION] Codegen/Recorder: not all clicks are being actioned nor recorded
#29028 - [REGRESSION] React component tests throw type error when passing null/undefined to component
#29027 - [REGRESSION] React component tests not passing Date prop values
#29023 - [REGRESSION] React component tests not rendering children prop
#29019 - [REGRESSION] trace.playwright.dev does not currently support the loading from URL

Browser Versions

• Chromium 121.0.6167.57
• Mozilla Firefox 121.0
• WebKit 17.4

This version was also tested against the following stable channels:

• Google Chrome 120
• Microsoft Edge 120