Технології6 хв читання

Vision-first проти CSS-селекторів: чому кліки за координатами надійніші

Селектори ламаються при будь-якій зміні верстки. Vision-аналіз зберігає стабільність автоматизації, знаходячи елементи зі скріншотів, а не з крихких DOM-шляхів.

8 квіт. 2026 р.

Проблема селекторів у антидетект-робочих процесах

CSS-селектори — це стандартний спосіб, яким інструменти автоматизації знаходять елементи на сторінці. Ви пишете шлях на кшталт `button.submit-btn` або `#login-form input[name="email"]`, і скрипт клікає або заповнює його. Це працює, поки розмітка не змінюється — а в антидетект-робочих процесах розмітка змінюється постійно.

Різні браузер-профілі можуть бачити різні версії сторінки. A/B-тести, геотаргетовані макети, банери згоди, виклики виявлення ботів і динамічні імена класів — все це зміщує DOM між сеансами. Селектор, який працює в профілі #1, може не існувати в профілі #12.

Чому селектори ламаються частіше, ніж ви думаєте

Динамічні імена класів — Фреймворки на кшталт React, Next.js і Tailwind генерують хешовані або утилітарні класи, які змінюються між збірками. Селектор, спрямований на `.css-1a2b3c`, перестає працювати після наступного розгортання.
A/B-тестування — Один і той же URL може видавати абсолютно різні DOM-структури різним відвідувачам. Ваш селектор припускає один варіант; сторінка показує інший.
Банери згоди та cookies — Ці оверлеї внедряють нові елементи, зміщують z-індекси і іноді обертають всю сторінку в контейнер, якого не було, коли ви писали селектор.
Оверлеї виявлення ботів — Cloudflare-виклики, DataDome-інтерстиціали та подібні системи замінюють вміст сторінки своєю розміткою. Ніяка настройка селектора не допоможе, коли самої сторінки більше немає.
Різниці за локаллю та геолокацією — RTL-макети, перекладений текст кнопок і регіональні компоненти UI — все це змінює дерево DOM.

У однобраузерному скрипті ви помічаєте і виправляєте ці проблеми одну за одною. У пакеті з 50 профілів зламаний селектор мовчки не спрацьовує в десятках сеансів, перш ніж хтось це помітить.

Як працює взаємодія, орієнтована на зір

Орієнтована на зір означає, що ШІ робить знімок екрана сторінки і аналізує його візуально — так само, як людина дивиться на екран. Замість пошуку в DOM конкретного селектора він визначає елементи за їхнім виглядом: "синя кнопка Sign Up в центрі сторінки".

Процес прямолінійний:

Зробити знімок екрана поточного стану сторінки
Відправити його моделі зору, яка визначає інтерактивні елементи та їхні позиції
Повернути нормалізовані обмежувальні прямокутники (координати) для кожного виявленого елемента
Клікнути, навести або взаємодіяти, використовуючи ці координати — пошук у DOM не потрібен

// Vision-first click flow
await browser_parallel_navigate({ url: "https://target.example/signup" });
const grouped = await browser_parallel_vision_analyze_grouped();
// AI identifies elements visually across all active browsers
// Returns normalized bounding boxes for each element
await browser_parallel_click_normalized_box({ box: signUpButton.box });

Клік за координатами vs клік за селектором

Клік за селектором говорить "знайди елемент за цим шляхом у DOM і клікни його". Клік за координатами говорить "клікни в цю позицію на екрані". Різниця має значення, коли сторінки розходяться.

Підхід на основі селекторів

// Breaks if class name changes, element moves, or overlay appears
await page.click("button.btn-primary.submit-action");
// Breaks if form structure changes
await page.fill("#signup-form input[type=email]", "user@mail.com");

Підхід на основі зору

// Works regardless of class names, IDs, or DOM structure
await browser_parallel_screenshot();
const analysis = await browser_parallel_vision_analyze_grouped();
// AI finds "Sign Up" button visually — same as a human would
await browser_parallel_click_normalized_box({ box: analysis.signUp.box });

Підхід на основі зору не хвилюють імена класів, ID або глибина вкладеності. Якщо кнопка видима на екрані, вона буде знайдена. Це особливо потужно в антидетект-сценаріях, де кожен профіль може відрендерити дещо іншу сторінку.

Груповий аналіз для пакетних операцій

При запуску 20+ браузер-профілів паралельно аналіз зору повинен бути ефективним. Ornold використовує груповий аналіз — він бере знімки екрана з усіх активних сеансів, відправляє їх пакетом моделі зору і повертає результати для кожного сеансу в одному виклику.

