Playwright Tutorial | Tags in Playwright | Tagging Tests

• 00:00 Introduction to Tags in Playwright
• 01:00 Practical Example: Adding Tags to Tests
• 06:00 Executing Tests with Tags
• 12:00 Filtering Tests in Report by Tags
• 18:00 Using Config File for Tag Execution
• 22:00 Summary of Using Tags in Playwright

Welcome to another video in the Playwright with TypeScript series! In this video, we delve into the concept of tags in Playwright, exploring their application, functionality, and best practices. Here are the key points covered:

1. Introduction to Tags: Tags are labels or identifiers attached to specific tests. They serve two primary use cases:

   • Filtering by tag in test reports.
   • Running only the tests that have a certain tag.

2. Adding Tags to Tests:

   • Old Method: You can add tags directly in the test title using the @ symbol before the tag name. For instance, @UI or @API. This method incorporates tags visually in the test titles and allows you to categorize tests based on their functionality, like UI tests or API tests.
   • New Method: Tags can also be added through a details object when declaring a test. This method keeps the test titles clean, as tags are not displayed within the titles but are equally effective for filtering and categorizing.

3. Practical Example:

   • The video demonstrates creating test scripts in VS Code, showcasing how to import Playwright's test module and add multiple tests.
   • Tags are added to tests using both the old and new methods, with examples provided for each.

4. Executing Tests and Viewing Reports:

   • The video includes a step-by-step guide on how to execute all the tests using the npx playwright test command.
   • Instructions are provided for viewing the test report using the npx playwright show-report command, which displays tags and allows filtering tests based on them.

5. Advanced Tagging Options:

   • Multiple Tags: Tests can be tagged with multiple labels using arrays in the new method.
   • Tagging Test Suites: Entire test suites within a describe block can be tagged, extending the tag’s applicability to all nested tests.

6. Command-Line Tag Filtering:

   • The command npx playwright test --grep=@TAG is used to run tests that have certain tags.
   • Inverse filtering is also possible with the command npx playwright test --grep-invert=@TAG, which skips tests with the specified tag.

7. Configuration File:

   • Tags can be specified in the Playwright configuration file (playwright.config.ts) to define default behavior for including or excluding tagged tests during execution.

The video concludes with a quick recap of the discussed topics, emphasizing the benefits of using tags for organizing and executing tests more effectively. Viewers are encouraged to explore the full Playwright tutorial playlist and stay tuned for upcoming videos.