
Emma Foster
Machine Learning Engineer

Agen browser AI sedang mengubah cara pengembang berinteraksi dengan web. Dari pengambilan data hingga otomatisasi alur kerja, agen-agen ini menelusuri halaman, mengisi formulir, dan mengekstrak informasi tanpa intervensi manusia. Tapi ketika CAPTCHA muncul, agen tersebut berhenti.
HyperBrowser menawarkan infrastruktur browser berbasis cloud yang dirancang khusus untuk agen AI, dengan penyelesaian CAPTCHA native untuk Turnstile dan reCAPTCHA. Tapi web memiliki lebih dari dua jenis CAPTCHA. AWS WAF, GeeTest, varian reCAPTCHA perusahaan, dan tantangan anti-bot lainnya masih tidak terselesaikan oleh alat native sendiri.
CapSolver mengisi celah ini. Dengan mengunggah ekstensi CapSolver Chrome langsung ke HyperBrowser melalui API ekstensinya, Anda mendapatkan cakupan CAPTCHA menyeluruh di setiap sesi, setiap jenis CAPTCHA, dan setiap skala, tanpa mengubah kode otomatisasi Anda.
HyperBrowser adalah platform infrastruktur browser berbasis cloud yang dirancang khusus untuk agen AI. Menyediakan sesi browser yang dikelola dengan akses CDP (Chrome DevTools Protocol) native, dukungan proxy, dan kemampuan anti-pendeteksian secara bawaan.
HyperBrowser menghilangkan beban operasional otomatisasi browser. Alih-alih mengelola biner Chromium, konfigurasi headless, rotasi proxy, dan anti-fingerprinting, Anda mendapatkan API bersih yang mengembalikan URL WebSocket. Hubungkan skrip Playwright atau Puppeteer dan mulai otomatisasi.
CapSolver adalah layanan penyelesaian CAPTCHA terkemuka yang menyediakan solusi berbasis AI untuk mengatasi berbagai tantangan CAPTCHA. Dengan dukungan berbagai jenis CAPTCHA dan waktu respons cepat, CapSolver terintegrasi dengan mulus ke dalam alur kerja otomatis.
Sebelum mengatur integrasi, pastikan Anda memiliki:
@hyperbrowser/sdk dan playwright-core terinstalnpm install @hyperbrowser/sdk playwright-core
CAP-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX)Unduh ekstensi CapSolver Chrome dan konfigurasikan dengan API key Anda:
CapSolver.Browser.Extension-chrome-vX.X.X.zipmkdir -p capsolver-extension
unzip CapSolver.Browser.Extension-chrome-v*.zip -d capsolver-extension/
capsolver-extension/assets/config.js dan atur API key Anda:export const defaultConfig = {
apiKey: 'CAP-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX', // kunci Anda di sini
useCapsolver: true,
// ... sisa konfigurasi
};
ls capsolver-extension/manifest.json
# Harus ada
API unggah ekstensi HyperBrowser memerlukan file ZIP. Paket ekstensi yang dikonfigurasi:
cd capsolver-extension && zip -r ../capsolver-extension.zip . && cd ..
Ini menciptakan capsolver-extension.zip di akar proyek Anda, siap untuk diunggah.
Gunakan SDK HyperBrowser untuk mengunggah file ZIP ekstensi. Ini hanya perlu dilakukan sekali — extensionId yang dikembalikan bisa digunakan kembali di semua sesi.
import { Hyperbrowser } from "@hyperbrowser/sdk";
const client = new Hyperbrowser({
apiKey: process.env.HYPERBROWSER_API_KEY,
});
// Unggah ekstensi CapSolver (operasi sekali)
const ext = await client.extensions.create({
filePath: "capsolver-extension.zip",
});
console.log("ID Ekstensi:", ext.id);
// Simpan ID ini — Anda akan menggunakannya kembali untuk setiap sesi
Tips: Simpan
ext.iddalam variabel lingkungan atau konfigurasi Anda. Anda hanya perlu mengunggah ulang jika mengubah versi ekstensi atau API key.
Buat sesi HyperBrowser yang memuat ekstensi CapSolver:
const session = await client.sessions.create({
extensionIds: [ext.id],
useProxy: true, // Memerlukan rencana berbayar — hapus untuk tier gratis
solveCaptchas: false, // Menggunakan CapSolver alih-alih penyelesaian native
});
console.log("ID Sesi:", session.id);
console.log("URL WebSocket:", session.wsEndpoint);
Catatan: Atur solveCaptchas: false saat menggunakan CapSolver untuk menghindari konflik antara dua mekanisme penyelesaian. Jika Anda ingin keduanya sebagai rantai cadangan, lihat bagian "Kapan Menggunakan Native vs CapSolver" di bawah ini.
Hubungkan Playwright ke sesi HyperBrowser melalui endpoint WebSocket:
import { chromium } from "playwright-core";
const browser = await chromium.connectOverCDP(session.wsEndpoint);
const context = browser.contexts()[0];
const page = context.pages()[0] || await context.newPage();
// Navigasi ke halaman yang dilindungi CAPTCHA
await page.goto("https://www.google.com/recaptcha/api2/demo");
// Tunggu ekstensi CapSolver mendeteksi dan menyelesaikan CAPTCHA
await page.waitForTimeout(30000);
// Kirim formulir
await page.click("#recaptcha-demo-submit");
await page.waitForLoadState("networkidle");
// Verifikasi keberhasilan
const result = await page.textContent("body");
console.log("Hasil:", result);
// Harapan: berisi "Verification Success"
await browser.close();
await client.sessions.stop(session.id);
Berikut adalah skrip end-to-end lengkap yang mengunggah ekstensi, membuat sesi, menyelesaikan CAPTCHA, dan memverifikasi hasilnya:
import { Hyperbrowser } from "@hyperbrowser/sdk";
import { chromium } from "playwright-core";
const HYPERBROWSER_API_KEY = process.env.HYPERBROWSER_API_KEY!;
const CAPSOLVER_EXTENSION_ID = process.env.CAPSOLVER_EXTENSION_ID; // Opsional: gunakan ID yang sudah ada
async function main() {
const client = new Hyperbrowser({ apiKey: HYPERBROWSER_API_KEY });
// Langkah 1: Unggah ekstensi (atau gunakan ID yang sudah ada)
let extensionId = CAPSOLVER_EXTENSION_ID;
if (!extensionId) {
const ext = await client.extensions.create({
filePath: "capsolver-extension.zip",
});
extensionId = ext.id;
console.log("Ekstensi diunggah:", extensionId);
}
// Langkah 2: Buat sesi dengan ekstensi CapSolver
const session = await client.sessions.create({
extensionIds: [extensionId],
useProxy: true, // Memerlukan rencana berbayar — hapus untuk tier gratis
solveCaptchas: false,
});
console.log("Sesi dimulai:", session.id);
// Langkah 3: Hubungkan Playwright
const browser = await chromium.connectOverCDP(session.wsEndpoint);
const context = browser.contexts()[0];
const page = context.pages()[0] || await context.newPage();
try {
// Langkah 4: Navigasi ke demo reCAPTCHA
console.log("Mengarah ke demo reCAPTCHA...");
await page.goto("https://www.google.com/recaptcha/api2/demo");
// Langkah 5: Tunggu CapSolver menyelesaikan CAPTCHA
console.log("Menunggu CapSolver menyelesaikan CAPTCHA...");
await page.waitForTimeout(30000);
// Langkah 6: Kirim formulir
console.log("Mengirim formulir...");
await page.click("#recaptcha-demo-submit");
await page.waitForLoadState("networkidle");
// Langkah 7: Periksa hasil
const bodyText = await page.textContent("body");
if (bodyText?.includes("Verification Success")) {
console.log("CAPTCHA diselesaikan dengan sukses!");
} else {
console.log("Hasil verifikasi:", bodyText?.slice(0, 200));
}
} finally {
await browser.close();
await client.sessions.stop(session.id);
console.log("Sesi dihentikan.");
}
}
main().catch(console.error);
Jalankan itu:
HYPERBROWSER_API_KEY=your_key npx tsx captcha-test.ts
Berikut alur lengkap dari unggah ekstensi hingga penyelesaian CAPTCHA:
Pengaturan Sekali
═══════════════════════════════════════════════════════
capsolver-extension/ HyperBrowser Cloud
├── manifest.json ──ZIP──► POST /extensions
├── assets/config.js │
└── background.js ▼
extensionId: "ext_abc123"
(disimpan, bisa digunakan kembali)
Alur Sesi Per-Sesi
═══════════════════════════════════════════════════════
Skrip Anda HyperBrowser Cloud
─────────────────────────────────────────────────────
sessions.create({ ──► Mulai Chromium berbasis cloud
extensionIds: [id], │
useProxy: true ├── Muat ekstensi CapSolver
}) ├── Terapkan proxy + stealth
▼
◄── wsEndpoint (URL WebSocket)
playwright.connectOverCDP() Terhubung ke browser cloud
│
▼
page.goto(target_url) ──► Chromium memuat halaman
┌─────────────────────────────┐
│ Halaman dengan widget CAPTCHA │
│ │
│ Ekstensi CapSolver: │
│ 1. Skrip konten mendeteksi │
│ jenis CAPTCHA di halaman │
│ 2. Pekerja layanan memanggil │
│ API CapSolver │
│ 3. Token solusi diterima │
│ 4. Token dimasukkan ke │
│ bidang formulir tersembunyi │
└─────────────────────────────┘
│
page.waitForTimeout(30s) │ (penyelesaian terjadi di sini)
│ │
▼ ▼
page.click("Submit") ──► Form mengirimkan dengan token yang valid
│
◄── ▼
Google demo: "Verification Success!"
Pendekatan ekstensi Chrome CapSolver memiliki keunggulan utama dibandingkan penyelesaian berbasis API: ekstensi berjalan di dalam konteks browser itu sendiri. Ini berarti:
createTask() / getTaskResult() / logika injeksi — semuanya ditangani oleh ekstensi// Komprehensif: ekstensi CapSolver
const session = await client.sessions.create({
extensionIds: [capsolverExtId],
solveCaptchas: false,
useProxy: true, // Memerlukan rencana berbayar — hapus untuk tier gratis
});
Untuk keandalan maksimal, Anda dapat mengaktifkan keduanya. Penyelesaian native menangani Turnstile/reCAPTCHA tanpa biaya tambahan, dan CapSolver menangani yang lainnya:
// Kedua-duanya: keduanya diaktifkan
const session = await client.sessions.create({
extensionIds: [capsolverExtId],
solveCaptchas: true, // Native menangani Turnstile/reCAPTCHA
useProxy: true, // Memerlukan rencana berbayar — hapus untuk tier gratis
// Ekstensi CapSolver menangani AWS WAF, GeeTest, dll.
});
Catatan: Ketika keduanya diaktifkan untuk jenis CAPTCHA yang sama (misalnya reCAPTCHA), yang menyelesaikan terlebih dahulu menang. Dalam praktiknya, ini berjalan dengan baik — tidak ada konflik.

Jika Anda lebih suka tidak menggunakan ekstensi browser — atau membutuhkan kontrol yang lebih halus terhadap alur penyelesaian — Anda dapat menggunakan API REST CapSolver secara langsung. Ini bekerja dengan sesi HyperBrowser apa pun, tanpa perlu mengunggah ekstensi.
const HYPERBROWSER_API_KEY = process.env.HYPERBROWSER_API_KEY!;
const CAPSOLVER_API_KEY = process.env.CAPSOLVER_API_KEY!;
async function solveCaptchaViaAPI(
pageUrl: string,
siteKey: string
): Promise<string> {
// Buat tugas
const createRes = await fetch("https://api.capsolver.com/createTask", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
clientKey: CAPSOLVER_API_KEY,
task: {
type: "ReCaptchaV2TaskProxyLess",
websiteURL: pageUrl,
websiteKey: siteKey,
},
}),
});
const { taskId, errorDescription } = await createRes.json();
if (!taskId) throw new Error(createTask gagal: ${errorDescription});
// Poll untuk hasil
for (let i = 0; i < 40; i++) {
await new Promise((r) => setTimeout(r, 3000));
const resultRes = await fetch("https://api.capsolver.com/getTaskResult", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ clientKey: CAPSOLVER_API_KEY, taskId }),
});
const result = await resultRes.json();
if (result.status === "ready") {
return result.solution.gRecaptchaResponse;
}
}
throw new Error("Waktu habis");
}
async function main() {
const client = new Hyperbrowser({ apiKey: HYPERBROWSER_API_KEY });
// Tidak perlu ekstensi — sesi biasa saja
const session = await client.sessions.create({
solveCaptchas: false,
});
const browser = await chromium.connectOverCDP(session.wsEndpoint);
const context = browser.contexts()[0];
const page = context.pages()[0] || await context.newPage();
try {
await page.goto("https://www.google.com/recaptcha/api2/demo");
// Deteksi sitekey dari DOM
const siteKey = await page.evaluate(() => {
const el = document.querySelector(".g-recaptcha[data-sitekey]");
return el?.getAttribute("data-sitekey") ?? "";
});
console.log("Sitekey:", siteKey);
// Selesaikan via API CapSolver
const token = await solveCaptchaViaAPI(page.url(), siteKey);
console.log("Token diterima, panjang:", token.length);
// Sisipkan token
await page.evaluate((t) => {
const textarea = document.querySelector(
'textarea[name="g-recaptcha-response"]'
);
if (textarea) (textarea as HTMLTextAreaElement).value = t;
}, token);
// Kirim
await page.click("#recaptcha-demo-submit");
await page.waitForLoadState("networkidle");
const body = await page.textContent("body");
console.log(
body?.includes("Verification Success")
? "CAPTCHA diselesaikan via API!"
: body?.slice(0, 200)
);
} finally {
await browser.close();
await client.sessions.stop(session.id);
}
}
main().catch(console.error);
### Kapan Menggunakan API vs Ekstensi
| | Ekstensi | API |
|---|---|---|
| **Pengaturan** | Unggah ZIP sekali, gunakan ID | Tidak perlu pengaturan — hanya API key |
| **Deteksi** | Otomatis (content script) | Manual (query DOM untuk sitekey) |
| **Injeksi token** | Otomatis | Manual (eval JS) |
| **Kontrol** | Tidak transparan — ekstensi menangani semua | Kontrol penuh atas setiap langkah |
| **Terbaik untuk** | Otomasi set-and-forget | Logika penyelesaian kustom, strategi ulang |
---
## Troubleshooting
### Ekstensi Tidak Dimuat dalam Sesi
**Gejala**: CAPTCHA tidak diselesaikan; halaman berperilaku seperti tidak ada ekstensi.
**Kemungkinan penyebab**:
1. **ID ekstensi salah** -- Verifikasi ID yang dikembalikan dari `client.extensions.create()` dikirimkan dengan benar
2. **ZIP rusak** -- Ulangi pengarsipan direktori ekstensi (pastikan `manifest.json` berada di akar ZIP, bukan di subfolder)
3. **API key tidak ada** -- Periksa bahwa `assets/config.js` memiliki kunci CapSolver yang valid sebelum mengarsip
**Perbaikan**:
```bash
# Verifikasi struktur ZIP -- manifest.json harus di akar
unzip -l capsolver-extension.zip | head -20
# Harus menunjukkan: manifest.json (BUKAN capsolver-extension/manifest.json)
Gejala: Halaman dimuat, tetapi CAPTCHA tetap tidak diselesaikan setelah menunggu.
Kemungkinan penyebab:
waitForTimeout menjadi 45-60 detikGejala: chromium.connectOverCDP() melemparkan kesalahan koneksi.
Perbaikan: Pastikan sesi masih aktif. Sesi memiliki timeout (default tergantung paket). Buat sesi baru jika sesi sebelumnya habis:
try {
const browser = await chromium.connectOverCDP(session.wsEndpoint);
} catch (err) {
console.log("Sesi habis, membuat yang baru...");
const newSession = await client.sessions.create({
extensionIds: [extensionId],
useProxy: true, // Memerlukan paket berbayar — hapus untuk tier gratis
});
const browser = await chromium.connectOverCDP(newSession.wsEndpoint);
}
Gejala: Ekstensi CapSolver berjalan saat dimuat lokal di Chrome, tetapi gagal di sesi HyperBrowser.
Kemungkinan penyebab:
config.js tidak termasuk dalam ZIP -- Periksa kembali ZIP mencakup assets/config.js yang dimodifikasiapi.capsolver.com. Pastikan jaringan sesi HyperBrowser mengizinkan HTTPS keluarUnggah ekstensi adalah satu kali. Simpan extensionId yang dikembalikan dan gunakan kembali di semua sesi:
// Unggah sekali
const ext = await client.extensions.create({ filePath: "capsolver-extension.zip" });
const CAPSOLVER_EXT_ID = ext.id;
// Gunakan di setiap sesi
for (const url of targetUrls) {
const session = await client.sessions.create({
extensionIds: [CAPSOLVER_EXT_ID],
useProxy: true, // Memerlukan paket berbayar — hapus untuk tier gratis
});
// ... otomasi
await client.sessions.stop(session.id);
}
CAPTCHA lebih mungkin muncul (dan lebih sulit diselesaikan) saat permintaan berasal dari IP datacenter. Proksi bawaan HyperBrowser membantu:
const session = await client.sessions.create({
extensionIds: [extensionId],
useProxy: true, // Memerlukan paket berbayar — hapus untuk tier gratis. Proksi residensial mengurangi frekuensi CAPTCHA
});
Jenis CAPTCHA berbeda-beda waktu penyelesaian:
| Jenis CAPTCHA | Waktu Penyelesaian Khas | Waktu Tunggu Direkomendasikan |
|---|---|---|
| reCAPTCHA v2 (checkbox) | 5-15 detik | 30 detik |
| reCAPTCHA v2 (invisible) | 5-15 detik | 25 detik |
| reCAPTCHA v3 | 3-10 detik | 20 detik |
| Cloudflare Turnstile | 3-10 detik | 20 detik |
| AWS WAF | 5-15 detik | 30 detik |
| GeeTest v3/v4 | 5-20 detik | 30 detik |
Tips: Jika ragu, gunakan 30 detik. Lebih baik menunggu sedikit lebih lama daripada mengirim terlalu dini.
Setiap penyelesaian CAPTCHA memakan kredit. Tambahkan pemeriksaan saldo ke otomasi Anda untuk menghindari gangguan:
import axios from "axios";
async function checkBalance(apiKey: string): Promise<number> {
const response = await axios.post("https://api.capsolver.com/getBalance", {
clientKey: apiKey,
});
return response.data.balance || 0;
}
const balance = await checkBalance(process.env.CAPSOLVER_API_KEY!);
if (balance < 1) {
console.warn("Saldo CapSolver rendah! Isi ulang di capsolver.com");
}
Selalu hentikan sesi ketika selesai untuk menghindari biaya yang tidak perlu:
try {
// ... kode otomasi Anda
} finally {
await browser.close();
await client.sessions.stop(session.id);
}
Jika Anda mengganti kunci API CapSolver, Anda perlu memperbarui config.js, mengarsip ulang, dan mengunggah kembali:
# Perbarui kunci di config.js, lalu:
cd capsolver-extension && zip -r ../capsolver-extension.zip . && cd ..
Kemudian unggah ZIP baru dan perbarui extensionId yang tersimpan.
HyperBrowser dan CapSolver bersama-sama menyediakan setup penyelesaian CAPTCHA paling komprehensif yang tersedia untuk otomasi browser AI:
Integrasi sederhana: ZIP ekstensi CapSolver, unggah sekali via SDK HyperBrowser, dan sertakan ke sesi mana pun. Tidak ada deteksi CAPTCHA tingkat kode, tidak ada injeksi token, tidak ada polling API. Ekstensi menangani semuanya di dalam konteks browser.
Baik Anda membangun web scraper, agen AI, atau pipeline otomasi, kombinasi ini berarti CAPTCHA tidak lagi menjadi penghalang — terlepas dari jenisnya.
Siap memulai? Daftar di CapSolver dan gunakan kode bonus HYPERBROWSER untuk bonus 6% tambahan pada recharge pertama Anda!
HyperBrowser adalah platform infrastruktur browser awan untuk agen AI. Menyediakan sesi browser yang dikelola, terisolasi dengan akses CDP, sehingga Anda dapat menghubungkan Playwright, Puppeteer, atau Selenium ke instance Chromium yang dihosting awan. Termasuk proksi bawaan, anti-pendeteksian, dan penyelesaian CAPTCHA native untuk Turnstile dan reCAPTCHA.
HyperBrowser memiliki API ekstensi kelas pertama. Anda ZIP direktori ekstensi Chrome, unggah via client.extensions.create(), dan menerima extensionId. Kirim ID ini ke client.sessions.create() dan ekstensi dimuat ke sesi browser awan secara otomatis.
CapSolver mendukung reCAPTCHA v2 (checkbox dan invisible), reCAPTCHA v3, reCAPTCHA Enterprise, Cloudflare Turnstile, Cloudflare 5-second Challenge, AWS WAF, GeeTest v3/v4, dan lainnya. Ekstensi Chrome secara otomatis mendeteksi jenis CAPTCHA dan menyelesaikannya.
CapSolver menawarkan harga kompetitif berdasarkan jenis CAPTCHA dan volume. Kunjungi capsolver.com untuk harga saat ini. Gunakan kode HYPERBROWSER untuk bonus 6% pada recharge pertama Anda.
Tidak. Unggah ekstensi sekali dan gunakan extensionId yang dikembalikan di semua sesi. Anda hanya perlu mengunggah ulang jika mengubah kunci API CapSolver di dalam ekstensi atau memperbarui versi ekstensi.
Ya. HyperBrowser mendukung Playwright, Puppeteer, dan Selenium. Ganti panggilan connectOverCDP Playwright dengan setara Puppeteer:
import puppeteer from "puppeteer-core";
const browser = await puppeteer.connect({
browserWSEndpoint: session.wsEndpoint,
});
Ekstensi CapSolver berjalan identik terlepas dari framework otomasi yang Anda gunakan untuk terhubung.
HyperBrowser menawarkan tier gratis dengan sesi terbatas. Paket berbayar membuka lebih banyak sesi, timeout lebih lama, dan fitur tambahan. Kunjungi hyperbrowser.ai untuk harga saat ini.
Ketahui bagaimana Infrastruktur Otomatisasi AI yang didukung LLM mengubah pengenalan CAPTCHA, meningkatkan efisiensi proses bisnis dan mengurangi intervensi manual. Optimalkan operasi otomatis Anda dengan solusi verifikasi canggih.

Pelajari cara meningkatkan pengumpulan data untuk pelatihan LLM dengan menyelesaikan CAPTCHA dalam jumlah besar. Temukan strategi otomatis untuk membangun dataset berkualitas tinggi untuk model AI.
