Неуязвимая автоматизация браузера: Визуальное заземление и рамки в Playwright

// Скрипт фильтрации и подсветки элементов на клиенте
function injectVisualBoundingBoxes() {
  const candidates = document.querySelectorAll('button, a, input, [role="button"], [tabindex="0"]');
  let tagId = 1;

  for (const el of candidates) {
    const rect = el.getBoundingClientRect();
    if (rect.width < 12 || rect.height < 12) continue;
    
    // Проверка на перекрытие
    const centerX = rect.left + rect.width / 2;
    const centerY = rect.top + rect.height / 2;
    const topEl = document.elementFromPoint(centerX, centerY);
    if (!topEl || !el.contains(topEl) && !topEl.contains(el)) continue;

    // Отрисовка рамки
    const box = document.createElement('div');
    box.className = '__ai_bbox_marker';
    box.style.position = 'fixed';
    box.style.left = rect.left + 'px';
    box.style.top = rect.top + 'px';
    box.style.width = rect.width + 'px';
    box.style.height = rect.height + 'px';
    box.style.border = '2px solid #00e5ff';
    box.style.pointerEvents = 'none';
    box.style.zIndex = '9999999';
    box.innerHTML = `<span style="background:#00e5ff;color:#000;font-size:11px;font-weight:bold;padding:0 3px;">${tagId}</span>`;
    document.body.appendChild(box);
    el.setAttribute('data-ai-tag', tagId);
    tagId++;
  }
}