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

Also download new browser binaries and their dependencies:

npx playwright install --with-deps

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 });
});

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 }) => {
    // ...
  });
});

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

npx playwright test --grep @login

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
});

Release Video

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

Useful links

• Playwright documentation
• Release notes for Playwright 1.42