DEV Community

Cover image for How To Categorize Your Tests in Playwright using Tags to Make Your Testing Suite Less Terrible
Arvind Mehairjan
Arvind Mehairjan

Posted on

How To Categorize Your Tests in Playwright using Tags to Make Your Testing Suite Less Terrible

#playwright #testing #javascript

A powerful way to organize and run your Playwright tests is by using tags. Tags allow you to categorize tests and run only the ones you need, making your test suite more manageable and efficient, especially in large, complex projects that wants to make your hair pull out.

Cool, great. So What The Hell Are Playwright Tags?

Playwright tags let you group related tests and run them selectively. You can tag tests directly in your test descriptions using the @tagname syntax.

How to Tag Tests to have a less messy testing Suite

Single Tag Example 

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

test('Navigate to Get Started @navigation', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const getStartedLink = page.locator('a\:has-text("Get Started")');
  await getStartedLink.click();
  const installationHeading = page.locator('h1\:has-text("Installation")');
  await expect(installationHeading).toBeVisible();
  const pageContent = page.locator('body');
  await expect(pageContent).toContainText('Installation');
});
Enter fullscreen mode Exit fullscreen mode

Multiple Tags Example

You can add multiple tags to a single test:

test('Navigate to Get Started @navigation @startpage', async ({ page }) => {
  await page.goto('https://playwright.dev');
  const getStartedLink = page.locator('a\:has-text("Get Started")');
  await getStartedLink.click();
  const installationHeading = page.locator('h1\:has-text("Installation")');
  await expect(installationHeading).toBeVisible();
  const pageContent = page.locator('body');
  await expect(pageContent).toContainText('Installation');
});
Enter fullscreen mode Exit fullscreen mode

Running Tests by Tag

To run only tests with a specific tag, use the --grep flag:

npx playwright test --grep "@navigation"
Enter fullscreen mode Exit fullscreen mode

To run tests with either of two tags:

npx playwright test --grep "@navigation|@startpage"
Enter fullscreen mode Exit fullscreen mode

Excluding Tests by Tag if you hate other tests

To exclude tests with a specific tag, use the --grep-invert flag:

npx playwright test --grep-invert "@startpage"
Enter fullscreen mode Exit fullscreen mode

Why Should I Even Use Tags?

Good question! Here are some reasons below:

  • Selective Test Execution: Run only the tests you need, saving time and lot, LOTS of resources..
  • CI/CD: Easily integrate with your CI/CD pipeline to run specific test groups, if needed.
  • Better Organization: Keep your test suite clean and well-structured you don't want to pull your hair out..

Conclusion

Using tags in Playwright helps you manage and run your tests more efficiently. Whether you're working on a small project or a large test suite, tags make it easy to focus on what matters. Think about using them to save you time and your sanity (I am only half joking.)

Happy testing!

Top comments (0)