diffpx 1.1.0

package/bin/diffpx.js

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+const {loadConfig} = require('../src/configLoader');
+const {launchBrowser} = require('../src/steps/browser');
+const {runSnapshots} = require('../src/runner');
+const crypto = require("crypto");
+
+(async () => {
+    const {config, devicesConfig, settings} = await loadConfig();
+
+    const ppKey = process.env.PP_KEY;
+    if (!ppKey) throw new Error("No API key found in .env or settings.yml");
+
+    const {browser, page} = await launchBrowser();
+
+    const timestamp = new Date().toISOString().replace('T', ' ').split('.')[0];
+    const groupId = crypto.randomUUID();
+
+    try {
+        await runSnapshots({
+            ppKey,
+            config,
+            devicesConfig,
+            settings,
+            page,
+            timestamp,
+            groupId
+        });
+    } catch (err) {
+        console.error('🔴 Error during snapshot run:', err);
+        process.exitCode = 1;
+    } finally {
+        await browser.close();
+    }
+})();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "diffpx",
+  "version": "1.1.0",
+  "bin": {
+    "diffpx": "bin/diffpx.js"
+  },
+  "scripts": {
+    "start": "node bin/diffpx.js"
+  },
+  "dependencies": {
+    "axios": "^1.7.4",
+    "cli-progress": "^3.12.0",
+    "dotenv": "^16.4.5",
+    "form-data": "^4.0.0",
+    "js-yaml": "^4.1.0",
+    "ora": "^8.1.0",
+    "puppeteer": "^24.23.0"
+  },
+  "description": "",
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "files": [
+    "bin",
+    "src"
+  ]
+}

package/src/config.js

@@ -0,0 +1,18 @@
+import fs from "fs";
+import yaml from "js-yaml";
+import path from "path";
+
+export function loadYaml(file) {
+  const fullPath = path.resolve(process.cwd(), file);
+  if (!fs.existsSync(fullPath)) {
+    throw new Error(`${file} not found`);
+  }
+  const content = fs.readFileSync(fullPath, "utf8");
+  return yaml.load(content);
+}
+
+export function loadConfigs() {
+  const settings = loadYaml("settings.yml");
+  const snapshots = loadYaml("snapshots.yml");
+  return { settings, snapshots };
+}

package/src/configLoader.js

@@ -0,0 +1,11 @@
+const fs = require('fs');
+const yaml = require('js-yaml');
+const validateConfig = require('./validateConfig');
+
+async function loadConfig() {
+    const { config, devicesConfig } = await validateConfig();
+    const settings = yaml.load(fs.readFileSync('settings.yml', 'utf8'));
+    return { config, devicesConfig, settings };
+}
+
+module.exports = { loadConfig };

package/src/runner.js

@@ -0,0 +1,76 @@
+const cliProgress = require('cli-progress');
+const {handleDevice} = require('./steps/device');
+const {navigatePage} = require('./steps/navigate');
+const {handleCookies} = require('./steps/cookies');
+const {handleHides} = require('./steps/hides');
+const {takeScreenshot} = require('./steps/screenshot');
+
+async function runSnapshots({ppKey, config, devicesConfig, settings, page, timestamp, groupId}) {
+    const multiBar = new cliProgress.MultiBar({
+        clearOnComplete: false,
+        hideCursor: true,
+        barCompleteChar: '█',
+        barIncompleteChar: '░',
+        format: '{name} [{bar}] {percentage}% | {value}/{total}'
+    }, cliProgress.Presets.shades_classic);
+
+    const outer = multiBar.create(config.length, 0, {name: config[0]?.name || ''});
+    const inner = multiBar.create(1, 0, {name: ''});
+
+    const logs = [];
+    const log = msg => logs.push(`[${new Date().toISOString().replace('T', ' ').split('.')[0]}] ${msg}`);
+
+    for (let index = 0; index < config.length; index++) {
+        const entry = config[index];
+        const {name, url, tags, timeout, readySelector, readySelectors, devices, hide, cookies} = entry;
+
+        log(`▶️ Starting snapshots for "${name}" → ${url}`);
+
+        const runs = devices?.length > 0 ? devices : settings.width;
+        const isDeviceMode = !!devices?.length;
+
+        outer.update(index, {name});
+        inner.setTotal(runs.length);
+        inner.update(0, {name: ''});
+
+        for (const r of runs) {
+            const label = isDeviceMode ? r : `${r}px`;
+            inner.update(inner.value, {name: label});
+
+            try {
+                const {
+                    label: resolvedLabel,
+                    logs: deviceLogs
+                } = await handleDevice(page, r, isDeviceMode, devicesConfig, name, url, settings);
+
+                const shotLogs = [];
+                shotLogs.push(...deviceLogs);
+
+                await navigatePage(page, url, timeout, readySelector, readySelectors, r);
+                await handleCookies(page, cookies, settings);
+                await handleHides(page, hide, settings);
+                await takeScreenshot(ppKey, settings, page, name, resolvedLabel, tags, timestamp, shotLogs, groupId);
+
+                shotLogs.push(
+                    `[${new Date().toISOString().replace('T', ' ').split('.')[0]}] 🟢 Saved ${name}_${resolvedLabel}.png`
+                );
+
+                logs.push(...shotLogs);
+            } catch (err) {
+                log(`🔴 Error during run ${name}_${label}: ${err.message}`);
+            }
+
+            inner.increment();
+        }
+
+        log(`🏁 Finished snapshots for "${name}"`);
+        outer.increment({name});
+    }
+
+    outer.stop();
+    inner.stop();
+    multiBar.stop();
+    return logs;
+}
+
+module.exports = {runSnapshots};

