What's new in Playwright v1.42 & v1.43

Version 1.42

Let's explore the major changes that were released in this version.

addLocatorHandler

Have you faced pop-ups or dialog boxes while running your tests? They occur randomly and cause flakiness in our tests. Due to their presence, they block the actions that we have automated. e.g. A promotion modal blocks a button we need to click, so the test fails at that point.

Playwright has added a new method page.addLocatorHandler to resolve this issue. Let's see how we can implement this for our example above

  await page.addLocatorHandler(
    page.getByText("Check out our new promotion"),

    () => page.getByTestId(close-promotion-modal).click()
  );

Here, the first argument is the locator of the content that indicates a promotion modal is visible. The second argument is the method that should be run to close the promotion modal.

Let's explore some other changes that were introduced in this version

1. We can now set the timeout for expect.toPass() globally or in our project config. Let's look at an example of setting this timeout globally.

import { defineConfig } from "@playwright/test";

export default defineConfig({
  expect: { toPass: { timeout: 60000 } },
});

Here, the default timeout for toPass() has been set to 60 seconds.

2. Tags for a test can now be added using the tag property in the test details object in Playwright. They can also be added to describe blocks. Let's see an example of the new syntax.

test("basic test", { tag: ["@smoke", "@fast"] }, async ({ page }) => {
  await page.goto("https://playwright.dev/");

  // ...
});

To run the tests with your desired tag, use --grep along with the tag name.

npx playwright test --grep @smoke

This command runs the tests that include the @smoke tag.

3. We can now run similar tests by using the --project command line flag with the '*' wildcard in Playwright Test. For example, let's say you have a Playwright configuration file that defines multiple projects for different environments or devices, like so:

// playwright.config.js

module.exports = {
  projects: [
    { name: "Desktop Chrome", use: { browserName: "chromium" } },
    {
      name: "Mobile Chrome",
      use: { browserName: "chromium", viewport: { width: 375, height: 667 } },
    },
    { name: "Desktop Firefox", use: { browserName: "firefox" } },
    {
      name: "Mobile Firefox",
      use: { browserName: "firefox", viewport: { width: 375, height: 667 } },
    },
  ],
};

If we want to run tests only for mobile projects, we can use the command given below

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

4. Annotations now have a type and description property for more context which is visible in the test report. Let's take a look at the new syntax

test(
  "test checkout process",
  {
    annotation: [
      {
        type: "bug",
        description: "Known issue: Credit card validation fails intermittently",
      },
      {
        type: "dependency",
        description: "Relies on third-party payment gateway",
      },
    ],
  },
  async ({ page }) => {
    // ...
  }
);

5. There are two new options for page.pdf method.

- outline: Defaults to false, this property embeds a document outline into the PDF. The document outline is a structured table of contents that the reader can use to navigate the document, also called a bookmark.

- tagged: Defaults to false, this property generates a tagged (accessible) PDF. Tags in a PDF are used to identify the document's logical structure and content, such as headings, sections, tables, links, etc.

Here is an example that generates a tagged PDF with a table of contents (outline).

await page.pdf({
  path: "example.pdf",
  format: "A4",
  tagged: true,
  outline: true,
});

Version 1.43

Let's explore the changes that were made in this release.

1. We can now clear the specific cookies using clearCookies(). The filter options are domain, name, and path. Let's take a look at an example for clearing out the cookies with a specific path and domain.

await context.clearCookies({ path: "/api/v1", domain: "example.com" });

Here, the cookies that match the path /api/v1 and the domain example.com will be cleared from the browser context.

2. We can now record traces only for the first runs of each test. By configuring your Playwright tests as shown below, you ensure that only the first run of each test is traced, and traces are only kept for those that fail.

import { defineConfig } from "@playwright/test";

export default defineConfig({
  use: { trace: "retain-on-first-failure" },
});

3. If we want to access the tags of a test, we can use tags() method of the TestInfo class. Here is an example that implements this method.

import { test } from "@playwright/test";

test("custom tag demonstration", async ({ page }) => {
  console.log(test.info().tags); // Log the tags associated with this test
});

4. Convert a Locator object to a FrameLocator using the new method contentFrame(). Let's look at a scenario where we want to access an input within a locator's iframe.

const locator = page.locator("iframe#loginFrame");

// Get the FrameLocator object for interacting with the iframe's content

const frameLocator = locator.contentFrame();

// Interact with an input element inside the iframe, such as filling it with text

await frameLocator.locator('input[name="username"]').fill("[email protected]");

5. frameLocator.owner() performs the reverse operation of the above point. Here is an example demonstrating its implementation.

const frameLocator = page.frameLocator('iframe[name="userProfile"]');

const locator = frameLocator.owner();

await expect(locator).toBeVisible();

6. We can now filter by tags by typing the tag name or clicking on the desired tag in UI mode.

Stay tuned to discover more updates in Playwright!