Це важливо з двох причин:

Ефективність — Один виклик API обробляє всі сеанси замість N окремих викликів. Затримка залишається приблизно постійною незалежно від розміру пакета.
Обробка розходжень — ШІ бачить фактичний стан кожного сеансу. Якщо профіль #7 має оверлей CAPTCHA, а інші показують форму, груповий результат це відображає. Ви можете розгалужувати логіку для кожного сеансу замість припущення, що всі сторінки виглядають однаково.

// Grouped vision analysis across all active browsers
const results = await browser_parallel_vision_analyze_grouped();
// results.groups shows which browsers are in which state
// e.g., 15 browsers on the form, 3 on CAPTCHA, 2 on error page

Коли режим DOM все ще перемагає

Аналіз зору — не завжди правильний вибір. Взаємодія на основі DOM (режим за замовчуванням Ornold) швидша, безплатна і абсолютно надійна для структурованих сторінок зі стабільною розміткою.

Використовуйте режим DOM, коли:

Цільова сторінка має стабільний, передбачуваний HTML (наприклад, ваше власне додаток, відомі платформи)
Ви заповнюєте форми з чіткими полями введення та мітками
Швидкість важливіша за стійкість — DOM-знімки миттєві, аналіз зору займає 1-3 секунди
Ви хочете уникнути витрат на vision-кредити

Використовуйте режим Vision, коли:

Сторінки різняться між профілями (A/B-тести, геотаргетування, динамічні макети)
Ви маєте справу з canvas-інтерфейсами, сторінками, багатими на зображення, або користувацькими веб-компонентами
Селектори постійно ламаються і вартість обслуговування висока
Вам потрібно перевірити, як насправді виглядає сторінка (візуальний QA)

Ви можете включити обидва режими одночасно. ШІ-агент автоматично вибирає найкращий підхід для кожної дії — DOM для простого заповнення форм, зір для складних або непередбачуваних сторінок.

Порівняння в реальному світі

Ось що відбувається на практиці при запуску потоку реєстрації в 30 сеансах Linken Sphere:

Автоматизація на основі селекторів

25 з 30 сеансів завершуються успішно
3 не спрацьовують, тому що банер згоди змістив макет форми
1 не спрацьовує, тому що Cloudflare видав інтерстиціальну сторінку
1 не спрацьовує, тому що сайт розгорнув нову версію під час запуску з іншими іменами класів
Всього: 83% успіху. Потрібне ручне втручання для 5 сеансів.

Автоматизація на основі зору

29 з 30 сеансів завершуються успішно
1 не спрацьовує, тому що сторінка не завантажилася (timeout мережі — не проблема селектора)
Банери згоди, зміщення макету та зміни імен класів не мали жодного ефекту
Всього: 97% успіху. Потрібен один повтор для timeout.

Розрив збільшується зі зростанням розміру пакета. При 50+ профілях автоматизація на основі селекторів зазвичай потребує постійного обслуговування. Автоматизація на основі зору залишається стабільною, тому що адаптується до того, що насправді на екрані.

Налаштування режиму Vision в Ornold

Включіть режим vision при підключенні вашого ШІ-агента до Ornold MCP. У майстрі панелі управління виберіть "Обидва режими" на кроці 2, щоб отримати інструменти DOM + Vision. Або додайте прапор вручну:

# Claude Code — enable both DOM and Vision modes
claude mcp add --transport stdio ornold-browser -- npx ornold-mcp --token YOUR_TOKEN --mode both --linken-port 40080

# Codex — in config.toml
[mcp_servers.ornold-browser]
command = "npx"
args = ["ornold-mcp", "--token", "YOUR_TOKEN", "--mode", "both", "--linken-port", "40080"]

Кожен аналіз зору коштує 1 кредит. DOM-знімки безплатні. З включеним режимом "обидва", ШІ-агент використовує DOM за замовчуванням і переходить на зір лише при необхідності.

Ключові висновки

CSS-селектори припускають стабільний DOM. В антидетект-робочих процесах DOM — все, але не стабільний.
Взаємодія, орієнтована на зір, знаходить елементи за виглядом, а не за шляхом. Вона автоматично адаптується до змін макету, оверлеїв та A/B-тестів.
Груповий аналіз зору обробляє розходження пакета — кожен сеанс аналізується на основі його фактичного стану.
Режим DOM — все ще найкращий вибір за замовчуванням для швидкості та вартості. Використовуйте зір, коли сторінки непередбачувані або селектори постійно ламаються.
Обидва режими можуть співіснувати. Дозвольте ШІ-агенту вибрати правильний інструмент для кожної дії.