Skip to main content
Example Project

See a working example: bistro-e2e — Playwright E2E tests with QA Sphere integration.

Playwright Integration

This guide covers Playwright-specific setup. For install/auth/upload-command reference, see Overview, Auth, and Result Upload.

The CLI supports two upload paths for Playwright:

  1. playwright-json-upload (recommended) — uses Playwright's native JSON report with support for test annotations.
  2. junit-upload — uses Playwright's JUnit reporter output.

Prerequisites​

  • QAS CLI installed and authenticated — see the Overview.
  • Playwright test project.

Configure a reporter​

Pick one of the reporters below depending on which upload path you'll use. JSON is recommended because it supports test annotations.

// playwright.config.js
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  timeout: 30000,
  reporter: [
    ['list'],
    ['json', { outputFile: 'test-results/results.json' }],
  ],
  use: {
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
});

Option B: JUnit XML reporter​

// playwright.config.js
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  testDir: './tests',
  timeout: 30000,
  reporter: [
    ['list'],
    ['junit', { outputFile: 'junit-results/results.xml' }],
  ],
  use: {
    headless: true,
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
    trace: 'retain-on-failure',
  },
});

Attachments​

When you pass --attachments, the CLI picks up the three artifact types Playwright produces automatically:

ArtifactEnabled by
Screenshotsuse.screenshot: 'only-on-failure' (or 'on') in playwright.config.js
Videosuse.video: 'retain-on-failure' (or 'on')
Tracesuse.trace: 'retain-on-failure' (or 'on-first-retry')

Each attachment is matched to its test case and uploaded alongside the result. Paths inside the JSON/JUnit report must be resolvable from the working directory the upload command runs in.

Playwright JSON supports two matching methods, checked in order: test annotations (recommended) and hyphenated PROJECT-SEQUENCE markers in the test name. JUnit XML supports the hyphenated marker only (plus the underscore/CamelCase variants — see Result Upload — Test case matching).

Test annotations (Playwright JSON only)​

Add a Playwright test annotation with type: "test case" and the full QA Sphere test case URL:

// tests/login.spec.ts
import { test, expect } from '@playwright/test';

test(
  'Login with valid credentials',
  {
    annotation: {
      type: 'test case',
      description: 'https://qas.eu1.qasphere.com/project/PRJ/tcase/312',
    },
  },
  async ({ page }) => {
    await page.goto('https://example.com/login');
    // ...
  }
);

Hyphenated marker in the test name​

Works with both Playwright JSON and JUnit XML:

test('PRJ-312: Login with valid credentials', async ({ page }) => {
  // ...
});

test('Login with invalid credentials: PRJ-313', async ({ page }) => {
  // ...
});
note

For playwright-json-upload, only annotations and hyphenated markers are supported. The underscore-separated and CamelCase variants are JUnit-only.

Upload results​

# Recommended: JSON path
npx playwright test
npx qas-cli playwright-json-upload --attachments test-results/results.json

# JUnit XML path
npx qas-cli junit-upload --attachments junit-results/results.xml

A convenient npm script:

{
  "scripts": {
    "test": "playwright test",
    "test:upload": "playwright test && npx qas-cli playwright-json-upload --attachments test-results/results.json"
  }
}

For the full option reference, run-name templates, and modes (new run vs existing), see Result Upload.