Test It Like You Mean It: Generate Charts & PDFs from Your Test Reports

Tired of test reports that just dump raw text or logs? Let’s upgrade that. If you're working on API testing, test metrics, or even CI/CD pipelines — you can automate beautiful chart-based reports and export them as PDFs. Stakeholders/ TL love visuals. Devs love clarity. You can have both. In this blog, I’ll show you how to: Generate charts (bar, pie, line) using Chart.js or QuickChart Export those charts (and test data) to PDFs using Puppeteer, jsPDF, or PDFKit Use them in API testing, test coverage reports, and performance metrics Tools You’ll Need Here’s a stack of tools you can mix and match based on your setup: Tool Use Case Node.js Compatible QuickChart Generate chart images via URL ✅ Chart.js + Puppeteer Render charts in headless Chrome ✅ jsPDF Generate client-side PDFs ✅ PDFKit Build server-side PDFs in Node.js ✅ Playwright Headless browser (like Puppeteer) ✅ Allure + Allure Charts Plugin Test reporting & charts ✅ Use Case 1: API Test Results → PDF Report Imagine you’re using something like Postman + Newman, or a custom test runner (Jest, Mocha, Fastify test, etc.) — and you want a shareable PDF report with pass/fail data. 1. Get the test result JSON // Example output from a test run { "total": 10, "passed": 7, "failed": 3, "testCases": [ { "name": "GET /login", "status": "passed" }, { "name": "POST /signup", "status": "failed" } ] } 2. Use QuickChart to render pie chart const fs = require("fs") const chartUrl = "https://quickchart.io/chart" const chartConfig = { type: "pie", data: { labels: ["Passed", "Failed"], datasets: [ { data: [7, 3], backgroundColor: ["#4caf50", "#f44336"], }, ], }, } const generateChart = async () => { const url = `${chartUrl}?c=${encodeURIComponent(JSON.stringify(chartConfig))}` const res = await fetch(url) const arrayBuffer = await res.arrayBuffer() // Changed from buffer() to arrayBuffer() const buffer = Buffer.from(arrayBuffer) // Convert ArrayBuffer to Buffer fs.writeFileSync("test-chart.png", buffer) } generateChart() Ex: 3. Create PDF with PDFKit const PDFDocument = require('pdfkit'); const fs = require('fs'); const doc = new PDFDocument(); doc.pipe(fs.createWriteStream('test-report.pdf')); doc.fontSize(20).text('API Test Report', { align: 'center' }); doc.moveDown(); doc.image('test-chart.png', { width: 300, align: 'center' }); doc.moveDown().fontSize(12); doc.text('Test Results:', { underline: true }); doc.list(['GET /login - ✅', 'POST /signup - ❌']); doc.end(); Ex: Done. You’ve got a shareable visual PDF showing the chart and test data. Use Case 2: CI Pipeline with Visual Feedback Let’s say you're running tests on every PR. You want the report posted to Slack or emailed as a charted PDF. Add test result collection at end of your test run Use QuickChart to make a chart Use PDFKit or Puppeteer to create the PDF Use Nodemailer or Slack API to send the report # Example command in CI node create-pdf-report.js && node send-email.js Render Dynamic Charts with Puppeteer If you want custom chart rendering beyond QuickChart: const puppeteer = require('puppeteer'); const html = ` const ctx = document.getElementById('chart').getContext('2d'); new Chart(ctx, { type: 'bar', data: { labels: ['Passed', 'Failed'], datasets: [{ label: 'Tests', data: [7, 3], backgroundColor: ['#4caf50', '#f44336'] }] } }); `; (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.setContent(html); await page.screenshot({ path: 'chart.png' }); await browser.close(); })(); TL;DR What You Want Use These Tools Chart from test data QuickChart, Chart.js PDF export PDFKit, jsPDF, Puppeteer Headless browser Puppeteer, Playwright CI/CD test visuals Combine chart + PDF + Slack/Nodemailer Enterprise test report Allure + Charts Plugin + PDF export Let your test reports speak louder than logs. Visualize them. Automate the boring. Share results that actually get read. I’ve been actively working on a super-convenient tool called LiveAPI. LiveAPI helps you get all your backend APIs documented in a few minutes With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser. If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.

May 2, 2025 - 19:58

