playviz-reporter v1.0.18

PlayViz Reporter

PlayViz is an advanced HTML reporter for Playwright TypeScript/Javascript tests, offering a beautiful and interactive UI with detailed test results, screenshots, and comprehensive analytics.

Features

PlayViz Reporter provides a rich set of features to enhance your test reporting experience:

1. Elegant and Responsive UI

• Modern, clean interface for easy navigation
• Responsive design that works on desktop and mobile devices
• Dark/light mode toggle for comfortable viewing in any environment

2. Comprehensive Test Results

• Detailed view of all test suites and individual test cases
• Source code snippets for failed tests, highlighting the exact line of failure
• Step-by-step test execution details, including nested steps

3. Visual Test Artifacts

• Seamless integration of screenshots taken during test execution
• Video playback of test runs for visual verification
• Trace viewer integration for in-depth performance analysis
• Logs veiwer integration for in-depth log analysis

4. Powerful Filtering and Search

• Quick filtering options for passed, failed, flaky, Timed Out and skipped tests
• Full-text search functionality to find specific tests quickly
• Expand/collapse all option for easy navigation through test suites

5. Insightful Analytics

• Summary cards providing at-a-glance statistics of test runs
• Interactive charts showing test result distribution
• Performance analytics including test duration by project

6. Detailed Environment Information

• Comprehensive details about the test environment
• Information on operating system, Node.js version, and Playwright version
• Browsers used in the test run

7. Advanced Features

• Flaky test detection and reporting
• Retry information for failed tests
• Detailed logs and console output for each test

Report Sections

1. Summary View

The summary view provides an overview of your entire test suite, including:

• Total number of tests, passed tests, failed tests, flaky tests, and skipped tests
• Overall test duration
• Interactive pie chart showing the distribution of test results
• Bar chart displaying test duration by project

2. Test Results View

This section lists all your test suites and individual tests, featuring:

• Expandable/collapsible test suites
• Color-coded test statuses for quick identification
• Duration information for each test
• Quick filters to show only passed, failed, flaky,timedout or skipped tests

3. Test Details View

Clicking on a test opens a detailed view that includes:

• Test title and status
• Source code snippet (for failed tests)
• Step-by-step test execution details
• Screenshots captured during the test
• Video recording of the test run (if available)
• Console logs and error messages
• Retry attempts (if any)

4. Environment Information View

This section provides comprehensive details about the test environment:

• Operating system information
• Node.js version
• Playwright version
• Browser versions used in the test run
• Start time, end time, and total duration of the test suite

Sample Report

Here are some screenshots of the PlayViz Reporter:

Summary View

Test Results Project View

Test Results Expanded View

Test Steps View

Environment Information View

Dark Mode View Sample

Configuration Options

PlayViz Reporter can be customized with the following options:

Usage

// playwright.config.ts ot playwrightconfig,js
// Without Config Options
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],['html'],
    ['playviz-reporter']
  ],
  // ... rest of your config
});

// With config options
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['playviz-reporter', { 
      outputFolder: 'my-report',
      customTitle: 'CKB Playwright Project',
      showScreenshots: false,
      showLogs: false,
      showTraces: false,
    }]
  ],
  // ... rest of your config
});