package/src/steps/browser.js

@@ -0,0 +1,12 @@
+const puppeteer = require('puppeteer');
+
+async function launchBrowser() {
+    const browser = await puppeteer.launch({
+        headless: true,
+        args: ['--no-sandbox', '--disable-setuid-sandbox']
+    });
+    const page = await browser.newPage();
+    return { browser, page };
+}
+
+module.exports = { launchBrowser };

package/src/steps/cookies.js

@@ -0,0 +1,17 @@
+async function handleCookies(page, cookies, settings) {
+    let cookieSelector = cookies || settings.cookies;
+    if (cookieSelector) {
+        try {
+            const button = await page.$(cookieSelector);
+            if (button) {
+                await button.click();
+                console.log(`🍪 Accepted cookies with selector: ${ cookieSelector }`);
+                await page.waitForTimeout(500);
+            }
+        } catch (err) {
+            console.warn(`⚠️ Could not click cookie button (${ cookieSelector }): ${ err.message }`);
+        }
+    }
+}
+
+module.exports = { handleCookies };

package/src/steps/device.js

@@ -0,0 +1,30 @@
+async function handleDevice(page, r, isDeviceMode, devicesConfig, name, url, settings = {}) {
+    let label
+    const logs = []
+
+    const log = msg =>
+        logs.push(
+            `[${new Date().toISOString().replace("T", " ").split(".")[0]}] ${msg}`
+        )
+
+    if (isDeviceMode) {
+        const spec = devicesConfig[r]
+        label = r.replace(/\s+/g, "_")
+
+        log(`📷 Taking screenshot of ${url} with device ${r} → ${name}_${label}.png`)
+
+        await page.setUserAgent(spec.userAgent)
+        await page.setViewport(spec.viewport)
+    } else {
+        label = r
+
+        log(`📷 Taking screenshot of ${url} at width ${r}px → ${name}_${label}.png`)
+
+        const height = settings.height || 1080
+        await page.setViewport({width: r, height})
+    }
+
+    return {label, logs}
+}
+
+module.exports = { handleDevice };

package/src/steps/hides.js

@@ -0,0 +1,20 @@
+async function handleHides(page, hide, settings) {
+    let globalHides = [];
+    if (settings.hide) {
+        globalHides = settings.hide.split(',').map(s => s.trim());
+    }
+
+    let snapshotHides = [];
+    if (hide) {
+        snapshotHides = hide.split(',').map(s => s.trim());
+    }
+
+    const allHides = [...globalHides, ...snapshotHides];
+    if (allHides.length > 0) {
+        await page.addStyleTag({
+            content: `${ allHides.join(', ') } { display: none !important; }`
+        });
+    }
+}
+
+module.exports = { handleHides };

package/src/steps/navigate.js

@@ -0,0 +1,18 @@
+async function navigatePage(page, url, timeout, readySelector, readySelectors, r) {
+    await page.goto(url, { waitUntil: 'networkidle2', timeout: timeout || 60000 });
+
+    let selector = null;
+    if (readySelectors && readySelectors[r]) {
+        selector = readySelectors[r];
+    } else if (readySelector) {
+        selector = readySelector;
+    }
+
+    if (selector) {
+        await page.waitForSelector(selector, { timeout: timeout || 60000 });
+    } else if (timeout) {
+        await new Promise(resolve => setTimeout(resolve, timeout));
+    }
+}
+
+module.exports = { navigatePage };

package/src/steps/screenshot.js

