Preskoči na glavni sadržaj

Top 3 popularnih Claude Code pregledačkih Agenta — probao sam sve, zaista su neobično moćni!

ErgeTehnički članciClaude CodeAgent BrowserAutomatizacija pregledača1858 reči6 minuta

Dok sam danas istraživao sposobnosti automatizacije u Claude Code-u, pomislio sam na veoma zanimljiv zahtev: može li Claude Code direktno da objavi članke koje sam napisao na sajt PaiCoding?

Ovo nije nešto što može da se reši jednostavnim HTTP zahtevom — potrebna je prijava, popunjavanje formulata, otpremanje slika, pregled, objavljivanje — čitav tok rada u pregledaču.

Iskreno, čim sam ovaj zahtev formulisao, dvoumio sam se: iako Claude Code može da piše, čita i menja kod, može li da izađe na kraj sa snažnim interaktivnim scenarijima kao što je automatizacija pregledača?

Nakon što sam sve isprobao, otkrio sam blago: Agent Browser.

Nije samo savršeno rešio moj zahtev za automatskim objavljivanjem, već je uštedeo oko 90% tokena u poređenju sa tradicionalnim Playwright rešenjem.

U današnjem članku proći ću sa vama kroz celo rešenje od početka do kraja, da vidite koliko je Claude Code + Agent Browser zaista moćan.

01. Poređenje rešenja za automatizaciju pregledača

Pre nego što pređemo na praksu, istražio sam trenutno najpopularnija rešenja za automatizaciju pregledača — uglavnom su tri:

DevTools MCP

Ovo je zvanično Google rešenje za debagovanje pregledača koje kontroliše Chrome putem Chrome DevTools Protokola.

Prednost je odlična integracija sa Chrome-om i lako debagovanje.

Playwright MCP

Playwright je Microsoftov okvir za automatizaciju pregledača, a ovo MCP rešenje ga jednostavno pretvara u alatku koju Claude Code može da poziva.

Playwright je veoma moćan, podržava Chrome, Firefox, Safari i razne pregledače, a API je takođe veoma kompletan.

Agent Browser

Ovo je alat za automatizaciju pregledača koji je objavio Vercel Labs i koji sam na kraju izabrao.

Njegova najveća inovacija je mehanizam zasnovan na referencama snimka stanja (snapshot-based references). Jednostavno rečeno, on dodeljuje referentnu oznaku svakom interaktivnom elementu na stranici — na primer @e1, @e2 — i dovoljno je da mu kažete "klikni na @e1" i on će ga precizno locirati, bez potrebe da znate konkretan DOM selektor.

Ovaj pristup je ne samo stabilan, već i izuzetno štedljiv sa tokenima. Za istu operaciju prijave, Agent Browser troši samo oko 500 tokena — 90% manje od Playwright-a.

Agent Browser takođe podržava Agent režim, koji omogućava kontrolu pregledača strukturiranim komandama, što ga čini idealnim za upotrebu uz Claude Code.

02. Instalacija i konfiguracija Agent Browser-a

Instalacija Agent Browser-a je veoma jednostavna — to je npm paket koji se instalira globalno:

npm install -g @agent-browser/cli

Nakon instalacije, možete izvršiti agent-browser --help da vidite sve dostupne komande.

Koristite agent-browser open paicoding.com da otvorite veb-stranicu, a agent-browser snapshot da dobijete reference interaktivnih elemenata na trenutnoj stranici.

Suštinski tok rada čini četiri koraka:

  1. agent-browser open <url> - otvaranje stranice
  2. agent-browser snapshot -i - dobijanje interaktivnih elemenata i njihovih referenci (@e1, @e2...)
  3. agent-browser click @e1 ili fill @e2 "text" - upravljanje elementima preko referenci
  4. Ponavljajte korake 2-3 dok ne završite sve operacije

Ovaj tok deluje jednostavno, ali postoji jedan veoma važan detalj: nakon svake promene na stranici (na primer nakon klika na dugme koje izaziva prelazak, ili nakon slanja formulara), morate ponovo izvršiti snapshot da biste dobili nove reference elemenata.

Zbog ovog detalja, ispočetka sam upao u mnoge zamke, koje ću detaljnije objasniti kasnije.

03. Praktičan primer automatskog objavljivanja na PaiCoding-u

Dobro, zasad smo završili sa principima — pređimo na praksu.

Naš cilj je: koristiti Claude Code da upravlja Agent Browser-om i završi kompletan tok prijave, kreiranja članka, popunjavanja sadržaja i objavljivanja na PaiCoding-u.

Prvo moram da razjasnim tok objavljivanja na PaiCoding-u:

  1. Otvaranje stranice za prijavu
  2. Unos korisničkog imena i lozinke, klik na prijavu
  3. Ulazak na stranicu za upravljanje člancima, klik na kreiranje novog članka
  4. Popunjavanje naslova, kategorije, oznaka, tela teksta
  5. Klik na objavljivanje

Ovaj tok ne deluje komplikovano, ali prilikom implementacije treba obratiti pažnju na mnoge detalje.

Korak 1: Implementacija logike prijave

Prvo implementiram funkcionalnost prijave — to je prvi korak celog toka.

U Claude Code-u unesite:

Pomoću agent-browser-a otvori stranicu za prijavu na PaiCoding, a zatim popuni korisničko ime i lozinku i prijavi se

Claude Code će automatski pozvati Bash alatku i izvršiti agent-browser komande.

Prvo otvorite stranicu za prijavu:

agent-browser open https://paicoding.com/login

Zatim dobijte elemente stranice:

agent-browser snapshot -i

Ova komanda će vratiti reference svih interaktivnih elemenata na stranici, na primer:

@e1: polje za unos - korisničko ime
@e2: polje za unos - lozinka
@e3: dugme - prijava

Zatim unesite korisničko ime i lozinku:

agent-browser fill @e1 "myusername"
agent-browser fill @e2 "mypassword"
agent-browser click @e3

Ja sam već prijavljen, tako da Agent ne može da pronađe dugme za prijavu, hahaha.

Korak 2: Čuvanje sesije prijave

Agent Browser nudi funkciju čuvanja sesije — omogućava čuvanje kolačića nakon prijave, pa ih sledeći put možete direktno iskoristiti.

Čuvanje sesije:

# Dobij trenutne kolačiće
agent-browser cookies get

# Sačuvaj u datoteku
agent-browser cookies save ~/.paicoding-state.json

Sledeći put ih jednostavno učitajte:

agent-browser --state ~/.paicoding-state.json open https://paicoding.com

Ova funkcija je veoma praktična — svi moji kasniji koraci zasnovani su na ovoj prijavljenoj sesiji, što eliminiše potrebu za ponovljenom prijavom.

Najveća zbunjujuća stvar pri upravljanju pregledačem iz komandne linije je upravo to — ne pamti kolačiće, pa mnogi sadržaji ne mogu da se pregledaju, jer mnogi delovi sajta zahtevaju prijavu.

Korak 3: Pisanje članka i popunjavanje osnovnih informacija

Nakon što rešimo pitanje prijave, sledeće je objavljivanje članka. Jednom rečenicom gotovo:

Objavi članak kuaishou-year-end-bonus na PaiCoding-u

Claude Code će generisati niz agent-browser komandi, na primer pronaći dugme "Novi članak" i kliknuti na njega:

agent-browser open https://paicoding.com/admin/articles
agent-browser snapshot -i
agent-browser click @e4  # pretpostavimo da je @e4 dugme za novi članak

Zatim kliknite na dugme [Uvezi MD] i otpremite datoteku članka:

agent-browser snapshot -i
agent-browser click @e5  # pretpostavimo da je @e5 dugme za uvoz MD-a
agent-browser upload @e6 "/path/to/kuaishou-year-end-bonus.md"

Zatim se popunjavaju sadržaj, naslov, kategorija, oznake, sažetak i ostale informacije:

agent-browser snapshot -i
agent-browser fill @e7 "Naslov članka"
agent-browser fill @e8 "Sažetak članka"
agent-browser select @e9 "Naziv kategorije"
agent-browser fill @e10 "oznaka1, oznaka2"

Ovim je završen čitav tok automatskog objavljivanja.

04. Sažeto iskustvo sa Skills

Da bismo ovu sposobnost automatizacije učinili trajnom, odlučio sam da napravim Claude Code Skill.

Jednostavno recite Claude Code-u da sažmemo vaše iskustvo u Skills i on će pozvati alat /create-skill koju smo ranije delili.

U direktorijumu .claude/skills/ napravite folder paicoding-publish, a zatim kreirajte datoteku SKILL.md:

# Skill za automatsko objavljivanje na PaiCoding

## Opis funkcionalnosti
Skill koji automatski objavljuje Markdown članke na sajtu PaiCoding.

