How do you tag and filter tests in Playwright?

// Add tags as @ prefix in the test name
test('user can login @smoke @critical', async ({ page }) => { /* ... */ });
test('checkout flow @regression', async ({ page }) => { /* ... */ });
test('email notification @slow @e2e', async ({ page }) => { /* ... */ });

// Tag at describe level
test.describe('@smoke User Authentication', () => {
  test('login with valid credentials', async ({ page }) => { /* ... */ });
  test('login with SSO', async ({ page }) => { /* ... */ });
});

# Run only smoke tests
npx playwright test --grep @smoke

# Run smoke AND critical tests
npx playwright test --grep "@smoke|@critical"

# Run regression but NOT slow tests
npx playwright test --grep @regression --grep-invert @slow

# Run tests matching a string
npx playwright test --grep "login"

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

test('login test', {
  tag: ['@smoke', '@critical'],
}, async ({ page }) => {
  await page.goto('/login');
  // ...
});

test.describe('Checkout', {
  tag: ['@e2e', '@regression'],
}, () => {
  test('complete purchase', async ({ page }) => { /* ... */ });
});

# Run by official tags
npx playwright test --grep @smoke

test('payment test', async ({ page }) => {
  test.info().annotations.push({ type: 'category', description: 'payment' });
  // ...
});

# Run smoke tests on Chrome only
npx playwright test --project=chromium --grep @smoke

# Run regression on all browsers
npx playwright test --grep @regression

// Skip if tag matches
test.skip(({ browserName }) => browserName === 'webkit', 'Safari not supported');

// Skip specific test
test('safari-only feature @skip-chrome', async ({ page, browserName }) => {
  test.skip(browserName !== 'webkit', 'Only runs on Safari');
});

// login.spec.ts
test('homepage loads @smoke', async ({ page }) => { /* ... */ });
test('login works @smoke @auth', async ({ page }) => { /* ... */ });
test('token refresh @regression @auth', async ({ page }) => { /* ... */ });
test('session timeout @regression @e2e @slow', async ({ page }) => { /* ... */ });

# CI — fast smoke suite
npx playwright test --grep @smoke --workers=8

# Nightly — full regression
npx playwright test --grep @regression