@@ -0,0 +1,33 @@
+const fs = require('fs');
+const path = require('path');
+const {uploadSnapshots} = require("../upload.js");
+
+async function takeScreenshot(ppKey, settings, page, name, label, tags, timestamp, logs, groupId) {
+    const screenshot = await page.screenshot({fullPage: true});
+    const tmpFile = path.join(process.cwd(), `${name}_${label}.png`);
+    fs.writeFileSync(tmpFile, screenshot);
+
+    try {
+        await uploadSnapshots(ppKey, settings, {
+            timestamp,
+            label,
+            name,
+            tags,
+            logs,
+            groupId,
+            filePath: tmpFile
+        });
+    } catch (err) {
+        const status = err.response?.status;
+        const msg = err.response?.data?.error || err.message;
+
+        if (status === 401 || status === 403) {
+            console.error("🔴 error: " + msg);
+            process.exit(1);
+        }
+    } finally {
+        fs.unlinkSync(tmpFile);
+    }
+}
+
+module.exports = {takeScreenshot};

package/src/upload.js

@@ -0,0 +1,34 @@
+import fs from "fs";
+import path from "path";
+import axios from "axios";
+import FormData from "form-data";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const ppUrl = process.env.PP_URL;
+
+export async function uploadSnapshots(ppKey, settings, shot) {
+    const form = new FormData();
+    form.append("settings", JSON.stringify(settings));
+    form.append("timestamp", shot.timestamp);
+    form.append("path", shot.label);
+    form.append("name", shot.name);
+    form.append("groupId", shot.groupId);
+
+    if (shot.tags) form.append("tags", JSON.stringify(shot.tags));
+    if (shot.logs) form.append("logs", JSON.stringify(shot.logs));
+
+    const stream = fs.createReadStream(path.resolve(shot.filePath));
+    form.append("snapshots", stream, `${shot.name}_${shot.label}.png`);
+
+    const res = await axios.post(`${ppUrl}/compare`, form, {
+        headers: {
+            ...form.getHeaders(),
+            Authorization: `Bearer ${ppKey}`
+        },
+        maxBodyLength: Infinity
+    });
+
+    return res.data;
+}

package/src/validateConfig.js

@@ -0,0 +1,72 @@
+const fs = require('fs');
+const yaml = require('js-yaml');
+const axios = require('axios');
+require('dotenv').config();
+
+async function validateConfig() {
+    const errors = [];
+
+    const ppKey = process.env.PP_KEY;
+    const ppUrl = process.env.PP_URL;
+
+    if (!ppKey) errors.push("🔴 Missing PP_KEY in .env");
+    if (!ppUrl) errors.push("🔴 Missing PP_URL in .env");
+
+    if (errors.length > 0) {
+        console.error("🔴 Configuration check failed:");
+        for (const err of errors) console.error("   " + err);
+        process.exit(1);
+    }
+
+    try {
+        await axios.get(`${ ppUrl }/auth/ping`, {
+            headers: { Authorization: `Bearer ${ ppKey }` },
+            timeout: 5000
+        });
+    } catch (err) {
+        const msg = err.response?.data?.error || err.message;
+        if (msg.includes("ECONNREFUSED") || msg.includes("ENOTFOUND")) {
+            console.error("🔴 API validation failed: Connection to server failed. Make sure PP_URL in .env is correct");
+        } else {
+            console.error("🔴 API validation failed:", msg);
+        }
+        process.exit(1);
+    }
+
+    const config = yaml.load(fs.readFileSync('snapshots.yml', 'utf8'));
+    const devicesList = yaml.load(fs.readFileSync('devices.yml', 'utf8'));
+
+    const devicesConfig = {};
+    for (const d of devicesList) devicesConfig[d.name] = d;
+
+    const seenNames = new Set();
+    const configErrors = [];
+
+    for (const entry of config) {
+        if (seenNames.has(entry.name)) {
+            configErrors.push(`🔴 Duplicate snapshot name "${ entry.name }" found in snapshots.yml`);
+        } else {
+            seenNames.add(entry.name);
+        }
+
+        if (entry.devices && entry.devices.length > 0) {
+            for (const d of entry.devices) {
+                if (!devicesConfig[d]) {
+                    configErrors.push(`🔴 Snapshot "${ entry.name }": Device "${ d }" not found in devices.yml`);
+                }
+            }
+        }
+    }
+
+    if (configErrors.length > 0) {
+        console.error("🔴 Configuration check failed:");
+        for (const err of configErrors) console.error("   " + err);
+        process.exit(1);
+    } else {
+        console.log("🟢 Configuration check passed.");
+    }
+
+    return { config, devicesConfig };
+}
+
+module.exports = validateConfig;