How To Add Tags Dynamically In Playwright Tests

In this brief story, I want to share with you my approach to dynamically tagging Playwright tests.

By default, Playwright recommends that you use the — grep and — grep-invert command line flags for that

test('TC01 Open LinkedIn URL @smoke', async ({page}) => {
  await page.goto("https://www.linkedin.com/in/truuts");
});

test('TC02 Open Medium URL', async ({page}) => {
  await page.goto("https://truuts.medium.com");
});

test('TC03 Open Facebook URL @smoke', async ({page}) => {
  await page.goto("https://www.facebook.com/eugene.truuts");
});

In this example, I have several tests, and two of them are tagged as “@smoke”. To run only smoke tests you can use the -grep test run flag:

npx playwright test --grep @smoke

This command will run the TC01 and TC03 tests only. You can check it by passing the — list parameter to get the test run listing:

Listing tests:
  [chromium] › example.spec.ts:6:5 › TC01 Open LinkedIn URL @smoke
  [chromium] › example.spec.ts:14:5 › TC03 Open Facebook URL @smoke

That looks pretty simple in the beginning, but then you have hundreds or even thousands of tests in your project, and managing such tags directly in test titles becomes really tricky. Different tags such as test priority, grouping, and others can be changed in your test case management system, and it is almost impossible to manage all these tags in test code. Instead of keeping your tags in the test code, I suggest dynamically setting tags.

First, let’s introduce a test case list in a separate testCases.ts file. I’m using TypeScript, but this approach can be used with any other language.

export const testCase = {
    groups: {
        smoke: [
            'TC01',
            'TC03',
        ],
        performance: [
            'TC7890',
            'TC7330',
            'TC7555',
        ],
        
    },
};

You can structure it in your own way and even generate it using your test case management system API like TestRail or something. It could be a JSON file or the constant I used, it is not critical for my approach.

In the next step, I will introduce a method to read this file, check if the running test is in the smoke or performance list by passing the test id and title as arguments, and tag it automatically during the Playwright test run by returning the tagged test title.

export function getTestTitle(testItId: string, title: string) {
    let priority: string;
    switch (true) {
        case testCase.groups.smoke.includes(testItId):
            priority = '@SMOKE';
            break;
        case testCase.groups.performance.includes(testItId):
            priority = '@PERFORMANCE';
            break;
        default:
            break;
    }
    return `${testItId}: ${title}: ${priority}`;
}

Now you can get rid of tags in the test title code and pass our new method directly in test titles:

test(getTestTitle('TC01', 'Open LinkedIn URL'), async ({page}) => {
  await page.goto("https://www.linkedin.com/in/truuts");
});

test(getTestTitle('TC02', 'Open Medium URL'), async ({page}) => {
  await page.goto("https://truuts.medium.com");
});

test(getTestTitle('TC01', 'Open Facebook URL'), async ({page}) => {
  await page.goto("https://www.facebook.com/eugene.truuts");
});

As you can see, there are no tags in the test titles, but if you run smoke tests with the — grep flag again, you will get:

Listing tests:
  [chromium] › example.spec.ts:6:5 › TC01: Open LinkedIn URL: @SMOKE
  [chromium] › example.spec.ts:14:5 › TC01: Open Facebook URL: @SMOKE

Using this approach to tagging tests dynamically, you have all the test lists in one place. You don’t need to search and modify the tests whenever things change. Only one file should be actual in the entire test project. Using the API, you can even get the lists directly from the test case management system.

Save your time for more important things such as stabilization and speeding of your tests. Happy testing!