Kbs Report

A comprehensive and visually appealing HTML report generator tailored for Playwright tests. Designed with powerful features and customizable options, Kbs Report simplifies the process of reviewing and managing test results, making test reporting more intuitive and accessible.

Key Features

1. Organization & Navigation

• Sidebar Navigation: Update your logo and enjoy a clean and structured layout for seamless navigation.
• Sections:
  • Dashboard: High-level overview of test analytics and trends.
  • Tests: Dive into individual test details including logs, screenshots, and errors.
  • Analytics: Track overall execution metrics, trends, and flaky/slow test insights.
• Hierarchical Grouping: Tests are organized by filename, suite, and project for better traceability.
• Test History View: Access up to 10 recent executions, categorized by suite and project.
• Configurable Integration: Easy setup with Playwright using TypeScript/JavaScript, along with customizable preferences.
• Advanced Filtering: Filter by project, tags, and status — with a reset option for full visibility.

2. Detailed Reporting

• Comprehensive Test Data: Includes status, duration, tags, logs, errors, screenshots, videos, and trace viewer.
• Native Trace Viewer: Directly open the trace viewer within the reporter.

3. Visualization & Insights

• Test Analytics Dashboard 🌟 (New!)

  • Summary of total test runs, passed/failed counts, pass rate, and average duration.
  • Trends Over Time: Line chart showing test results across the last 30 runs.
  • Top Flaky Tests: Identify unstable tests quickly.
  • Slowest Tests: View tests with highest average durations.

• Chart Visualizations:

  • Pie or doughnut charts for test summary and per-project breakdowns (Improved!)
  • Bar charts for project-specific comparisons.
  • Line Chart for Trends: Visualize execution status progression over time.

• Colorful UI: Redesigned with vibrant, high-contrast visuals for improved readability and engagement.

4. Customization & Personalization

• Theme Support: Switch between light and dark themes for a comfortable viewing experience.
• Custom Branding: Add your company or project logo for a branded look.
• Flexible Attachments: Choose between Base64 or file path formats for media files.
• Custom Paths: Define report filenames and output folders as needed.

5. User Experience & Usability

• Search & Reset: Quickly search by keyword or status, with easy reset controls.
• Skip Management: Skipped tests are hidden by default to declutter views.
• Self-Contained Reports: Easily share and review offline-friendly reports.
• Multi-Filters: Combine filters for targeted test analysis.
• Meta Information: Add custom user or environment metadata to reports.
• CLI: Open the reporter anytime using the builin CLI
• Open Markdown: View markdown as HTML - Copy and use it in your AI prompt

---

Installation & Setup

Step 1: Install Kbs Report

Run the following command to install the kbs-report package:

npm install kbs-report

Step 2: Configure in playwright.config.ts

Set up Kbs Report in your Playwright configuration file with the following example:

import { defineConfig } from "@playwright/test";
import { KbsReportConfig } from "kbs-report";
import * as os from "os";
 
const reportConfig: KbsReportConfig = {
  open: process.env.CI ? "never" : "always", // default to never
  folderPath: "report-db",
  filename: "index.html",
  logo: "logo.{png, jpg}",
  title: "Test Report",
  showProject: !true,
  projectName: "project Name",
  testType: "Functional",
  authorName: os.userInfo().username,
  base64Image: false,
  stdIO: false,
  preferredTheme: "light",
  meta: {
    project: "Playwright",
    version: "1.0",
    description: "Playwright test report",
    release: "5.0",
    platform: os.type(),
  },
};
 
export default defineConfig({
  testMatch: ["tests/CT.test.ts"],
  // testDir: './tests', // run all tests
  timeout: 120 * 1000,
  fullyParallel: true,
  //  workers: process.env.CI ? 3 : undefined,
  projects: [
    {
      name: "Chrome web",
      use: {
        browserName: "chromium",
        viewport: null,
        launchOptions: {
          channel: "msedge",
          args: ["--start-maximized"],
        },
      },
    },
  ],
  use: {
    screenshot: "on",
    // video: "on",
    trace: "on-first-retry",
    actionTimeout: 60 * 1000,
  },
  reporter: [
    ["kbs-report", reportConfig], 
    // ["dot"],
    // ["html", { open: "never" }],
  ],
  retries: 0,
});

Configure in playwright.config.js

import { defineConfig } from "@playwright/test";

const reportConfig = {
  open: process.env.CI ? "never" : "always",
  folderPath: "report-db",
  filename: "index.html",
  logo:"logo.{png, jpg}",
  title: "Test Report",
  showProject: !true,
  projectName: "Kbs-Report",
  testType: "e2e",
  authorName: "Balasiva Kamalaselvan",
  base64Image: false,
  stdIO: false,
  preferredTheme: "light",
  meta: {
    project: "Playwright",
    version: "1.0.0",
    description: "Playwright test report",
    testCycle: "1",
    release: "1.0.0",
    platform: "Windows",
  },
};

export default defineConfig({
  reporter: [["kbs-report", reportConfig]],
  // Other Playwright configurations
});

Using the Kbs Report CLI

Command: show-report

This command starts a local Express server and serves the generated Kbs report. You can open the report in your default browser.

Options

• -d, --dir <path>: Path to the folder containing the report. Defaults to kbs-report.
• -f, --file <filename>: Name of the report file. Defaults to kbs-report.html.
• -p, --port <port>: Port number for the local server. Defaults to 2004.

Example Usage

1. Default Usage

   npx kbs-report show-report

   This will:

   • Look for the report file kbs-report.html in the kbs-report folder.
   • Start the server on port 2004.

2. Custom folder and file Options

   npx kbs-report show-report --dir custom-folder --file my-report.html --port 3000

   This will:

   • Look for the file my-report.html in custom-folder.
   • Start the server on port 3000.

Errors and Troubleshooting

• If the specified file or folder does not exist, you will see an error like:

  Error: The file "my-report.html" does not exist in the folder "custom-folder".
  

  Ensure the file and folder paths are correct.

Accessing the Report

Once the server is running, open your browser and navigate to:

http://localhost:<port>

Replace <port> with the port number you specified or the default port (2004). The report will automatically open in your default browser if the always option is enabled.

---

Changelog

Stay up-to-date with the latest features, improvements, and bug fixes by reviewing the Changelog.

License

This project is licensed under the terms of the LICENSE.

Feedback and Contributions

I encourage you to share feedback and contribute to improving Kbs Report! For issues, suggestions, or contributions, please visit our GitHub repository

Keep promote Open Source