dsh-desktop-kit 0.0.0-stage → 2.0.0

package/skills/seo/assets/scripts/lib/browser.mjs

@@ -0,0 +1,620 @@
+// Общая инфраструктура для capture.mjs / audit.mjs:
+//  - подключение к уже запущенному headless Chrome по CDP (http://127.0.0.1:9333),
+//    fallback — самостоятельный запуск chrome.exe с временным профилем;
+//  - создание страницы/контекста с нужным viewport/DPR/темой;
+//  - подготовка страницы к скриншоту: тема, шрифты, отключение анимаций,
+//    прокрутка для reveal/lazy, стабилизация;
+//  - сбор ошибок консоли/сети;
+//  - локальный статический сервер (для страниц с ES-модулями, которым нужен http://).
+
+import fs from 'node:fs';
+import os from 'node:os';
+import net from 'node:net';
+import http from 'node:http';
+import path from 'node:path';
+import { spawn } from 'node:child_process';
+import { pathToFileURL } from 'node:url';
+import { chromium } from 'playwright-core';
+import { UsageError } from './args.mjs';
+
+export const DEFAULT_CDP_URL = process.env.CDP_URL || 'http://127.0.0.1:9333';
+
+export const VIEWPORTS = {
+  desktop: { id: 'desktop', width: 1440, height: 900 },
+  tablet: { id: 'tablet', width: 768, height: 1024 },
+  mobile: { id: 'mobile', width: 390, height: 844 },
+};
+
+export const THEMES = ['light', 'dark'];
+
+const CHROME_CANDIDATES = [
+  process.env.CHROME_PATH,
+  'C:\\Users\\adm\\AppData\\Local\\ms-playwright\\chromium-1248\\chrome-win64\\chrome.exe',
+  path.join(os.homedir(), 'AppData', 'Local', 'ms-playwright', 'chromium-1248', 'chrome-win64', 'chrome.exe'),
+  'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
+  'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe',
+  'C:\\Program Files\\Microsoft\\Edge\\Application\\msedge.exe',
+];
+
+const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+export function findChrome() {
+  // 1) явный путь из окружения / список кандидатов
+  for (const candidate of CHROME_CANDIDATES) {
+    if (candidate && fs.existsSync(candidate)) return candidate;
+  }
+  // 2) поиск chromium-* в ms-playwright (на случай другой ревизии)
+  const pwDir = path.join(os.homedir(), 'AppData', 'Local', 'ms-playwright');
+  try {
+    const dirs = fs
+      .readdirSync(pwDir, { withFileTypes: true })
+      .filter((d) => d.isDirectory() && d.name.startsWith('chromium-'))
+      .map((d) => path.join(pwDir, d.name, 'chrome-win64', 'chrome.exe'))
+      .filter((p) => fs.existsSync(p))
+      .sort()
+      .reverse();
+    if (dirs.length) return dirs[0];
+  } catch {
+    /* нет каталога — не страшно */
+  }
+  return null;
+}
+
+export async function probeCdp(cdpUrl, timeoutMs = 1500) {
+  try {
+    const base = String(cdpUrl).replace(/\/+$/, '');
+    const res = await fetch(`${base}/json/version`, { signal: AbortSignal.timeout(timeoutMs) });
+    if (!res.ok) return null;
+    const json = await res.json();
+    return json && json.webSocketDebuggerUrl ? json : null;
+  } catch {
+    return null;
+  }
+}
+
+export async function getFreePort() {
+  return new Promise((resolve, reject) => {
+    const srv = net.createServer();
+    srv.unref();
+    srv.on('error', reject);
+    srv.listen(0, '127.0.0.1', () => {
+      const port = srv.address().port;
+      srv.close(() => resolve(port));
+    });
+  });
+}
+
+/**
+ * Подключиться к CDP или (если недоступен) запустить собственный Chromium.
+ * @returns {{browser: import('playwright-core').Browser, launched: boolean, endpoint: string, version: any, child?: any, profileDir?: string}}
+ */
+export async function connectChrome({ cdpUrl = DEFAULT_CDP_URL, log = () => {}, allowLaunch = true } = {}) {
+  let version = await probeCdp(cdpUrl);
+  if (version) {
+    const browser = await chromium.connectOverCDP(cdpUrl);
+    return { browser, launched: false, endpoint: cdpUrl, version };
+  }
+
+  if (!allowLaunch) throw new Error(`CDP недоступен: ${cdpUrl}`);
+
+  log(`[qa] CDP ${cdpUrl} недоступен — fallback: запускаю собственный headless Chromium`);
+  const chrome = findChrome();
+  if (!chrome) {
+    throw new Error(
+      'Не найден chrome.exe. Укажите переменную CHROME_PATH или запустите Chrome с --remote-debugging-port=9333',
+    );
+  }
+  const port = await getFreePort();
+  const profileDir = fs.mkdtempSync(path.join(os.tmpdir(), 'dsh-qa-chrome-'));
+  const args = [
+    '--headless=new',
+    `--remote-debugging-port=${port}`,
+    `--user-data-dir=${profileDir}`,
+    '--no-first-run',
+    '--no-default-browser-check',
+    '--disable-gpu',
+    '--hide-scrollbars',
+    '--allow-file-access-from-files',
+    '--force-color-profile=srgb',
+    '--disable-background-timer-throttling',
+    '--disable-renderer-backgrounding',
+    '--disable-dev-shm-usage',
+    'about:blank',
+  ];
+  const child = spawn(chrome, args, { stdio: 'ignore', windowsHide: true });
+  child.on('error', () => {});
+  const endpoint = `http://127.0.0.1:${port}`;
+
+  let ready = null;
+  const deadline = Date.now() + 40_000;
+  while (Date.now() < deadline) {
+    ready = await probeCdp(endpoint, 1000);
+    if (ready) break;
+    await sleep(250);
+  }
+  if (!ready) {
+    try {
+      child.kill();
+    } catch {
+      /* ignore */
+    }
+    throw new Error('Не удалось дождаться CDP fallback-Chromium (40 c)');
+  }
+  const browser = await chromium.connectOverCDP(endpoint);
+  return { browser, launched: true, endpoint, version: ready, child, profileDir };
+}
+
+/** Аккуратно закрыть соединение: чужой Chrome не убиваем, свой — гасим. */
+export async function disposeChrome(conn) {
+  if (!conn) return;
+  try {
+    // Для connectOverCDP закрытие соединения не завершает чужой браузер (проверено).
+    await Promise.race([conn.browser.close(), sleep(4000)]);
+  } catch {
+    /* ignore */
+  }
+  if (conn.child) {
+    try {
+      conn.child.kill();
+    } catch {
+      /* ignore */
+    }
+  }
+  if (conn.profileDir) {
+    await sleep(300);
+    try {
+      fs.rmSync(conn.profileDir, { recursive: true, force: true, maxRetries: 3, retryDelay: 200 });
+    } catch {
+      /* временный профиль может остаться — не критично */
+    }
+  }
+}
+
+/** Примерно 15-17px скроллбара в чужом Chrome ломают layout-замеры — убираем его для QA. */
+const SCROLLBAR_CSS = `
+html { scrollbar-width: none !important; }
+html::-webkit-scrollbar, body::-webkit-scrollbar, *::-webkit-scrollbar {
+  width: 0 !important; height: 0 !important; display: none !important;
+}`;
+
+/** Гасим анимации/переходы — скриншот должен быть детерминированным. */
+const ANIMATION_CSS = `
+*, *::before, *::after {
+  animation-duration: 0s !important;
+  animation-delay: 0s !important;
+  animation-iteration-count: 1 !important;
+  transition-duration: 0s !important;
+  transition-delay: 0s !important;
+  scroll-behavior: auto !important;
+}
+html { scroll-behavior: auto !important; }
+@keyframes qa-freeze { from { opacity: 1; } to { opacity: 1; } }
+`;
+
+/**
+ * Создать страницу под конкретный скриншот/аудит.
+ * Нужные viewport/DPR/тема задаются на уровне контекста (работает через connectOverCDP),
+ * при невозможности — fallback: страница из существующего контекста + CDP-эмуляция.
+ */
+export async function openPage(browser, { viewport = VIEWPORTS.desktop, dpr = 1, theme = 'light', reducedMotion = 'reduce' } = {}) {
+  try {
+    const context = await browser.newContext({
+      viewport: { width: viewport.width, height: viewport.height },
+      deviceScaleFactor: dpr,
+      colorScheme: theme,
+      reducedMotion,
+      locale: 'ru-RU',
+      timezoneId: 'Europe/Moscow',
+    });
+    const page = await context.newPage();
+    return { context, page, owned: true, dpr, viewport };
+  } catch {
+    // Старые/ограниченные сборки: работаем в первом доступном контексте.
+    const context = browser.contexts()[0] ?? (await browser.newContext());
+    const page = await context.newPage();
+    await page.setViewportSize({ width: viewport.width, height: viewport.height });
+    await page.emulateMedia({ colorScheme: theme, reducedMotion });
+    try {
+      const cdp = await context.newCDPSession(page);
+      await cdp.send('Emulation.setDeviceMetricsOverride', {
+        width: viewport.width,
+        height: viewport.height,
+        deviceScaleFactor: dpr,
+        mobile: false,
+      });
+    } catch {
+      /* DPR останется дефолтным */
+    }
+    return { context, page, owned: false, dpr, viewport };
+  }
+}
+
+export async function closePage(handle) {
+  if (!handle) return;
+  try {
+    if (handle.owned && handle.context && !handle.context.isClosed?.()) {
+      await handle.context.close();
+    } else {
+      await handle.page.close();
+    }
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Подписаться на консоль/ошибки/сетевые сбои страницы. */
+export function wireDiagnostics(page) {
+  const diag = { consoleErrors: [], pageErrors: [], failedRequests: [] };
+  page.on('console', (msg) => {
+    if (msg.type() !== 'error') return;
+    diag.consoleErrors.push({
+      type: 'console.error',
+      text: cleanText(msg.text()),
+      location: msg.location?.() ?? null,
+    });
+  });
+  page.on('pageerror', (err) => {
+    diag.pageErrors.push({
+      type: 'pageerror',
+      text: cleanText(`${err?.name || 'Error'}: ${err?.message || err}`),
+    });
+  });
+  page.on('requestfailed', (req) => {
+    const url = req.url();
+    if (url.startsWith('data:')) return;
+    diag.failedRequests.push({
+      type: 'requestfailed',
+      url: url.slice(0, 400),
+      error: req.failure()?.errorText || 'failed',
+      resourceType: req.resourceType(),
+    });
+  });
+  page.on('response', (resp) => {
+    if (resp.status() < 400) return;
+    const url = resp.url();
+    if (url.startsWith('data:')) return;
+    diag.failedRequests.push({
+      type: 'http',
+      url: url.slice(0, 400),
+      status: resp.status(),
+      resourceType: resp.request().resourceType(),
+    });
+  });
+  return diag;
+}
+
+function cleanText(text) {
+  return String(text ?? '')
+    .replace(/\u001b\[[0-9;]*m/g, '')
+    .trim()
+    .slice(0, 1200);
+}
+
+/** Дождаться загрузки веб-шрифтов; вернуть статус document.fonts. */
+export async function waitForFonts(page) {
+  try {
+    return await page.evaluate(async () => {
+      try {
+        await document.fonts.ready;
+      } catch {
+        /* ignore */
+      }
+      const faces = [];
+      try {
+        document.fonts.forEach((f) => faces.push({ family: f.family, weight: f.weight, style: f.style, status: f.status }));
+      } catch {
+        /* ignore */
+      }
+      return { status: document.fonts.status, size: document.fonts.size, faces: faces.slice(0, 40) };
+    });
+  } catch {
+    return { status: 'unknown', size: 0, faces: [] };
+  }
+}
+
+/** Прокрутить страницу до конца и обратно — чтобы сработали reveal-анимации и lazy-load. */
+export async function scrollThroughPage(page, { stepRatio = 0.8, pause = 70, maxSteps = 150 } = {}) {
+  try {
+    await page.evaluate(
+      async ({ stepRatio, pause, maxSteps }) => {
+        const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+        const docHeight = () =>
+          Math.max(
+            document.documentElement?.scrollHeight || 0,
+            document.body?.scrollHeight || 0,
+            window.innerHeight || 0,
+          );
+        const vh = window.innerHeight || 800;
+        window.scrollTo(0, 0);
+        await wait(pause);
+        let y = 0;
+        for (let step = 0; step < maxSteps; step++) {
+          window.scrollTo(0, y);
+          await wait(pause);
+          const h = docHeight();
+          if (y + vh >= h) break;
+          y += Math.max(160, Math.floor(vh * stepRatio));
+        }
+        // доскроллить до самого низа и вернуться наверх
+        window.scrollTo(0, docHeight());
+        await wait(pause * 2);
+        window.scrollTo(0, 0);
+        await wait(pause * 2);
+      },
+      { stepRatio, pause, maxSteps },
+    );
+  } catch {
+    /* страница могла закрыться/перейти — не критично */
+  }
+}
+
+/** Дождаться декодирования изображений (включая lazy). */
+export async function loadAllImages(page) {
+  try {
+    await page.evaluate(async () => {
+      const images = Array.from(document.images || []);
+      for (const img of images) {
+        if (img.loading === 'lazy') img.loading = 'eager';
+      }
+      await Promise.all(
+        images.map((img) => {
+          if (img.complete && img.naturalWidth > 0) return Promise.resolve();
+          return new Promise((resolve) => {
+            const done = () => resolve();
+            img.addEventListener('load', done, { once: true });
+            img.addEventListener('error', done, { once: true });
+            setTimeout(done, 3000);
+            if (img.decode) img.decode().then(done, done);
+          });
+        }),
+      );
+    });
+  } catch {
+    /* ignore */
+  }
+}
+
+async function nextFrames(page, count = 3) {
+  try {
+    await page.evaluate(
+      (n) =>
+        new Promise((resolve) => {
+          let i = 0;
+          const tick = () => {
+            if (++i >= n) resolve();
+            else requestAnimationFrame(tick);
+          };
+          requestAnimationFrame(tick);
+        }),
+      count,
+    );
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Применить data-theme/data-preset и переждать перерисовку. */
+export async function applyTheme(page, { theme, preset } = {}) {
+  if (!theme && !preset) return;
+  try {
+    await page.evaluate(
+      ({ theme, preset }) => {
+        const el = document.documentElement;
+        if (!el) return;
+        if (theme) el.setAttribute('data-theme', theme);
+        if (preset) el.setAttribute('data-preset', preset);
+        if (theme) el.style.colorScheme = theme;
+        try {
+          window.dispatchEvent(new CustomEvent('qa:theme', { detail: { theme, preset } }));
+        } catch {
+          /* ignore */
+        }
+      },
+      { theme, preset: preset || null },
+    );
+  } catch {
+    /* ignore */
+  }
+  await sleep(120);
+}
+
+/** Зарегистрировать data-theme/data-preset до первой отрисовки (против FOUC/override от JS страницы). */
+export async function addThemeInitScript(page, { theme, preset } = {}) {
+  try {
+    await page.addInitScript(
+      ({ theme, preset }) => {
+        const apply = () => {
+          const el = document.documentElement;
+          if (!el) return;
+          if (theme) el.setAttribute('data-theme', theme);
+          if (preset) el.setAttribute('data-preset', preset);
+          if (theme) el.style.colorScheme = theme;
+        };
+        apply();
+        document.addEventListener('DOMContentLoaded', apply, { once: true });
+      },
+      { theme: theme || null, preset: preset || null },
+    );
+  } catch {
+    /* ignore */
+  }
+}
+
+/** Полная подготовка страницы к скриншоту. Возвращает метрики для манифеста. */
+export async function preparePage(page, { theme, preset, animations = true, scroll = true, log = () => {} } = {}) {
+  await applyTheme(page, { theme, preset });
+  await waitForFonts(page);
+  await nextFrames(page, 2);
+
+  await page.addStyleTag({ content: SCROLLBAR_CSS }).catch(() => {});
+  if (animations) await page.addStyleTag({ content: ANIMATION_CSS }).catch(() => {});
+
+  if (scroll) {
+    await scrollThroughPage(page);
+    await loadAllImages(page);
+  }
+  await nextFrames(page, 3);
+  await waitForFonts(page);
+  await applyTheme(page, { theme, preset }); // страница могла перезаписать тему своим JS
+  await nextFrames(page, 2);
+
+  const metrics = await page
+    .evaluate(() => {
+      const de = document.documentElement;
+      return {
+        title: document.title || '',
+        url: location.href,
+        innerWidth: window.innerWidth,
+        innerHeight: window.innerHeight,
+        clientWidth: de?.clientWidth || 0,
+        scrollWidth: Math.max(de?.scrollWidth || 0, document.body?.scrollWidth || 0),
+        scrollHeight: Math.max(de?.scrollHeight || 0, document.body?.scrollHeight || 0),
+        devicePixelRatio: window.devicePixelRatio,
+        theme: de?.getAttribute('data-theme') || null,
+        preset: de?.getAttribute('data-preset') || null,
+        lang: de?.getAttribute('lang') || null,
+      };
+    })
+    .catch(() => ({}));
+  return metrics;
+}
+
+/** Открыть target (файл/URL) с обработкой file:// и локального сервера. */
+export async function gotoPage(page, url, { timeout = 30_000 } = {}) {
+  const response = await page.goto(url, { waitUntil: 'load', timeout });
+  await page.waitForLoadState('networkidle', { timeout: 5000 }).catch(() => {});
+  return response;
+}
+
+/** Разрешить цель: путь к html -> file URL (или http URL при --serve). */
+export function resolveTarget(target, { serve = false, root = process.cwd() } = {}) {
+  if (/^(https?:|file:)/i.test(target)) {
+    return { source: target, url: target, abs: null, kind: 'url' };
+  }
+  if (/^data:/i.test(target)) {
+    return { source: target, url: target, abs: null, kind: 'data' };
+  }
+  const abs = path.resolve(root, target);
+  let stat;
+  try {
+    stat = fs.statSync(abs);
+  } catch {
+    throw new UsageError(`Файл не найден: ${abs}`);
+  }
+  if (stat.isDirectory()) throw new UsageError(`Это каталог, нужен HTML-файл: ${abs}`);
+  if (!serve) return { source: abs, url: pathToFileURL(abs).href, abs, kind: 'file' };
+  return { source: abs, url: null, abs, kind: 'file-serve' };
+}
+
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.htm': 'text/html; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.jpeg': 'image/jpeg',
+  '.webp': 'image/webp',
+  '.gif': 'image/gif',
+  '.ico': 'image/x-icon',
+  '.woff2': 'font/woff2',
+  '.woff': 'font/woff',
+  '.ttf': 'font/ttf',
+  '.otf': 'font/otf',
+  '.txt': 'text/plain; charset=utf-8',
+  '.md': 'text/markdown; charset=utf-8',
+  '.map': 'application/json; charset=utf-8',
+  '.mp4': 'video/mp4',
+  '.webm': 'video/webm',
+};
+
+/**
+ * Локальный статический сервер — нужен страницам с <script type="module">,
+ * которые в Chrome не грузятся с file:// (CORS).
+ * Возвращает { origin, urlFor(absPath), close }.
+ */
+export async function startStaticServer(rootDir) {
+  const root = path.resolve(rootDir);
+  const server = http.createServer((req, res) => {
+    try {
+      const pathname = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
+      // favicon.ico — не отдаём 404, иначе браузер пишет console.error, которого на странице нет
+      if (pathname === '/favicon.ico') {
+        res.writeHead(204).end();
+        return;
+      }
+      const filePath = path.resolve(root, '.' + pathname);
+      if (!filePath.startsWith(root)) {
+        res.writeHead(403).end('forbidden');
+        return;
+      }
+      const stat = fs.statSync(filePath);
+      const finalPath = stat.isDirectory() ? path.join(filePath, 'index.html') : filePath;
+      const body = fs.readFileSync(finalPath);
+      res.writeHead(200, {
+        'Content-Type': MIME[path.extname(finalPath).toLowerCase()] || 'application/octet-stream',
+        'Cache-Control': 'no-store',
+      });
+      res.end(body);
+    } catch {
+      res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' }).end('not found');
+    }
+  });
+  const port = await getFreePort();
+  await new Promise((resolve) => server.listen(port, '127.0.0.1', resolve));
+  const origin = `http://127.0.0.1:${port}`;
+  return {
+    origin,
+    urlFor(absPath) {
+      const rel = path.relative(root, path.resolve(absPath)).split(path.sep).join('/');
+      return `${origin}/${rel}`;
+    },
+    close() {
+      return new Promise((resolve) => server.close(() => resolve()));
+    },
+  };
+}
+
+/** Парсинг строки viewport: "desktop,tablet,390x844,1440x900". */
+export function parseViewportList(value) {
+  const items = String(value || 'desktop')
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  const out = [];
+  for (const item of items) {
+    const named = VIEWPORTS[item.toLowerCase()];
+    if (named) {
+      out.push({ ...named });
+      continue;
+    }
+    const m = item.match(/^(\d{2,5})x(\d{2,5})$/i);
+    if (m) {
+      const width = Number(m[1]);
+      const height = Number(m[2]);
+      out.push({ id: `${width}x${height}`, width, height });
+      continue;
+    }
+    throw new UsageError(
+      `Неизвестный viewport «${item}». Доступно: ${Object.keys(VIEWPORTS).join(', ')} или <ширина>x<высота>`,
+    );
+  }
+  if (!out.length) throw new UsageError('Пустой список viewports');
+  return out;
+}
+
+/** Парсинг списка тем: "light,dark". */
+export function parseThemeList(value) {
+  const items = String(value || 'light,dark')
+    .split(',')
+    .map((s) => s.trim().toLowerCase())
+    .filter(Boolean);
+  for (const t of items) {
+    if (!['light', 'dark'].includes(t)) throw new UsageError(`Неизвестная тема «${t}». Доступно: light, dark`);
+  }
+  return [...new Set(items)];
+}