Tags and Annotations in Playwright

Playwright supports tags and annotations which are quite useful for test runs and reports. Playwright has few built in annotations and also you can use your own tags and annotations.You can apply these tags and annotations on a single test or group of tests. Based on tags and annotations are added user can run tests based on Tags added and can see annotations in test reports.

I have created a below YouTube playwright tutorial video in the "software testing tips and tricks" channel where I have explained -

1. What are tags in playwright?
2. different types of tags in playwright?
3. How to use tags in code with typescript with playwright?
4. How to run tests using grep command? how one can configure it with CICD pipeline using Jenkins?
5. What are annotations in Playwright?
6. Different types of annotations.
7. How to use playwright annotations in code and get those in the reports?

Tags in Playwright

When your automation framework contains so many tests then running it in different suits is very important. We can achieve this very easily by using playwright tags. In Playwright tests one can use "@" in test description and that keyword can be used as a tag.

With Older version you can use like this

test('test full report @slow', async ({ page }) => {
  // ...
});

And with latest playwright version tags can be more separated like this

test('test full report', {
tag: '@slow'
}, async ({ page }) => {
  // ...
});

You can use this tag in group level as well. To run tests with the specific tag you can use Grep command

"npx playwright test --grep @fast"

To learn it in detail, Also how reports look like and how can you find report of specific test cases using tags you can checkout the above video.

Annotations in Playwright

Annotations in playwright provides more description to the generated test report. By default it has "Type" and "description" fields which get added to the final report.

For example -

test('test login page', {
  annotation: {
    type: 'bug',
    description: 'QB-10290',
  },
}, async ({ page }) => {
  // ...
});

you can also use multiple annotations in one test

test('test full report', {
    annotation: [
      { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/23180' },
      { type: 'performance', description: 'very slow test!' },
    ],
  }, async ({ page }) => {
    // ...
  });

In Reports it looks like this

Also Playwright come with some default annotations like

test.skip - skips that test
test. only - runs only that test
test.fixme - skips that test but adds fixme in report
test.fail - Marks test as failing test and it should be fail. if it doesn't fail playwright will give the warning
test.slow - marks test as slow, and gives three times more waiting time

All Playwright Tutorial Posts -