DEV Community

Cover image for Tagging your Playwright Tests
40 1 1

Tagging your Playwright Tests

Tags are used to filter tests in the HTML report, UI Mode, or VSCode extension. It's also possible to filter them with the CLI by using --grep - so you can e.g. only run a subset of tests locally or on CI.

In Playwright's version 1.42, we introduced a new syntax for tags.

Update to the latest version of Playwright

To update to the latest version of Playwright run the following command:

npm install -D @playwright/test@latest
Enter fullscreen mode Exit fullscreen mode

Also download new browser binaries and their dependencies:

npx playwright install --with-deps
Enter fullscreen mode Exit fullscreen mode

New tag syntax

Why create a new syntax? With the previous syntax the tags are visible in the HTML report in the title as well as a label. This can be confusing and can have a lot of duplication especially when you have many tags.

To use the new syntax, create a tag object with an array of tags or a single tag:

test('user can login', { tag: ['@smoke', '@slow' ] }, async ({ page }) => {
  // write test });
});
Enter fullscreen mode Exit fullscreen mode

new tag syntax in html report

Tags can also be used in a describe block:

test.describe('group', { tag: '@report' }, () => {
  test('report header', async ({ page }) => {
    // ...
  });

  test('full report', { tag: ['@slow', '@vrt'] }, async ({ page }) => {
    // ...
  });
});
Enter fullscreen mode Exit fullscreen mode

new tag syntax in html report

To run tests with a specific tag use the --grep command line option followed by the tag name:

npx playwright test --grep @login
Enter fullscreen mode Exit fullscreen mode

Old tag syntax

Previously, tags were added to the test title. This method is still supported. However this adds duplication in the HTML report as Playwright extracts tags from the title and adds them as labels so they are easier to see. We therefore recommend using the new syntax as shown above.

test('user can login @fast @login', async ({ page }) => {  
  // write test
});
Enter fullscreen mode Exit fullscreen mode

old tag syntax in html report

Release Video

To see a demonstration of the new tag syntax, watch the release video:

Useful links

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (3)

Collapse
 
uncleaaroh profile image
UncleAaroh.eth

Wow, thanks for sharing this Debbie. I found out about this from the Happy Hour today. You guys are doing an amazing work. Keep it up !

PS. I really prefer this new format of tagging, the previous one was an oddball.

Collapse
 
henrieke_leis_79d135dd4 profile image
Henrieke Leisen

This is a great feature. It would be awesome if it could be used in the playwight.config aswell.

projects: [
 {
      name: "speed",
      dependencies: ["login"],
      grep: /@speed/,
      use: {
        baseURL: baseURL,
        storageState: STORAGE_STATE_ADMIN,
      },
    },
...
]
Enter fullscreen mode Exit fullscreen mode
Collapse
 
brianpalma profile image
Brian Palma

You must enclose the tag in quotation marks for it to work:

npx playwright test --grep "@login"

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay