Învață Browser Use: Agenți Autonomi de Navigare & Web Automation: comenzi explicate cu exemple

Browser Use este biblioteca open-source de vârf pentru construirea de agenți web autonomi capabili să controleze un browser real (Chromium, Firefox, WebKit) la fel ca un operator uman. Folosind tehnica inovatoare Set-of-Marks (SoM) pentru numerotarea vizuală a elementelor interactive și combinând arborele de accesibilitate cu modele multimodale de viziune (Claude 3.5 Sonnet, GPT-4o), browser-use permite automatizarea oricărui flux web: completare de formulare, navigare multi-tab, extragere structurată de date, rezolvare de provocări de securitate și interacțiune cu aplicații web complexe fără API-uri formale.

👁️ Percepție Vizuală & Set-of-Marks

Numerotarea automată a butoanelor și câmpurilor interactive pe capturile de ecran, transformând geometria spațială într-o selecție numerică simplă și robustă.

⚡ Automatizare Nativa Playwright

Execuție rapidă și stabilă a evenimentelor de click, tastare, hover, drag-and-drop și derulare prin infrastructura oficială Playwright.

🗂️ Navigare Multi-Tab & Sesiuni

Deschiderea și comutarea între file paralele, descărcare de fișiere, salvarea cookie-urilor de sesiune și conectare la instanțe existente de Google Chrome.

🛠️ Extensibilitate prin Controller

Definirea de unelte personalizate Python prin @controller.action cu validare Pydantic, apeluri API, scriere în baze de date și integrare în echipaje CrewAI.

🚀 Instalare Rapidă Browser Use în Python

Instalați pachetul și descărcați browserul Chromium Playwright cu un singur set de comenzi:

# Instalare bibliotecă și drivere de automatizare
pip install browser-use playwright langchain-openai

# Descărcare binar Chromium Playwright
playwright install chromium

Arhitectura și Modul de Funcționare al Agenților Web

Un agent browser-use operează într-o buclă continuă de Percepție → Raționament → Acțiune → Verificare. Spre deosebire de uneltele clasice de web scraping care eșuează când selectorii CSS se schimbă, un agent multimodal „vede” ecranul și înțelege semantica interfeței exact așa cum o vede un utilizator uman, adaptându-se instantaneu la modificări de design sau ferestre pop-up neprevăzute.

Fluxul de Lucru Recomandat în 4 Pași:

Inițializare Mediu: Configurați instanța Browser (headless sau cu afișare pe ecran) și alegeți modelul multimodal (Claude 3.5 Sonnet sau GPT-4o).
Definire Obiectiv (Task): Formulați sarcina în limbaj natural clar, precizând adresa de plecare și pașii doriți.
Rulare Asincronă: Lansați execuția prin await agent.run(max_steps=25) și lăsați agentul să navigheze autonom.
Extragere Rezultate: Preluați datele structurate Pydantic din history.final_result() sau inspectați înregistrarea video generată.

Indexul Complet al Comenzilor, Metodelor și Ghidurilor Browser Use

Tabelul de mai jos centralizează toate noțiunile, acțiunile primitive, opțiunile de configurare a contextului și tehnicile de producție din ecosistemul Browser Use:

