feat: implement visual regression testing v2.0 — Playwright pipeline with bbox extraction
- Add visual-test-pipeline.js: captures screenshots, extracts UI elements with bounding boxes, compares via pixelmatch, reports console/network errors - Add capture-screenshots.js: baseline/current screenshot capture at mobile/tablet/desktop viewports - Add console-error-monitor-standalone.js: standalone console/network error detection without MCP dependency - Rewrite docker-compose.web-testing.yml: real Playwright image, working services, proper volume mounts - Update package.json: v2.0.0, add playwright dependency, clean scripts - Update README.md: accurate Docker-first docs with usage examples - Add .gitignore: exclude node_modules, current/diff screenshots, reports - Include baseline screenshots for bbox.wtf homepage
This commit is contained in:
NW
102
tests/scripts/capture-screenshots.js
Normal file
102
tests/scripts/capture-screenshots.js
Normal file
@@ -0,0 +1,102 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Screenshot Capture Script for Visual Regression Testing
|
||||
*
|
||||
* Captures screenshots of web pages at multiple viewports using Playwright.
|
||||
* Used to create baseline or current screenshots.
|
||||
*
|
||||
* Usage: node capture-screenshots.js [baseline|current]
|
||||
* baseline - Save to tests/visual/baseline/
|
||||
* current - Save to tests/visual/current/
|
||||
*/
|
||||
|
||||
const { chromium } = require('playwright');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const TARGET_URL = process.env.TARGET_URL || 'http://host.docker.internal:3000';
|
||||
const MODE = process.argv[2] || 'current';
|
||||
|
||||
const VIEWPORTS = [
|
||||
{ name: 'mobile', width: 375, height: 667 },
|
||||
{ name: 'tablet', width: 768, height: 1024 },
|
||||
{ name: 'desktop', width: 1280, height: 720 },
|
||||
];
|
||||
|
||||
const PAGES = [
|
||||
{ name: 'homepage', path: '/' },
|
||||
{ name: 'admin-login', path: '/admin/login' },
|
||||
];
|
||||
|
||||
const SCREENSHOT_BASE = path.join(__dirname, '..', 'visual');
|
||||
|
||||
async function captureScreenshots() {
|
||||
const outputDir = path.join(SCREENSHOT_BASE, MODE);
|
||||
|
||||
if (!fs.existsSync(outputDir)) {
|
||||
fs.mkdirSync(outputDir, { recursive: true });
|
||||
}
|
||||
|
||||
console.log(`=== Screenshot Capture: ${MODE} ===\n`);
|
||||
console.log(`Target URL: ${TARGET_URL}`);
|
||||
console.log(`Output: ${outputDir}\n`);
|
||||
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
args: ['--no-sandbox', '--disable-setuid-sandbox'],
|
||||
});
|
||||
|
||||
let totalCaptured = 0;
|
||||
let totalFailed = 0;
|
||||
|
||||
for (const page_config of PAGES) {
|
||||
for (const viewport of VIEWPORTS) {
|
||||
const filename = `${page_config.name}_${viewport.name}.png`;
|
||||
const filePath = path.join(outputDir, filename);
|
||||
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: viewport.width, height: viewport.height },
|
||||
deviceScaleFactor: 1,
|
||||
});
|
||||
|
||||
const page = await context.newPage();
|
||||
|
||||
try {
|
||||
const url = `${TARGET_URL}${page_config.path}`;
|
||||
console.log(` Capturing: ${url} [${viewport.name}]`);
|
||||
|
||||
await page.goto(url, { waitUntil: 'networkidle', timeout: 15000 });
|
||||
await page.waitForTimeout(1000);
|
||||
|
||||
await page.screenshot({
|
||||
path: filePath,
|
||||
fullPage: true,
|
||||
});
|
||||
|
||||
const fileSize = fs.statSync(filePath).size;
|
||||
console.log(` ✅ Saved: ${filename} (${(fileSize / 1024).toFixed(1)} KB)`);
|
||||
totalCaptured++;
|
||||
} catch (error) {
|
||||
console.log(` ❌ Failed: ${filename} - ${error.message}`);
|
||||
totalFailed++;
|
||||
} finally {
|
||||
await context.close();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
|
||||
console.log(`\n📊 Summary:`);
|
||||
console.log(` Mode: ${MODE}`);
|
||||
console.log(` ✅ Captured: ${totalCaptured}`);
|
||||
console.log(` ❌ Failed: ${totalFailed}`);
|
||||
console.log(` 📁 Output: ${outputDir}`);
|
||||
|
||||
process.exit(totalFailed > 0 ? 1 : 0);
|
||||
}
|
||||
|
||||
captureScreenshots().catch((err) => {
|
||||
console.error('Fatal error:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
160
tests/scripts/console-error-monitor-standalone.js
Normal file
160
tests/scripts/console-error-monitor-standalone.js
Normal file
@@ -0,0 +1,160 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Console Error Monitor (Standalone)
|
||||
*
|
||||
* Captures console errors from web pages using Playwright directly
|
||||
* (no Playwright MCP dependency). Detects JS errors, network failures, warnings.
|
||||
*
|
||||
* Usage: node console-error-monitor-standalone.js
|
||||
*
|
||||
* Environment:
|
||||
* TARGET_URL - App URL (default: http://host.docker.internal:3000)
|
||||
* REPORTS_DIR - Reports output dir
|
||||
*/
|
||||
|
||||
const { chromium } = require('playwright');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const TARGET_URL = process.env.TARGET_URL || 'http://host.docker.internal:3000';
|
||||
const REPORTS_DIR = process.env.REPORTS_DIR || path.join(__dirname, '..', 'reports');
|
||||
|
||||
const PAGES = [
|
||||
{ name: 'homepage', path: '/' },
|
||||
{ name: 'admin-login', path: '/admin/login' },
|
||||
];
|
||||
|
||||
const VIEWPORT = { width: 1280, height: 720 };
|
||||
|
||||
async function main() {
|
||||
console.log('═══════════════════════════════════════════════════');
|
||||
console.log(' Console Error Monitor (Standalone)');
|
||||
console.log('═══════════════════════════════════════════════════\n');
|
||||
console.log(`Target: ${TARGET_URL}\n`);
|
||||
|
||||
if (!fs.existsSync(REPORTS_DIR)) fs.mkdirSync(REPORTS_DIR, { recursive: true });
|
||||
|
||||
const browser = await chromium.launch({
|
||||
headless: true,
|
||||
args: ['--no-sandbox', '--disable-setuid-sandbox'],
|
||||
});
|
||||
|
||||
const allErrors = [];
|
||||
const allWarnings = [];
|
||||
const allNetworkErrors = [];
|
||||
|
||||
for (const pageConf of PAGES) {
|
||||
const url = `${TARGET_URL}${pageConf.path}`;
|
||||
console.log(`🔍 Checking: ${pageConf.name} (${url})`);
|
||||
|
||||
const context = await browser.newContext({ viewport: VIEWPORT, deviceScaleFactor: 1 });
|
||||
const page = await context.newPage();
|
||||
|
||||
const consoleErrors = [];
|
||||
const consoleWarnings = [];
|
||||
const networkErrors = [];
|
||||
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') {
|
||||
consoleErrors.push({ text: msg.text(), location: msg.location() });
|
||||
} else if (msg.type() === 'warning') {
|
||||
consoleWarnings.push({ text: msg.text(), location: msg.location() });
|
||||
}
|
||||
});
|
||||
|
||||
page.on('requestfailed', request => {
|
||||
networkErrors.push({
|
||||
url: request.url(),
|
||||
method: request.method(),
|
||||
failure: request.failure()?.errorText || 'Unknown',
|
||||
});
|
||||
});
|
||||
|
||||
page.on('response', response => {
|
||||
if (response.status() >= 400) {
|
||||
networkErrors.push({
|
||||
url: response.url(),
|
||||
status: response.status(),
|
||||
method: response.request().method(),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
try {
|
||||
const response = await page.goto(url, { waitUntil: 'networkidle', timeout: 15000 });
|
||||
await page.waitForTimeout(2000);
|
||||
|
||||
if (!response || response.status() >= 400) {
|
||||
console.log(` ❌ HTTP ${response?.status() || 'no response'}`);
|
||||
} else {
|
||||
console.log(` ✅ HTTP ${response.status()}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.log(` ❌ Navigation error: ${err.message}`);
|
||||
}
|
||||
|
||||
if (consoleErrors.length > 0) {
|
||||
console.log(` ❌ Console errors: ${consoleErrors.length}`);
|
||||
consoleErrors.forEach(e => console.log(` - ${e.text.slice(0, 100)}`));
|
||||
} else {
|
||||
console.log(` ✅ No console errors`);
|
||||
}
|
||||
|
||||
if (consoleWarnings.length > 0) {
|
||||
console.log(` ⚠️ Console warnings: ${consoleWarnings.length}`);
|
||||
consoleWarnings.forEach(w => console.log(` - ${w.text.slice(0, 100)}`));
|
||||
}
|
||||
|
||||
if (networkErrors.length > 0) {
|
||||
console.log(` ❌ Network errors: ${networkErrors.length}`);
|
||||
networkErrors.forEach(e => console.log(` - ${e.status || e.failure} ${e.url.slice(0, 80)}`));
|
||||
} else {
|
||||
console.log(` ✅ No network errors`);
|
||||
}
|
||||
|
||||
allErrors.push(...consoleErrors.map(e => ({ ...e, page: pageConf.name })));
|
||||
allWarnings.push(...consoleWarnings.map(w => ({ ...w, page: pageConf.name })));
|
||||
allNetworkErrors.push(...networkErrors.map(e => ({ ...e, page: pageConf.name })));
|
||||
|
||||
await context.close();
|
||||
console.log('');
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
|
||||
const totalIssues = allErrors.length + allNetworkErrors.length;
|
||||
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
targetUrl: TARGET_URL,
|
||||
pages: PAGES.map(p => p.name),
|
||||
summary: {
|
||||
consoleErrors: allErrors.length,
|
||||
consoleWarnings: allWarnings.length,
|
||||
networkErrors: allNetworkErrors.length,
|
||||
totalIssues,
|
||||
},
|
||||
consoleErrors: allErrors,
|
||||
consoleWarnings: allWarnings,
|
||||
networkErrors: allNetworkErrors,
|
||||
};
|
||||
|
||||
const reportPath = path.join(REPORTS_DIR, 'console-error-report.json');
|
||||
fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
|
||||
|
||||
console.log('═══════════════════════════════════════════════════');
|
||||
console.log(` 📊 Results:`);
|
||||
console.log(` Console errors: ${allErrors.length}`);
|
||||
console.log(` Console warnings: ${allWarnings.length}`);
|
||||
console.log(` Network errors: ${allNetworkErrors.length}`);
|
||||
console.log(` Total issues: ${totalIssues}`);
|
||||
console.log(` 📄 Report: ${reportPath}`);
|
||||
console.log('═══════════════════════════════════════════════════\n');
|
||||
|
||||
process.exit(totalIssues > 0 ? 1 : 0);
|
||||
}
|
||||
|
||||
main().catch(err => {
|
||||
console.error('Fatal:', err);
|
||||
process.exit(1);
|
||||
});
|
||||
325
tests/scripts/visual-test-pipeline.js
Normal file
325
tests/scripts/visual-test-pipeline.js
Normal file
@@ -0,0 +1,325 @@
|
||||
#!/usr/bin/env node
|
||||
/**
|
||||
* Visual Test Pipeline — Full Analysis
|
||||
*
|
||||
* Captures screenshots, extracts UI elements with bounding boxes,
|
||||
* detects console errors, and compares against baselines.
|
||||
*
|
||||
* Usage: node visual-test-pipeline.js [URL]
|
||||
*
|
||||
* Environment:
|
||||
* TARGET_URL - App URL (default: http://host.docker.internal:3000)
|
||||
* PIXELMATCH_THRESHOLD - Diff threshold (default: 0.05 = 5%)
|
||||
* PAGES - Comma-separated page paths (default: /,/admin/login)
|
||||
*/
|
||||
|
||||
const { chromium } = require('playwright');
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
const TARGET_URL = process.argv[2] || process.env.TARGET_URL || 'http://host.docker.internal:3000';
|
||||
const THRESHOLD = parseFloat(process.env.PIXELMATCH_THRESHOLD || '0.05');
|
||||
const PAGES_ARG = process.env.PAGES || '/,/admin/login';
|
||||
const PAGE_PATHS = PAGES_ARG.split(',').map(p => p.trim()).filter(Boolean);
|
||||
|
||||
const VISUAL_DIR = path.join(__dirname, '..', 'visual');
|
||||
const BASELINE_DIR = path.join(VISUAL_DIR, 'baseline');
|
||||
const CURRENT_DIR = path.join(VISUAL_DIR, 'current');
|
||||
const DIFF_DIR = path.join(VISUAL_DIR, 'diff');
|
||||
const REPORTS_DIR = path.join(__dirname, '..', 'reports');
|
||||
|
||||
const VIEWPORTS = [
|
||||
{ name: 'mobile', width: 375, height: 667 },
|
||||
{ name: 'tablet', width: 768, height: 1024 },
|
||||
{ name: 'desktop', width: 1280, height: 720 },
|
||||
];
|
||||
|
||||
function pageNameFromPath(p) {
|
||||
if (p === '/' || p === '') return 'homepage';
|
||||
return p.replace(/^\//, '').replace(/[\/\.]/g, '-');
|
||||
}
|
||||
|
||||
const PAGES = PAGE_PATHS.map(p => ({ name: pageNameFromPath(p), path: p.startsWith('/') ? p : '/' + p }));
|
||||
|
||||
function ensureDir(dir) {
|
||||
if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
|
||||
/**
|
||||
* Extract UI elements with bounding boxes from page
|
||||
*/
|
||||
async function extractElements(page) {
|
||||
return await page.evaluate(() => {
|
||||
const elements = [];
|
||||
const seen = new Set();
|
||||
|
||||
function processNode(node) {
|
||||
if (node.nodeType !== 1) return;
|
||||
const tag = node.tagName.toLowerCase();
|
||||
const skipTags = new Set(['script','style','link','meta','noscript','svg','path','br','hr','wbr']);
|
||||
if (skipTags.has(tag)) return;
|
||||
|
||||
const rect = node.getBoundingClientRect();
|
||||
if (rect.width < 1 || rect.height < 1) return;
|
||||
|
||||
const id = `${tag}-` + (node.id || '') + '-' + Math.random().toString(36).slice(2, 8);
|
||||
if (seen.has(id)) return;
|
||||
seen.add(id);
|
||||
|
||||
const styles = window.getComputedStyle(node);
|
||||
const el = {
|
||||
tag,
|
||||
id: node.id || null,
|
||||
className: node.className?.toString()?.slice(0, 120) || null,
|
||||
text: (node.textContent || '').slice(0, 80).trim() || null,
|
||||
href: node.href || null,
|
||||
type: node.type || null,
|
||||
placeholder: node.placeholder || null,
|
||||
role: node.getAttribute('role') || null,
|
||||
ariaLabel: node.getAttribute('aria-label') || null,
|
||||
visible: styles.display !== 'none' && styles.visibility !== 'hidden' && styles.opacity !== '0',
|
||||
bbox: {
|
||||
x: Math.round(rect.x),
|
||||
y: Math.round(rect.y),
|
||||
width: Math.round(rect.width),
|
||||
height: Math.round(rect.height),
|
||||
},
|
||||
};
|
||||
elements.push(el);
|
||||
}
|
||||
|
||||
function walk(root) {
|
||||
const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null, false);
|
||||
let node;
|
||||
while (node = walker.nextNode()) processNode(node);
|
||||
}
|
||||
|
||||
walk(document.body);
|
||||
return elements;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Capture screenshots and extract elements for a single page+viewport
|
||||
*/
|
||||
async function capturePage(browser, pageConf, vp, outputDir, mode) {
|
||||
const filename = `${pageConf.name}_${vp.name}.png`;
|
||||
const filePath = path.join(outputDir, filename);
|
||||
const url = `${TARGET_URL}${pageConf.path}`;
|
||||
|
||||
const context = await browser.newContext({
|
||||
viewport: { width: vp.width, height: vp.height },
|
||||
deviceScaleFactor: 1,
|
||||
});
|
||||
const page = await context.newPage();
|
||||
|
||||
const consoleErrors = [];
|
||||
const networkErrors = [];
|
||||
|
||||
page.on('console', msg => {
|
||||
if (msg.type() === 'error') consoleErrors.push(msg.text());
|
||||
});
|
||||
page.on('response', resp => {
|
||||
if (resp.status() >= 400) networkErrors.push({ url: resp.url(), status: resp.status() });
|
||||
});
|
||||
page.on('requestfailed', req => {
|
||||
networkErrors.push({ url: req.url(), failure: req.failure()?.errorText || 'failed' });
|
||||
});
|
||||
|
||||
try {
|
||||
console.log(` Capturing: ${pageConf.name} @ ${vp.name} (${vp.width}x${vp.height})`);
|
||||
const response = await page.goto(url, { waitUntil: 'networkidle', timeout: 20000 });
|
||||
await page.waitForTimeout(1500);
|
||||
|
||||
await page.screenshot({ path: filePath, fullPage: true });
|
||||
const fileSize = fs.statSync(filePath).size;
|
||||
|
||||
const elements = await extractElements(page);
|
||||
const title = await page.title();
|
||||
|
||||
console.log(` ✅ ${filename} (${(fileSize / 1024).toFixed(1)} KB, ${elements.length} elements)`);
|
||||
|
||||
return {
|
||||
filename, page: pageConf.name, viewport: vp.name, status: 'PASS', size: fileSize,
|
||||
url, httpStatus: response?.status() || null, title,
|
||||
elements, consoleErrors, networkErrors,
|
||||
};
|
||||
} catch (err) {
|
||||
console.log(` ❌ ${filename}: ${err.message}`);
|
||||
return { filename, page: pageConf.name, viewport: vp.name, status: 'FAIL', error: err.message, elements: [], consoleErrors, networkErrors: [] };
|
||||
} finally {
|
||||
await context.close();
|
||||
}
|
||||
}
|
||||
|
||||
async function captureAll(mode) {
|
||||
ensureDir(mode === 'baseline' ? BASELINE_DIR : CURRENT_DIR);
|
||||
const outputDir = mode === 'baseline' ? BASELINE_DIR : CURRENT_DIR;
|
||||
|
||||
console.log(`\n📸 Capturing ${mode} screenshots...`);
|
||||
console.log(` Target: ${TARGET_URL}`);
|
||||
console.log(` Pages: ${PAGES.map(p => p.path).join(', ')}`);
|
||||
console.log(` Output: ${outputDir}\n`);
|
||||
|
||||
const browser = await chromium.launch({ headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox'] });
|
||||
const results = [];
|
||||
|
||||
for (const pageConf of PAGES) {
|
||||
for (const vp of VIEWPORTS) {
|
||||
const r = await capturePage(browser, pageConf, vp, outputDir, mode);
|
||||
results.push(r);
|
||||
}
|
||||
}
|
||||
|
||||
await browser.close();
|
||||
return results;
|
||||
}
|
||||
|
||||
async function compareScreenshots() {
|
||||
const pixelmatch = require('pixelmatch');
|
||||
const PNG = require('pngjs').PNG;
|
||||
ensureDir(DIFF_DIR);
|
||||
|
||||
console.log(`\n🔍 Comparing screenshots (threshold: ${THRESHOLD * 100}%)...\n`);
|
||||
|
||||
const baselines = fs.existsSync(BASELINE_DIR)
|
||||
? fs.readdirSync(BASELINE_DIR).filter(f => f.endsWith('.png'))
|
||||
: [];
|
||||
|
||||
const results = [];
|
||||
let passed = 0, failed = 0;
|
||||
|
||||
for (const file of baselines) {
|
||||
const currentPath = path.join(CURRENT_DIR, file);
|
||||
const diffPath = path.join(DIFF_DIR, file.replace('.png', '_diff.png'));
|
||||
|
||||
if (!fs.existsSync(currentPath)) {
|
||||
console.log(` ⚠️ Missing current: ${file}`);
|
||||
results.push({ filename: file, status: 'MISSING', diffPercent: null });
|
||||
failed++;
|
||||
continue;
|
||||
}
|
||||
|
||||
try {
|
||||
const baselineImg = PNG.sync.read(fs.readFileSync(path.join(BASELINE_DIR, file)));
|
||||
const currentImg = PNG.sync.read(fs.readFileSync(currentPath));
|
||||
const { width, height } = baselineImg;
|
||||
|
||||
if (width !== currentImg.width || height !== currentImg.height) {
|
||||
console.log(` ❌ Size mismatch: ${file}`);
|
||||
results.push({ filename: file, status: 'SIZE_MISMATCH', diffPercent: null });
|
||||
failed++;
|
||||
continue;
|
||||
}
|
||||
|
||||
const diffImg = new PNG({ width, height });
|
||||
const diffPixels = pixelmatch(baselineImg.data, currentImg.data, diffImg.data, width, height, { threshold: 0.1, diffColor: [255, 0, 0] });
|
||||
fs.writeFileSync(diffPath, PNG.sync.write(diffImg));
|
||||
|
||||
const diffPercent = (diffPixels / (width * height)) * 100;
|
||||
const ok = diffPercent <= THRESHOLD * 100;
|
||||
ok ? passed++ : failed++;
|
||||
console.log(` ${ok ? '✅' : '❌'} ${file}: ${diffPercent.toFixed(2)}% diff`);
|
||||
results.push({ filename: file, status: ok ? 'PASS' : 'FAIL', diffPercent: diffPercent.toFixed(2), diffPixels, totalPixels: width * height });
|
||||
} catch (err) {
|
||||
console.log(` ❌ Error: ${file}: ${err.message}`);
|
||||
results.push({ filename: file, status: 'ERROR', error: err.message });
|
||||
failed++;
|
||||
}
|
||||
}
|
||||
|
||||
return { results, passed, failed };
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log('═══════════════════════════════════════════════════');
|
||||
console.log(' Visual Test Pipeline — Full Analysis');
|
||||
console.log('═══════════════════════════════════════════════════\n');
|
||||
|
||||
ensureDir(REPORTS_DIR);
|
||||
|
||||
const hasBaselines = fs.existsSync(BASELINE_DIR) &&
|
||||
fs.readdirSync(BASELINE_DIR).filter(f => f.endsWith('.png')).length > 0;
|
||||
|
||||
if (!hasBaselines) {
|
||||
console.log('⚠️ No baselines — capturing baseline screenshots first.\n');
|
||||
await captureAll('baseline');
|
||||
console.log('\n✅ Baselines created. Now capturing current screenshots.\n');
|
||||
}
|
||||
|
||||
const captureResults = await captureAll('current');
|
||||
const compareResult = await compareScreenshots();
|
||||
|
||||
const allElements = {};
|
||||
const allConsoleErrors = [];
|
||||
const allNetworkErrors = [];
|
||||
|
||||
for (const r of captureResults) {
|
||||
const key = `${r.page}_${r.viewport}`;
|
||||
allElements[key] = r.elements || [];
|
||||
if (r.consoleErrors?.length) allConsoleErrors.push(...r.consoleErrors.map(e => ({ page: r.page, viewport: r.viewport, error: e })));
|
||||
if (r.networkErrors?.length) allNetworkErrors.push(...r.networkErrors.map(e => ({ page: r.page, viewport: r.viewport, ...e })));
|
||||
}
|
||||
|
||||
const report = {
|
||||
timestamp: new Date().toISOString(),
|
||||
targetUrl: TARGET_URL,
|
||||
pages: PAGES.map(p => p.path),
|
||||
viewports: VIEWPORTS.map(v => v.name),
|
||||
threshold: THRESHOLD,
|
||||
summary: {
|
||||
screenshotsCaptured: captureResults.filter(r => r.status === 'PASS').length,
|
||||
screenshotsFailed: captureResults.filter(r => r.status === 'FAIL').length,
|
||||
comparisonsPassed: compareResult.passed,
|
||||
comparisonsFailed: compareResult.failed,
|
||||
totalElements: Object.values(allElements).reduce((s, a) => s + a.length, 0),
|
||||
totalConsoleErrors: allConsoleErrors.length,
|
||||
totalNetworkErrors: allNetworkErrors.length,
|
||||
overallPassed: compareResult.passed >= compareResult.failed && captureResults.filter(r => r.status === 'FAIL').length === 0,
|
||||
},
|
||||
capture: captureResults.map(r => ({
|
||||
filename: r.filename, page: r.page, viewport: r.viewport, status: r.status,
|
||||
httpStatus: r.httpStatus, title: r.title,
|
||||
elementCount: r.elements?.length || 0,
|
||||
consoleErrorCount: r.consoleErrors?.length || 0,
|
||||
networkErrorCount: r.networkErrors?.length || 0,
|
||||
})),
|
||||
elements: allElements,
|
||||
consoleErrors: allConsoleErrors,
|
||||
networkErrors: allNetworkErrors,
|
||||
comparison: compareResult.results,
|
||||
};
|
||||
|
||||
const reportPath = path.join(REPORTS_DIR, 'visual-test-report.json');
|
||||
fs.writeFileSync(reportPath, JSON.stringify(report, null, 2));
|
||||
|
||||
console.log('\n═══════════════════════════════════════════════════');
|
||||
console.log(` 📊 RESULTS SUMMARY`);
|
||||
console.log(` ─────────────────────────────────────────────────`);
|
||||
console.log(` Screenshots: ${report.summary.screenshotsCaptured} captured, ${report.summary.screenshotsFailed} failed`);
|
||||
console.log(` Elements: ${report.summary.totalElements}`);
|
||||
console.log(` Comparison: ${compareResult.passed} passed, ${compareResult.failed} failed`);
|
||||
console.log(` Console Errs: ${allConsoleErrors.length}`);
|
||||
console.log(` Network Errs: ${allNetworkErrors.length}`);
|
||||
|
||||
if (allConsoleErrors.length > 0) {
|
||||
console.log(`\n ❌ Console Errors:`);
|
||||
for (const e of allConsoleErrors.slice(0, 10)) {
|
||||
console.log(` [${e.page}/${e.viewport}] ${e.error.slice(0, 120)}`);
|
||||
}
|
||||
}
|
||||
|
||||
if (allNetworkErrors.length > 0) {
|
||||
console.log(`\n ❌ Network Errors:`);
|
||||
for (const e of allNetworkErrors.slice(0, 10)) {
|
||||
console.log(` [${e.page}/${e.viewport}] ${e.status || e.failure} ${e.url?.slice(0, 80)}`);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`\n 📄 Report: ${reportPath}`);
|
||||
console.log('═══════════════════════════════════════════════════\n');
|
||||
|
||||
process.exit(report.summary.overallPassed ? 0 : 1);
|
||||
}
|
||||
|
||||
main().catch(err => { console.error('Fatal:', err); process.exit(1); });
|
||||
Reference in New Issue
Block a user