Understanding Tags in playwright

In this example, we will explore how to use tags in Playwright with a practical example. In Playwright, tags can be used primarily in the context of test filtering and categorization, especially when you're using the Playwright Test Runner (which is built on top of the Playwright framework). These tags are helpful for organizing, grouping, or running specific subsets of tests.

What Are Tags in Playwright?

Tags in Playwright are custom annotations that you can assign to test cases using comments or metadata. While Playwright itself doesn’t have built-in "tags" like some other test frameworks (e.g., @Tag in JUnit), you can emulate tags using annotations or naming conventions, and then filter tests using those annotations with the grep feature.

Use the --grep flag to run tests with specific tags.

✅ Run tests tagged with @smoke:

npx playwright test --grep @smoke

✅ Use --grep-invert to exclude specific tags:

npx playwright test --grep-invert @slow

How to Use Tags in Playwright

You can simulate tagging by including keywords in the test titles. Let’s look at a code snippet that demonstrates how to implement tags in Playwright:

You can use @ to declare tag.

// @ts-check
import { test, expect } from '@playwright/test';

test("Example one @regression", async({ page }) => {
    console.log("Running test-1");
});

test("Example two @sanity", async({ page }) => {
    console.log("Running test-2");
});

test("Example three @sanity@smoke", async({ page }) => {
    console.log("Running test-3");
});

test("Example four ", { tag: "@regression@sanity", }, async({ page }) => {
    console.log("Running test-4");
});

Running Tests Based on Tags:

When executing your tests, you can use command-line options to run specific tags. For instance:

1. To run all sanity tests:

npx playwright test tag.spec.js --project=chromium --headed --grep "@sanity"

Output :

Running 3 tests using 2 workers
[chromium] › tests\tag.spec.js:12:5 › Example three @sanity@smoke
Running test-3
[chromium] › tests\tag.spec.js:8:5 › Example two @sanity
Running test-2
[chromium] › tests\tag.spec.js:16:5 › Example four  @regression@sanity
Running test-4
  3 passed (3.7s)

2. To run all regression tests:

npx playwright test tag.spec.js --project=chromium --headed --grep "@regression"

Output :

Running 2 tests using 2 workers
[chromium] › tests\tag.spec.js:4:5 › Example one @regression
Running test-1
[chromium] › tests\tag.spec.js:16:5 › Example four  @regression@sanity
Running test-4
  2 passed (2.6s)

3. To exclude any specific tag:

Here in this example, we are excluding all @sanity test

npx playwright test tag.spec.js --project=chromium --headed --grep-invert "@sanity"

Output :

Running 1 test using 1 worker
[chromium] › tests\tag.spec.js:4:5 › Example one @regression
Running test-1
  1 passed (4.0s)

Tag Best Practices:

Use descriptive and consistent tag names (e.g., @smoke, @regression, @api).
Avoid over-tagging to keep test organization manageable.
Combine tags with other Playwright features like projects or test grouping for better control.

Tags in Playwright provide an efficient way to manage and execute your tests. By categorizing your tests with meaningful tags, you can streamline your testing process and enhance productivity. The provided code snippet illustrates how easy it is to implement tagging in your Playwright tests.