Playwright JS

npm install @tracera/playwright

Requires Node.js ≥ 22.19 and Playwright ≥ 1.40 (see Autotest adapters). @tracera/playwright on npm.

In playwright.config.ts:

import '@tracera/playwright/register';
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [['@tracera/playwright/reporter']],
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure', // or "on-first-retry"
  },
});

import "@tracera/playwright/register" patches test.step and hooks in every worker so tracera.comment and tracera.error nest on the current step.

Enable screenshot, video, and trace once in config — Playwright artifacts are added to the Tracera result automatically.

Environment variables, run mode, and retries: Autotest adapters.

Retry Env key: PLAYWRIGHT_RETRY.

Bind `testCaseId` and `autotestName`

Import test and expect from @playwright/test, and tracera and annotations from @tracera/playwright. Annotation names are literal (no {param}).

At declaration (preferred):

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

test('login', { annotation: annotations(42, 'e2e/login') }, async ({ page }) => {
  await page.goto('/login');
  await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
});

Inside the test (optional if annotations already bind the case):

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

test('login', async ({ page }) => {
  tracera.testCase(42, 'e2e/login');
  await page.goto('/login');
  await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
});

Skip

Use stock Playwright skip (test.skip, testInfo.skip(…)). The skip reason is added to the result as comment.

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

test('login', { annotation: annotations(42, 'e2e/login') }, async ({}, testInfo) => {
  testInfo.skip(!process.env.READY, 'env not ready');
});

Steps

Use Playwright test.step — it is recorded under Test. You can use tracera.step the same way: the call tracera.step(title, fn), @tracera.step("…") on a class method, or tracera.step("…")(fn). In a decorator title, {name} / {0} are filled from the method arguments; you can also pass a function that returns the title. In the call form, {name} / {0} are not filled in — pass a finished title string (or build it yourself). Async methods and Promises are awaited. Steps inside test.beforeEach go to the result’s Setup; steps inside test.afterEach go to the result’s Teardown. Suite-level hooks such as test.beforeAll / test.afterAll are not reported.

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

test.beforeEach(async ({ page }) => {
  await test.step('open shop', async () => {
    await page.goto('/shop');
  });
});

test('checkout', { annotation: annotations(10, 'e2e/checkout') }, async ({ page }) => {
  await test.step('add to cart', async () => {
    await page.getByRole('button', { name: 'Add' }).click();
  });
});

test.afterEach(async ({ page }) => {
  await test.step('cleanup', async () => {
    await page.goto('/cart/clear');
  });
});

Decorator on a method:

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

class Cart {
  @tracera.step('add {item}')
  async addToCart(item: string) {
    // …
  }
}

Comments, errors, and attachments

Comments, errors, and attachments: Autotest adapters.

import { test } from '@playwright/test';
import { tracera, annotations } from '@tracera/playwright';

test('login', { annotation: annotations(42, 'e2e/login') }, async ({ page }, testInfo) => {
  tracera.comment('result-level note');
  tracera.error('result-level error text');

  await test.step('open login', async () => {
    await page.goto('/login');
    tracera.comment('landed on login');
  });

  await testInfo.attach('suite-log.txt', {
    body: 'finished login flow',
    contentType: 'text/plain',
  });
});

Use testInfo.attach to add files to the result. Playwright attaches its screenshots, video, and Playwright trace on its own — in Tracera, images open in a lightbox, video plays inline, and the trace opens in the Trace Viewer.

Parameterized tests

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

const rows = [
  { id: 42, name: 'e2e/login-ok', path: '/login' },
  { id: 43, name: 'e2e/login-sso', path: '/login/sso' },
];

for (const row of rows) {
  test(row.name, { annotation: annotations(row.id, row.name) }, async ({ page }) => {
    await test.step('open', async () => {
      await page.goto(row.path);
    });
    await expect(page.getByRole('button', { name: 'Sign in' })).toBeVisible();
  });
}

Or call tracera.testCase(row.id, row.name) inside the test instead of annotations.

Custom fixtures

Extend stock Playwright test as usual:

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

export const test = base.extend<{ asUser: void }>({
  asUser: [
    async ({ page }, use) => {
      await page.goto('/login');
      await page.getByLabel('Email').fill('user@example.com');
      await page.getByRole('button', { name: 'Sign in' }).click();
      await use();
    },
    { auto: true },
  ],
});

test('dashboard', async ({ page }) => {
  tracera.testCase(99, 'e2e/dashboard');
  await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});