Are you looking to elevate your Playwright test reports from basic pass/fail lists to visually appealing, information-rich dashboards? In this post, we'll walk through how to set up Playwright's default reporters alongside the Monocart reporter—a community-built plugin that delivers sleek HTML reports. By the end, you'll know how to install Playwright, run your first tests, configure multiple reporters (HTML, list, and Monocart), and tag tests for streamlined filtering.

Why Better Reporting Matters

Playwright's built-in reporters (like the default HTML reporter and the list reporter) give you a quick look at test outcomes. However, as your test suite grows and you start sharing reports with teammates, stakeholders, or CI pipelines, you may need:

• Cleaner Layouts: Monocart's reports are styled to clearly distinguish passed, failed, and skipped tests.
• Customizable Output: You can configure Monocart to include screenshots, video links, environment details, and additional metadata.
• Multiple Output Formats: Run tests once and publish HTML, Monocart, and terminal-friendly lists side by side.

By combining Monocart with Playwright's defaults, you get the best of all worlds: an easy terminal summary during development, an HTML dashboard for exploratory debugging, and a Monocart report for presentation or archival purposes.

What You'll Learn

1. Installing Playwright: How to scaffold a new Playwright project.
2. Running Default Tests: Generating HTML reports out of the box.
3. Using the list Reporter: A concise summary in the terminal.
4. Installing Monocart Reporter: Adding a third-party plugin for polished HTML reports.
5. Customizing playwright.config.ts or playwright.config.js: Configuring multiple reporters in one place.
6. Tagging Tests: Leveraging custom labels (e.g., @fast, @slow, @Alice) to filter or group tests.

1. Install Playwright

If you haven't already installed Playwright in your project, run the following in an empty directory (or an existing Node project):

npm init playwright@latest

• This prompts you to choose a language (TypeScript or JavaScript) and installs Playwright dependencies.
• It also creates a basic folder structure with an example test and a playwright.config.ts (or playwright.config.js) file.

2. Create or Use Existing Test Cases

By default, Playwright scaffolds a sample test under tests/example.spec.ts (or .js). You can either:

• Run that sample to confirm the setup; or
• Create your own tests under the tests/ directory. For example:

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

test('homepage has correct title', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle('Example Domain');
});

3. Run Tests & Generate Default HTML Report

Execute all your tests via the CLI:

npx playwright test

Once the run completes, a default HTML report is generated in playwright-report/. To view it:

npx playwright show-report

• The HTML report opens in your browser, showing dashboards for passed/failed/skipped tests, traces, screenshots (if captured), and detailed failure logs.

4. Add the list Reporter for Terminal Summaries

The list reporter prints test results in a straightforward, colorized list format—ideal when you just want a quick glance in your terminal. To enable it, update your configuration:

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

export default defineConfig({
  // ...other config options...
  reporter: [
    ['list'],             // concise terminal output
    ['html'],             // default HTML dashboard
  ],
});

/** @type {import('@playwright/test').PlaywrightTestConfig} */
module.exports = {
  // ...other config options...
  reporter: [
    ['list'],             // concise terminal output
    ['html'],             // default HTML dashboard
  ],
};

Now, when you run npx playwright test, you'll see:

• A list of tests with ✓/✕ in the terminal.
• A standard HTML report in playwright-report/.

5. Install Monocart Reporter

Monocart delivers a beautifully formatted HTML report with built-in support for grouping tests, filtering by tags, and customizing colors. To add it:

npm install --save-dev monocart-reporter

This installs Monocart and adds it to your devDependencies.

6. Configure Monocart Reporter

Modify your Playwright configuration to include Monocart. You can output the Monocart report under a custom folder such as monocart-report/. Example:

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

export default defineConfig({
  // ...other config options...
  reporter: [
    ['list'],                                    // terminal output
    ['html'],                                    // default HTML report
    ['monocart-reporter', { 
      outputFile: 'monocart-report/index.html'  // Monocart report location
    }],
  ],
});

