Hello, I'm Maneshwar. I'm building git-lrc, an AI code reviewer that runs on every commit. It is free, unlimited, and source-available on Github. Star Us to help devs discover the project. Do give it a try and share your feedback for improving the product.
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 = `
<html>
<body>
<canvas id="chart" width="400" height="400"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
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']
}]
}
});
</script>
</body>
</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.
With LiveAPI, you can quickly generate interactive API documentation that allows users to execute APIs directly from the browser.
Let me know if you have another block of text you'd like me to clean up!
*AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.*
Any feedback or contributors are welcome! It's online, source-available, and ready for anyone to use.
⭐ Star it on GitHub:
HexmosTech
/
git-lrc
Free, Unlimited AI Code Reviews That Run on Commit
git-lrc
Free, Unlimited AI Code Reviews That Run on Commit
AI agents write code fast. They also silently remove logic, change behavior, and introduce bugs -- without telling you. You often find out in production.
git-lrc fixes this. It hooks into git commit and reviews every diff before it lands. 60-second setup. Completely free.
See It In Action
See git-lrc catch serious security issues such as leaked credentials, expensive cloud operations, and sensitive material in log statements
git-lrc-intro-60s.mp4
Why
- 🤖 AI agents silently break things. Code removed. Logic changed. Edge cases gone. You won't notice until production.
- 🔍 Catch it before it ships. AI-powered inline comments show you exactly what changed and what looks wrong.
- 🔁 Build a habit, ship better code. Regular review → fewer bugs → more robust code → better results in your team.
- 🔗 Why git? Git is universal. Every editor, every IDE, every AI…
Top comments (1)
I am developing an open source code hope everyone is interested!!!
Click Here