Use Cases
Common Use Cases
- Uptime monitoring with screenshots
- Visual regression detection
- Performance benchmarking
- Broken link detection
Before You Begin
Prerequisites
- Node.js 18+
- Chromium-compatible environment
- Slack workspace
Walkthrough
Step-by-Step Guide
1
Configure Puppeteer
Set up the Puppeteer MCP Server for headless browser automation.
2
Define Monitoring Checks
List the pages to monitor with expected load times and visual baselines.
3
Run Health Checks
Navigate to each page, measure load time, and capture a screenshot.
async function checkPage(url) {
const start = Date.now();
const page = await puppeteer.newPage();
const response = await page.goto(url, { waitUntil: "networkidle2" });
const loadTime = Date.now() - start;
const screenshot = await page.screenshot({ fullPage: true });
if (response.status() >= 400 || loadTime > 5000) {
await slack.sendMessage({
channel: "#monitoring",
text: `🔴 ${url} - Status: ${response.status()}, Load: ${loadTime}ms`
});
}
return { url, status: response.status(), loadTime, screenshot };
}4
Compare Against Baseline
Detect visual regressions by comparing screenshots to stored baselines.
Examples
Code Examples
typescript
Visual Diff
async function visualRegression(url, baseline) {
const current = await takeScreenshot(url);
const diff = await compareImages(baseline, current);
if (diff.percentage > 5) {
await slack.sendMessage({ channel: "#monitoring", text: `⚠️ Visual change detected on ${url}: ${diff.percentage}% different` });
}
}Help
Troubleshooting
Screenshots are inconsistent+
Chromium uses too much memory+
Quick Info
DifficultyIntermediate
Time Estimate45 minutes
Tools
Puppeteer MCP ServerSlack MCP Server