Test It Like You Mean It: Generate Charts & PDFs from Your Test Reports

Tired of test reports that just dump raw text or logs?

Let’s upgrade that.

If you're working on API testing, test metrics, or even CI/CD pipelines — you can automate beautiful chart-based reports and export them as PDFs.

Stakeholders/ TL love visuals.

Devs love clarity. You can have both.

In this blog, I’ll show you how to:

Generate charts (bar, pie, line) using Chart.js or QuickChart
Export those charts (and test data) to PDFs using Puppeteer, jsPDF, or PDFKit
Use them in API testing, test coverage reports, and performance metrics

Tools You’ll Need

Here’s a stack of tools you can mix and match based on your setup:

Tool	Use Case	Node.js Compatible
QuickChart	Generate chart images via URL	✅
Chart.js + Puppeteer	Render charts in headless Chrome	✅
jsPDF	Generate client-side PDFs	✅
PDFKit	Build server-side PDFs in Node.js	✅
Playwright	Headless browser (like Puppeteer)	✅
Allure + Allure Charts Plugin	Test reporting & charts	✅

Use Case 1: API Test Results → PDF Report

Imagine you’re using something like Postman + Newman, or a custom test runner (Jest, Mocha, Fastify test, etc.) — and you want a shareable PDF report with pass/fail data.

1. Get the test result JSON

// Example output from a test run
{
  "total": 10,
  "passed": 7,
  "failed": 3,
  "testCases": [
    { "name": "GET /login", "status": "passed" },
    { "name": "POST /signup", "status": "failed" }
  ]
}

2. Use QuickChart to render pie chart

const fs = require("fs")

const chartUrl = "https://quickchart.io/chart"
const chartConfig = {
  type: "pie",
  data: {
    labels: ["Passed", "Failed"],
    datasets: [
      {
        data: [7, 3],
        backgroundColor: ["#4caf50", "#f44336"],
      },
    ],
  },
}

const generateChart = async () => {
  const url = `${chartUrl}?c=${encodeURIComponent(JSON.stringify(chartConfig))}`
  const res = await fetch(url)
  const arrayBuffer = await res.arrayBuffer() // Changed from buffer() to arrayBuffer()
  const buffer = Buffer.from(arrayBuffer) // Convert ArrayBuffer to Buffer
  fs.writeFileSync("test-chart.png", buffer)
}

generateChart()

Ex:

3. Create PDF with PDFKit

const PDFDocument = require('pdfkit');
const fs = require('fs');

const doc = new PDFDocument();
doc.pipe(fs.createWriteStream('test-report.pdf'));

doc.fontSize(20).text('API Test Report', { align: 'center' });
doc.moveDown();
doc.image('test-chart.png', { width: 300, align: 'center' });

doc.moveDown().fontSize(12);
doc.text('Test Results:', { underline: true });
doc.list(['GET /login - ✅', 'POST /signup - ❌']);

doc.end();

Ex:

Done. You’ve got a shareable visual PDF showing the chart and test data.

Use Case 2: CI Pipeline with Visual Feedback

Let’s say you're running tests on every PR. You want the report posted to Slack or emailed as a charted PDF.

Add test result collection at end of your test run
Use QuickChart to make a chart
Use PDFKit or Puppeteer to create the PDF
Use Nodemailer or Slack API to send the report

# Example command in CI
node create-pdf-report.js && node send-email.js

Render Dynamic Charts with Puppeteer

If you want custom chart rendering beyond QuickChart:

const puppeteer = require('puppeteer');

const html = `
  
  
    
    
    
  
  
`;

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  await page.screenshot({ path: 'chart.png' });
  await browser.close();
})();

TL;DR

What You Want	Use These Tools
Chart from test data	QuickChart, Chart.js
PDF export	PDFKit, jsPDF, Puppeteer
Headless browser	Puppeteer, Playwright
CI/CD test visuals	Combine chart + PDF + Slack/Nodemailer
Enterprise test report	Allure + Charts Plugin + PDF export

Let your test reports speak louder than logs. Visualize them. Automate the boring. Share results that actually get read.

I’ve been actively working on a super-convenient tool called LiveAPI.

LiveAPI helps you get all your backend APIs documented in a few minutes

With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser.

If you’re tired of manually creating docs for your APIs, this tool might just make your life easier.