/** @type {import('@playwright/test').PlaywrightTestConfig} */
module.exports = {
  // ...other config options...
  reporter: [
    ['list'],                                    // terminal output
    ['html'],                                    // default HTML report
    ['monocart-reporter', { 
      outputFile: 'monocart-report/index.html'  // Monocart report location
    }],
  ],
};

With this setup, each time you run:

npx playwright test

You'll see:

1. Terminal list output (list).
2. playwright-report/ (default HTML).
3. monocart-report/index.html (Monocart's polished dashboard).

7. Using Multiple Reporters vs. Only Monocart

• All-In-One: As shown above, you can keep ['list'], ['html'], and Monocart together—great when you want a quick CLI summary, a basic HTML, plus the Monocart design.
• Only Monocart: If you prefer just the Monocart report, remove ['list'] and ['html'], leaving:

  reporter: [
    ['monocart-reporter', { outputFile: 'monocart-report/index.html' }],
  ],

• Custom Combination: Feel free to mix and match. For example, if you only want list + Monocart and skip the default HTML, delete ['html'].

8. Tagging Tests for Organization

Tags (sometimes called "annotations") help you group or filter tests. For instance, you can mark fast-running tests with @fast, slower tests with @slow, or assign a test to a feature or owner like @Alice. Later, you can run only tagged tests:

npx playwright test --grep @fast

How to Tag Tests

Inside your test files, add a test.describe or test annotation. For example:

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

// Tag a single test
test('@fast homepage quick check', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveTitle(/My App/);
});

// Tag an entire describe block
test.describe('@login feature', () => {
  test('valid credentials redirect', async ({ page }) => { /* ... */ });
  test('invalid credentials show error', async ({ page }) => { /* ... */ });
});

In your playwright.config.ts (or .js), you can optionally define default groups or naming conventions, but simply tagging as shown above is sufficient. Monocart's dashboard will display these tags prominently, allowing you to filter and sort visually.

Useful Commands at a Glance

• Run Playwright Tests & View Reports

  npx playwright test
  npx playwright show-report         # Opens default HTML report
  open monocart-report/index.html    # (Mac) view Monocart output

• Install Monocart Reporter

  npm install --save-dev monocart-reporter

• Run Tagged Tests Only

  npx playwright test --grep @fast

• Generate a Standalone Monocart Report If you configured Monocart as the sole reporter, simply run:

  npx playwright test
  open monocart-report/index.html

Tips for a Smooth Experience

1. Folder Structure

   ├── package.json
   ├── playwright.config.ts (or .js)
   ├── tests/
   │   └── *.spec.ts
   ├── playwright-report/         # default HTML reports
   └── monocart-report/           # Monocart HTML output

2. CI Integration
   • In your CI pipeline, publish both the playwright-report/ and monocart-report/ folders as artifacts.
   • Add a step to npx playwright show-report --reporter=html or serve Monocart's index.html from a static-hosting solution (e.g., GitHub Pages).
3. Customize Monocart
   • Monocart accepts configuration options such as theme, showProgressBar, or showTimeStamps. See Monocart's GitHub page for deeper customization.

Conclusion & Next Steps

Integrating Monocart into your Playwright workflow instantly boosts the readability and shareability of your test reports. By combining the list reporter with HTML and Monocart outputs, you maintain:

• Developer Speed: Quick CLI feedback during local runs (list reporter).
• Standard Dashboards: Out-of-the-box HTML for quick debugging.
• Polished Reports: Monocart's advanced visualizations for stakeholders, archival, or QA reviews.

Ready to level up? 🎥 Watch the full walkthrough in my video, where I guide you step by step—from installing Playwright, configuring multiple reporters, to tagging tests for powerful filtering. Don't forget to like, comment, and subscribe for more Playwright tips and testing best practices!

Happy testing!