playwright-core

<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 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:

  // 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 to create pre-configured expect instance with its own defaults such as timeout and soft.

  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 to configure output handling:

  // 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() to create a locator that matches both locators.

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

• New events browserContext.on('console') and browserContext.on('dialog') to subscribe to any dialogs and console messages from any page from the given browser context. Use the new methods consoleMessage.page() and 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:

  // automation.ts
  import { chromium, firefox, webkit } from '@playwright/test';
  /* ... */
  

• Node.js 14 is no longer supported since it reached its end-of-life 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

<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>

Locators Update

• Use locator.or() to create a locator that matches either of the two locators. Consider a scenario where you'd like to click on a "New email" button, but sometimes a security settings dialog shows up instead. In this case, you can wait for either a "New email" button, or a dialog and act accordingly:

  const newEmail = page.getByRole('button', { name: 'New' });
  const dialog = page.getByText('Confirm security settings');
  await expect(newEmail.or(dialog)).toBeVisible();
  if (await dialog.isVisible())
    await page.getByRole('button', { name: 'Dismiss' }).click();
  await newEmail.click();
  

• Use new options hasNot and hasNotText in locator.filter() to find elements that do not match certain conditions.

  const rowLocator = page.locator('tr');
  await rowLocator
      .filter({ hasNotText: 'text in column 1' })
      .filter({ hasNot: page.getByRole('button', { name: 'column 2 button' }) })
      .screenshot();
  

• Use new web-first assertion locatorAssertions.toBeAttached() to ensure that the element is present in the page's DOM. Do not confuse with the locatorAssertions.toBeVisible() that ensures that element is both attached & visible.

New APIs

• locator.or()
• New option hasNot in locator.filter()
• New option hasNotText in locator.filter()
• locatorAssertions.toBeAttached()
• New option timeout in route.fetch()
• reporter.onExit()

⚠️ Breaking change

• The mcr.microsoft.com/playwright:v1.33.0 now serves a Playwright image based on Ubuntu Jammy. To use the focal-based image, please use mcr.microsoft.com/playwright:v1.33.0-focal instead.

Browser Versions

• Chromium 113.0.5672.53
• Mozilla Firefox 112.0
• WebKit 16.4

This version was also tested against the following stable channels:

• Google Chrome 112
• Microsoft Edge 112