DEV Community

Cover image for Tagging your Playwright Tests

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

Top comments (2)

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
 
brianpalma profile image
Brian Palma

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

npx playwright test --grep "@login"