Playwright Code Coverage

Code coverage shows how much of your application code runs during tests. TestDino collects coverage from your Playwright tests, merges data across shards, and displays a per-file breakdown on the dashboard.

WarningCode coverage requires @testdino/playwright. See Real-Time Streaming for setup.

Quick Reference

Topic	Link
Coverage metrics	Statements, branches, functions, lines
Instrument your app	babel-plugin-istanbul, nyc, vite-plugin-istanbul
Enable coverage	Coverage config options
Coverage fixture	Auto-fixture and manual fixture
Sharded runs	Merge coverage across CI shards
Data handling	What gets uploaded and stored
Troubleshooting	Common issues and fixes

Coverage Metrics

TestDino tracks four standard coverage metrics:

Metric	What it measures
Statements	How many individual code statements ran
Branches	How many `if`/`else` paths were taken (both the true and false side)
Functions	How many functions were called at least once
Lines	How many source lines ran

Prerequisites

@testdino/playwright installed (CLI reference)
TestDino API token (generate one)
Your application instrumented with Istanbul so window.__coverage__ is available in the browser

Instrument Your Application

Instrumentation adds small tracking counters around every statement, branch, and function in your code. When your app runs, these counters record what was executed. The result is stored in a global window.__coverage__ object that TestDino reads after each test.

WarningInstrumented builds are for testing only. Never deploy them to production. Instrumentation slows performance by 10-30%, increases bundle size by 2-3x, and exposes your source code file structure.

Pick the method that matches your build tool:

babel-plugin-istanbul
vite-plugin-istanbul
nyc instrument

Best for React apps using Babel (Create React App, Next.js with Babel, etc.).Install the plugin:

npm install -D babel-plugin-istanbul

Add it to your Babel config so it only runs during test builds:

babel.config.json

{
  "env": {
    "test": {
      "plugins": ["istanbul"]
    }
  }
}

Build with instrumentation enabled:

NODE_ENV=test npm run build

Best for Vite-based apps (Vite + React, Vite + Vue, etc.).Install the plugin:

npm install -D vite-plugin-istanbul

Add it to your Vite config. The requireEnv: true option ensures instrumentation only activates when you set VITE_COVERAGE=true:

vite.config.ts

import istanbul from 'vite-plugin-istanbul';

export default defineConfig({
  plugins: [
    istanbul({
      include: 'src/*',
      exclude: ['node_modules', 'test/'],
      extension: ['.js', '.ts', '.tsx'],
      requireEnv: true,
    }),
  ],
});

Build with instrumentation enabled:

VITE_COVERAGE=true npm run build

Best when you need a standalone tool without modifying your build config.Install nyc:

npm install -D nyc

Instrument your source into a separate directory:

npx nyc instrument src instrumented-src

Serve the instrumented-src directory for your test runs.

Recommended Build Strategy

Only use instrumented builds for test environments. All other environments should use regular builds.

Environment	Build Type	`NODE_ENV`	Purpose
Development	Regular	`development`	Local development
Testing / QA	Instrumented	`test`	E2E tests with coverage
Staging	Regular	`production`	Pre-production validation
Production	Regular	`production`	Live users

Enable Coverage

Add the coverage option to @testdino/playwright in your Playwright config:

playwright.config.ts

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

export default defineConfig({
  reporter: [
    ['list'],
    ['@testdino/playwright', {
      token: process.env.TESTDINO_TOKEN,
      serverUrl: "https://reporter.testdino.com",
      coverage: {
        enabled: true,
      },
    }],
  ],
  projects: [
    { name: 'chromium', use: { browserName: 'chromium' } },
    { name: 'firefox', use: { browserName: 'firefox' } },
    { name: 'webkit', use: { browserName: 'webkit' } },
  ],
  use: {
    baseURL: 'http://localhost:3000',
  },
});

Coverage Options

Option	Type	Default	Description
`enabled`	`boolean`	`false`	Turn on coverage collection
`include`	`string[]`	all files	Glob patterns for files to include
`exclude`	`string[]`	none	Glob patterns for files to exclude
`thresholds`	`object`	none	Minimum `statements`, `branches`, `functions`, and `lines` percentages. Falling short logs an error.

Whenever coverage is collected, an Istanbul HTML report is written to ./coverage/index.html. There is no option to turn it off or change the directory.

Use the Coverage Fixture

The fixture is the piece that reads window.__coverage__ from the browser after each test finishes. @testdino/playwright then merges all the collected data and sends it to TestDino.

Auto-fixture (Recommended)
Manual fixture

Change your import from @playwright/test to @testdino/playwright. Everything else stays the same:

tests/example.spec.ts

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

test('homepage loads', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('h1')).toBeVisible();
});

Coverage collection runs automatically after each test. No other code changes needed.

If you already have a custom test fixture setup, extend it with coverage:

tests/fixtures.ts

import { test as base } from '@playwright/test';
import { coverageFixtures } from '@testdino/playwright';

export const test = base.extend(coverageFixtures);
export { expect } from '@playwright/test';

