Skip to Content
DocumentationQuickstart

Quickstart

Get up and running with annotation-driven testing in 5 minutes.

Install packages

npm install @lytics/playwright-annotations @lytics/playwright-reporter @lytics/playwright-adapters

Create a reporter file

Playwright reporters must be specified as file paths. Create a reporter file that extends CoreReporter:

// reporter.ts
import { CoreReporter } from '@lytics/playwright-reporter';
import { FilesystemAdapter } from '@lytics/playwright-adapters/filesystem';
 
class CustomReporter extends CoreReporter {
  constructor() {
    super({
      adapters: [
        new FilesystemAdapter({ outputDir: './test-results' })
      ]
    });
  }
}
 
export default CustomReporter;

Configure Playwright

Reference the reporter file in your config:

// playwright.config.ts
import { defineConfig } from '@playwright/test';
 
export default defineConfig({
  reporter: [
    ['list'], // Keep the built-in list reporter for console output
    ['./reporter.ts'],
  ],
  // ... rest of your config
});

Add annotations to your tests

// tests/account-security.spec.ts
import { test, expect } from '@playwright/test';
import { pushSuiteAnnotation, pushTestAnnotations } from '@lytics/playwright-annotations';
 
test.describe('Account Security @smoke', () => {
  // Set the suite annotation in beforeEach
  test.beforeEach(async ({}, testInfo) => {
    pushSuiteAnnotation(testInfo, 'ACCOUNT_SECURITY');
  });
 
  test('user can view access tokens', async ({ page }, testInfo) => {
    // Set test-specific annotations
    pushTestAnnotations(testInfo, {
      journeyId: 'ACCOUNT_SECURITY_VIEW-TOKENS',
      testCaseId: 'ACCOUNT_SECURITY_VIEW-TOKENS_VALID',
    });
 
    // Your test implementation
    await page.goto('/settings/tokens');
    await expect(page.getByRole('heading', { name: 'Access Tokens' })).toBeVisible();
  });
 
  test('shows empty state when no tokens exist', async ({ page }, testInfo) => {
    pushTestAnnotations(testInfo, {
      journeyId: 'ACCOUNT_SECURITY_VIEW-TOKENS',
      testCaseId: 'ACCOUNT_SECURITY_VIEW-TOKENS_EMPTY',
    });
 
    await page.goto('/settings/tokens');
    await expect(page.getByText('No tokens found')).toBeVisible();
  });
});

Run your tests

npx playwright test

Check the results

After running tests, you’ll find JSON files in ./test-results/:

test-results/
├── test-results/
│   ├── ACCOUNT_SECURITY_VIEW-TOKENS_VALID-2024-01-01T00-00-00.000Z.json
│   └── ACCOUNT_SECURITY_VIEW-TOKENS_EMPTY-2024-01-01T00-00-01.000Z.json
└── test-runs/
    ├── test-run-local-2024-01-01T00-00-00.000Z.json
    └── latest.json

What’s Next?

Tests without annotations will be skipped with a warning. Make sure all tests have journeyId and testCaseId annotations.

Add more adapters

Send results to multiple destinations by updating your reporter file:

// reporter.ts
import { CoreReporter } from '@lytics/playwright-reporter';
import { FilesystemAdapter } from '@lytics/playwright-adapters/filesystem';
import { SlackAdapter } from '@lytics/playwright-adapters/slack';
 
class CustomReporter extends CoreReporter {
  constructor() {
    super({
      adapters: [
        new FilesystemAdapter({ outputDir: './test-results' }),
        new SlackAdapter({
          webhookUrl: process.env.SLACK_WEBHOOK_URL!,
          environment: 'Production',
        })
      ]
    });
  }
}
 
export default CustomReporter;

Add environment metadata

Enrich test runs with CI/CD information:

// reporter.ts
class CustomReporter extends CoreReporter {
  constructor() {
    super({
      adapters: [/* ... */],
      environmentEnricher: () => ({
        branch: process.env.GITHUB_REF,
        commit: process.env.GITHUB_SHA,
        author: process.env.GITHUB_ACTOR,
        buildNumber: process.env.GITHUB_RUN_NUMBER,
      })
    });
  }
}

Learn More

Last updated on
Getting StartedCore Concepts