---
title: Playwright Integration with CI Insights
description: Report your test results from Playwright tests to CI Insights
---

import playwrightLogo from "../../../images/ci-insights/playwright/logo.svg"
import CommonTroubleshootingTips from "./_common-troubleshooting-tips.mdx"
import GhaMergifyCiQuarantineSetup from "./_gha_mergify_ci_quarantine_setup.mdx"
import IntegrationLogo from "../../../../components/IntegrationLogo.astro"
import MergifyCIUploadStep from "../../../../components/MergifyCIUploadStep.astro"
import CIInsightsSetupNote from "../../../../components/CIInsightsSetupNote.astro"
import MergifyCIUploadStepMatrix from "../../../../components/MergifyCIUploadStepMatrix.astro"

<IntegrationLogo src={playwrightLogo} alt="Playwright logo" />

This guide shows how to generate JUnit reports from your Playwright tests and upload
them to **CI Insights** using a GitHub Actions workflow.

## Generate a JUnit Report with Playwright

Playwright has built-in support for JUnit XML reports through its built-in
reporter. You can configure Playwright to output JUnit reports in your
`playwright.config.ts` file.

### Using Playwright Configuration

Add the JUnit reporter to your `playwright.config.ts`:

```typescript
// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  reporter: [
    ['list'],
    ['junit', { outputFile: 'junit.xml' }]
  ],
  // ... other configuration
});
```

### Using Command Line Options

You can also specify the reporter via command line:

```bash
npx playwright test --reporter=list,junit
```

To specify the output file location:

```bash
npx playwright test --reporter=list --reporter=junit:junit.xml
```

## Update Your GitHub Actions Workflow

<CIInsightsSetupNote />

After generating the JUnit report, add a step to upload the results to CI
Insights using the mergifyio/gha-mergify-ci action.

For example, in your workflow file:

```yaml
- name: Run Playwright Tests and Generate JUnit Report
  continue-on-error: true
  run: npx playwright test --reporter=list --reporter=junit:junit.xml
```

<MergifyCIUploadStep reportPath="junit.xml" />
<MergifyCIUploadStepMatrix reportPath="junit.xml" />

<GhaMergifyCiQuarantineSetup />

## Verify and Review in CI Insights

After pushing these changes:

1. Your GitHub Actions workflow will execute your Playwright tests.
2. A JUnit report (junit.xml) is generated.
3. The Mergify CI action uploads the report to CI Insights.

You can then review your test results, including any failures or flaky tests,
directly in the [CI Insights
dashboard](https://dashboard.mergify.com/ci-insights/jobs).

## Troubleshooting Tips

<ul>
  <li>
    Playwright Configuration: Ensure the JUnit reporter is properly configured in your `playwright.config.ts` file.
  </li>

  <CommonTroubleshootingTips />
</ul>