Creating a Test Execution Report with Charts in Playwright
Modern test automation isn't just about running tests—it's also about presenting clear, visual feedback on test results. When working with Playwright, one of the most powerful end-to-end testing tools for modern web apps, generating detailed execution reports can help your team track progress, identify issues quickly, and make data-driven decisions. A visual report with charts brings your testing efforts to life.
In this blog, we’ll walk through how to create a test execution report with charts using Playwright’s built-in capabilities along with third-party tools for enhanced visualization.
Why Visual Reports Matter
Plain text logs and console outputs are hard to parse at scale. A good report should answer questions like:
- How many tests passed or failed?
- What’s the overall success rate?
- Which tests are flaky or slow?
How have test results changed over time?
Visualizing this data with charts—like pie charts, bar graphs, or timelines—helps QA teams and stakeholders better understand test quality and stability.
Step 1: Set Up Playwright
First, install Playwright (if you haven’t already):
bash
npm init playwright@latest
This sets up a project with example tests and configuration.
To generate reports, make sure to use the Playwright Test Runner, which supports built-in HTML reporting:
bash
npx playwright test --reporter=html
This will create an html-report/ folder with a detailed, interactive report of your test execution.
Step 2: Enhance with Custom Charts
Playwright’s built-in HTML report is great, but if you want to include custom charts, especially over time (e.g., test trends, failure frequency), you can extend functionality using JSON output and external visualization tools.
Generate test results in JSON format using:
bash
npx playwright test --reporter=json
The output will contain detailed information about each test run. You can use this JSON data as input for chart libraries like:
- Chart.js
- D3.js
- Plotly
- Google Charts
Step 3: Build a Dashboard with Charts
Create a simple HTML dashboard to display your test report visually:
html
<!DOCTYPE html>
<html>
<head>
<title>Playwright Test Report</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<h2>Test Summary</h2>
<canvas id="testChart" width="400" height="200"></canvas>
<script>
const data = {
labels: ['Passed', 'Failed', 'Skipped'],
datasets: [{
label: 'Test Execution Summary',
data: [80, 15, 5], // Replace with real data from JSON
backgroundColor: ['#4CAF50', '#F44336', '#FFC107']
}]
};
const config = {
type: 'pie',
data: data
};
new Chart(document.getElementById('testChart'), config);
</script>
</body>
</html>
You can write a script in Node.js or Python to extract real numbers from the Playwright JSON and inject them into this template dynamically.
Step 4: Automate Report Generation
To fully automate the report creation:
- Run tests and generate JSON reports.
- Parse JSON and feed data to the chart.
- Open or deploy the HTML dashboard to a server or CI/CD dashboard.
You can even integrate the report generation into your CI/CD pipeline for real-time feedback on pull requests.
Conclusion
Playwright makes it easy to generate detailed test reports, and with a little extra effort, you can take it further by adding interactive charts for better insights. Whether you're a solo developer or part of a QA team, visualizing your test results can uncover trends, improve communication, and make your automation efforts truly impactful.
Learn Playwright Testing Training
Read More: Mocking Third-Party Scripts in Playwright
Visit IHUB Talent Institute Hyderabad
Get Direction
Comments
Post a Comment