Then use your extended test in spec files:

tests/example.spec.ts

import { test, expect } from './fixtures';

test('homepage loads', async ({ page }) => {
  await page.goto('/');
  await expect(page.locator('h1')).toBeVisible();
});

Run Tests

Start the instrumented application

Run your app using the instrumented test build:

NODE_ENV=test npm start

Set your API token

export TESTDINO_TOKEN="your-api-token"

Run Playwright tests

npx playwright test

Review results

After tests complete, the console prints a coverage summary table.Open ./coverage/index.html for the full Istanbul HTML report.Open the test run in TestDino and select the Coverage tab to see overall metrics and a per-file breakdown.

Sharded Runs

When you split tests across multiple CI shards, each shard collects coverage only for the tests it runs. TestDino merges all shard data into one combined report. Step 1: Set a CI run ID so all shards group into one test run:

export TESTDINO_CI_RUN_ID=$CI_PIPELINE_ID

Step 2: Run each shard:

npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3

How merging works: The server takes the union of covered lines from every shard. If shard 1 covers lines 1-50 of auth.ts and shard 2 covers lines 30-80, the merged report shows lines 1-80 as covered.

Example CI Workflow

.github/workflows/coverage.yml

name: Playwright Coverage
on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      matrix:
        shard: [1/3, 2/3, 3/3]
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: '20'

      - name: Install dependencies
        run: npm ci

      - name: Install Playwright
        run: npx playwright install --with-deps

      - name: Build for coverage
        run: NODE_ENV=test npm run build

      - name: Run tests
        env:
          TESTDINO_TOKEN: ${{ secrets.TESTDINO_TOKEN }}
        run: npx playwright test --shard=${{ matrix.shard }}

Data Handling

TestDino uploads only coverage metrics (percentages and hit counts per file). No source code, raw coverage maps, or window.__coverage__ payloads are stored on the server.

Data	Stored on server	Purpose
Per-run summary (statements, branches, functions, lines)	Yes	Dashboard summary tiles
Per-file metrics (path, percentages, hit counts)	Yes	File-by-file breakdown and trends
Source code	No	Never leaves your machine
Raw Istanbul coverage maps	No	Processed locally, then discarded

NoteWhen window.__coverage__ is not present in the browser, @testdino/playwright skips coverage collection and proceeds normally. Tests run without any performance impact.

Troubleshooting

No coverage data collected

Open your app in the browser and type window.__coverage__ in the DevTools console. If it returns undefined, your app is not instrumented.Check that:

Your build command uses NODE_ENV=test or VITE_COVERAGE=true
coverage.enabled is set to true in the @testdino/playwright config
Your test files import test from @testdino/playwright (not @playwright/test)

Coverage only from one browser

This is expected when Playwright’s top-level projects array defines a single browser, or when you run with --project=chromium. To collect coverage from all browsers, run without a project filter.

Missing files in coverage report

Only files that run during tests appear in the report. If a file shows 0% or is missing, no test triggered the code path that imports it.To include all source files (even untouched ones), configure your Istanbul tool’s include/exclude settings to cover the full source directory.

Branch coverage is lower than line coverage

This is normal. Branch coverage counts both sides of every if/else. If your tests only exercise one side (for example, the success path but not the error path), branch coverage drops while line coverage stays higher.

Debug coverage collection

Enable debug logging to see what @testdino/playwright collects:

['@testdino/playwright', {
  token: process.env.TESTDINO_TOKEN,
  serverUrl: "https://reporter.testdino.com",
  debug: true,
  coverage: { enabled: true },
}]

Check the console for messages prefixed with [TestDino].

Test Run Coverage

Per-run coverage breakdown by file

Coverage Trend

Coverage trends across runs and environments

Node.js CLI

CLI setup and options

CI Integration

Set up Playwright in GitHub Actions

Getting Started

Installation & Setup

AI & MCP

Guides

Project

Test Management

Organization

Integrations

Data Privacy

Resources

Quick Reference

Coverage Metrics

Prerequisites

Instrument Your Application

Recommended Build Strategy

Enable Coverage

Coverage Options

Use the Coverage Fixture

Run Tests

Sharded Runs

Example CI Workflow

Data Handling

Troubleshooting

Test Run Coverage

Coverage Trend

Node.js CLI

CI Integration

​Quick Reference

​Coverage Metrics

​Prerequisites

​Instrument Your Application

​Recommended Build Strategy

​Enable Coverage

​Coverage Options

​Use the Coverage Fixture

​Run Tests

​Sharded Runs

​Example CI Workflow

​Data Handling

​Troubleshooting

​Related

Test Run Coverage

Coverage Trend

Node.js CLI

CI Integration

Quick Reference

Coverage Metrics

Prerequisites

Instrument Your Application

Recommended Build Strategy

Enable Coverage

Coverage Options

Use the Coverage Fixture

Run Tests

Sharded Runs

Example CI Workflow

Data Handling

Troubleshooting

Related