## Preduslovi
- agent-browser je instaliran: `npm install -g @agent-browser/cli`
- Nalog na PaiCoding-u je konfigurisan u promenljivama okruženja
- Putanja do datoteke članka se prosleđuje kao parametar

## Tok rada
1. Pomoću agent-browser-a otvori stranicu za prijavu na PaiCoding
2. Pomoću snapshot-a dobij reference elemenata formulara za prijavu
3. Unesi korisničko ime i lozinku i prijavi se
4. Uđi na stranicu za upravljanje člancima, klikni na novi članak
5. Popuni informacije o članku i objavi

Kroz ovu praksu, sažeo sam nekoliko iskustava vezanih za pisanje Claude Code Skill-ova, koja bi vam mogla pomoći.

Iskustvo 1: Razmotrite asinhrono čekanje između komandi

Automatizacija pregledača uključuje mnogo mrežnih zahteva i renderovanje stranica — većina operacija je asinhrona.

Pri pisanju Skill-a, za svaku komandu treba razmotriti da li je potrebno čekanje. Možete koristiti sleep komandu ili iskoristiti mehanizam čekanja Agent Browser-a.

Iskustvo 2: Koristite snapshot, ne hard-kodirajte selektore

Nemojte u Skill-u hard-kodirati DOM selektore, kao što su #username, .submit-button i slično.

Struktura stranice se može promeniti u svakom trenutku, a hard-kodirani selektori lako postaju nevažeći.

Trebalo bi pre svake operacije izvršiti snapshot i dobiti dinamičke reference elemenata, tako da čak i ako se struktura stranice promeni, skripta i dalje radi normalno.

Iskustvo 3: Upravljanje sesijom je važno

Za sisteme koji zahtevaju prijavu, obavezno dobro organizujte upravljanje sesijom.

Možete u dokumentaciji Skill-a navesti korisnika da sačuva datoteku sesije, ili pak unutar Skill-a automatski sačuvati i učitati sesiju.

To izbegava potrebu za ponovljenom prijavom i poboljšava korisničko iskustvo.

Iskustvo 4: Obrada grešaka i mehanizam ponovnog pokušaja

Operacije u pregledaču lako mogu da ne uspeju — na primer zbog isteka mreže, nepostojećeg elementa, spore ucitavanja stranice itd.

U Skill-u treba dodati odgovarajuću obradu grešaka i mehanizam ponovnog pokušaja, na primer:

# Logika ponovnog pokušaja
for i in {1..3}; do
  agent-browser snapshot -i && break
  sleep 1
done

Ovo značajno povećava stabilnost Skill-a.

Iskustvo 5: Pružite jasne korake objašnjenja

Dokumentacija Skill-a treba jasno da objasni šta se radi u svakom koraku i zašto se tako radi.

Tako korisnici ne samo da mogu koristiti Skill, već i razumeju principe koji stoje iza njega, pa mogu samostalno da rešavaju probleme kada naiđu na njih.

05. ending

Iskreno, kombinacija Claude Code + Agent Browser je mnogo moćnija nego što sam mislio.

U početku sam mislio da AI ne može da izađe na kraj sa snažnim interaktivnim scenarijima kao što je automatizacija pregledača. Ali nakon što sam probao, otkrio sam da, ako se izabere pravi alat, AI ne samo da može to da uradi, već može i da uradi vrlo dobro.

Mehanizam snapshot-based references Agent Browser-a savršeno izbegava krhkost tradicionalnih alata za automatizaciju, a potrošnja tokena je izuzetno niska — što je u eri velikih modela posebno važno.

Skill za automatsko objavljivanje koji sam ovaj put implementirao, od istraživanja rešenja do implementacije, trajao je oko jedan dan. Ali jednom kada je Skill napisan, svako sledeće objavljivanje traje samo nekoliko minuta — poboljšanje efikasnosti je jasno vidljivo.

Za one koji još nisu iskusili Claude Code, vreme je da ga probate. Automatizacija pregledača, operacije nad datotekama, refaktorisanje koda — sa svim ovim scenarijima lako izlazi na kraj.

Ako imate slične potrebe za automatizacijom, probajte da ih implementirate pomoću Claude Code + Agent Browser — možda ćete otkriti neočekivane dobitke.

Ako vam je ovaj sadržaj koristan, zapamtite da lajkujete i podelite, kako ga vide više ljudi.

vidimo se u sledećem!