Acțiune / Noțiune Browser Use	Descriere Tehnică & Caz de Utilizare
Instalare, Inițializare & Arhitectură Agent
Instalarea Pachetului browser-use & Playwright `pip install browser-use playwright && playwright install`	Comanda standard de instalare pip a bibliotecii de agenți și a binariilor Playwright.
Instalarea și Verificarea Browserelor Playwright `playwright install chromium --with-deps`	Descărcarea binarilor Chromium și a dependențelor de sistem pe distribuții Linux/Ubuntu headless.
Structura și Parametrii Clasei de Bază Agent `from browser_use import Agent; agent = Agent(task="...", llm=llm)`	Obiectul central care coordonează bucla de percepție, apelurile către modelul multimodal și execuția acțiunilor.
Configurarea Modelelor cu Viziune (GPT-4o, Claude 3.5, Ollama) `llm = ChatAnthropic(model_name="claude-3-5-sonnet-20241022")`	Selectarea modelelor capabile să înțeleagă capturi de ecran și coordonate spațiale pe pagină.
Bucla Asincronă de Control: await agent.run() `history = await agent.run(max_steps=25)`	Lansarea execuției autonome și monitorizarea istoricului complet al pașilor parcurși.
Arhitectura Buclă: Percepție, Raționament, Acțiune, Verificare `# Loop: Inspect DOM & Screenshot -> LLM Decision -> Execute Action -> Verify State`	Ciclul continuu prin care agentul evaluează starea curentă a paginii și corectează erorile apărute.
Configurarea Cheilor de Mediu API (OPENAI_API_KEY) `export OPENAI_API_KEY="sk-..." && export ANTHROPIC_API_KEY="sk-ant-..."`	Securizarea credențialelor de acces la modelele lingvistice prin variabile de sistem.
Comutarea între Rulare Vizuală și Mod Headless `browser = Browser(config=BrowserConfig(headless=False))`	Afișarea ferestrei de navigare pe desktop în timpul dezvoltării vs rulare în fundal pe servere.
Încetinirea Vitezei de Execuție (slow_mo) `browser = Browser(config=BrowserConfig(slow_mo=1000))`	Adăugarea unei întârzieri artificiale de milisecunde între acțiuni pentru inspectare vizuală umană.
Personalizarea Instrucțiunilor de Sistem ale Agentului `agent = Agent(task="...", system_prompt_class=CustomSystemPrompt)`	Ghidarea comportamentului agentului: tonul limbajului, preferința pentru anumite limbi sau reguli etice de navigare.
Controlul Browserului & Instanța BrowserContext
Configurarea Avansată prin BrowserConfig `config = BrowserConfig(headless=True, disable_security=True, ...)`	Setările globale ale procesului de navigare: securitate, argumente Chromium și profile de utilizator.
Gestionarea Contextului Izolat prin BrowserContext `context = await browser.new_context()`	Separarea sesiunilor independente de navigare fără partajarea memoriei cache sau a cookie-urilor.
Setarea Rezoluției Ferestrei de Navigare (viewport) `viewport = {"width": 1280, "height": 1100}`	Alegerea rezoluției optime pentru capturi clare fără scalare excesivă a imaginii.
Configurarea unui Antet User-Agent Realist `user_agent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/..."`	Prevenirea blocării accesului pe site-urile care refuză traficul marcat cu HeadlessChrome.
Setarea Limbii și a Fusului Orar (locale & timezone) `locale = "ro-RO"; timezone_id = "Europe/Bucharest"`	Forțarea încărcării interfețelor în limba română și a formatării corecte a datelor și prețurilor în RON.
Acordarea Automată a Permisiunilor de Sistem `permissions = ["clipboard-read", "clipboard-write", "geolocation"]`	Evitarea alertelor modale care blochează interacțiunea cerând aprobarea utilizatorului pentru clipboard sau geolocație.
Păstrarea Sesiunilor prin user_data_dir `browser = Browser(config=BrowserConfig(chrome_instance_path="...", user_data_dir="./profil_chrome"))`	Stocarea istoricului, a sesiunilor de login și a cache-ului pe disc pentru reutilizare la următoarea pornire.
Conectarea la un Browser Google Chrome Deja Deschis `google-chrome --remote-debugging-port=9222`	Controlul browserului tău personal de zi cu zi prin protocolul Chrome DevTools (CDP).
Rularea în Ferestre Incognito Izolate `# Rulare în context volatil fără scriere pe disc`	Testarea fluxurilor de utilizator nou (first-time visitor) fără cookie-uri sau preferințe anterioare.
Rutarea Traficului prin Servere Proxy (HTTP / SOCKS5) `proxy = {"server": "http://proxy.exemplu.ro:8080", "username": "...", "password": "..."}`	Schimbarea adresei IP pentru accesarea conținutului restricționat geografic sau distribuirea cererilor.
Închiderea Ordonată a Resurselor (browser.close) `await browser.close()`	Eliberarea memoriei RAM și oprirea proceselor zombie Chromium la finalizarea sarcinii.
Percepție Vizuală, DOM & Arbore de Accesibilitate
Extragerea Simplificată a Arborelui DOM `dom_state = await page.get_dom_state()`	Filtrarea a mii de linii de HTML brut într-o reprezentare ierarhică curată cu elementele relevante.
Utilizarea Arborelui de Accesibilitate AXTree `# Utilizarea rolurilor ARIA (role='button', role='textbox', role='dialog')`	Identificarea rolurilor funcționale ale elementelor așa cum sunt percepute de cititoarele de ecran.
Capturarea Ecranului la Fiecare Pas de Navigare `screenshot_bytes = await page.screenshot()`	Preluarea imaginii curente a paginii pentru trimiterea către modelul multimodal de viziune.
Tehnica Set-of-Marks (SoM) pentru Numerotarea Elementelor `# Generare casete galbene numerotate [1], [2], [3] peste elementele interactive`	Inovația cheie din browser-use: etichetarea vizuală a elementelor pentru ca LLM-ul să comande acțiuni prin simple numere.
Calcularea Coordonatelor Bounding Boxes (x, y, w, h) `bbox = await element.bounding_box()`	Determinarea poziției exacte în pixeli pe ecran pentru desenarea etichetelor și centrarea derulării.
Evidențierea Elementelor Interactive pe Pagină `# Script JavaScript injectat în pagină pentru desenarea chenarelor vizuale`	Mecanismul intern care desenează chenare contrastante în jurul fiecărui control accesibil.
Filtrarea Tagurilor Inutile pentru Economie de Tokeni `# Eliminare automată`