
Lucas Mitchell
Automation Engineer

Playwright adalah kerangka kerja pengujian otomatisasi browser modern yang dikembangkan oleh Microsoft. Ia mendukung otomatisasi untuk Chromium, Firefox, dan WebKit (yang sesuai dengan Chrome, Firefox, dan Safari). Ia menawarkan API yang kuat untuk kontrol browser, pemilihan elemen, interaksi formulir, intersepsi jaringan, dan banyak lagi—menjadikannya ideal untuk tugas yang membutuhkan interaksi mendalam dengan halaman web.
Semua browser, Semua platform, Satu API
Menggunakan Playwright di Node.js:
npm i playwright
npx playwright install # Instal semua browser (Chromium, Firefox, WebKit)
Contoh: Dapatkan semua judul blog dari CapSolver
Pada contoh di bawah ini, kami menggunakan Playwright untuk menavigasi ke blog CapSolver dan mengambil semua judul posting blog <h5> dari halaman tersebut

const { chromium } = require('playwright');
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
});
const [page] = context.pages();
await page.goto('https://www.capsolver.com/blog/All');
const h5Titles = await page.evaluate(() => {
const headings = Array.from(document.querySelectorAll('h5'));
return headings.map(heading => heading.textContent.trim());
});
console.log(h5Titles);
await context.close();
})();
Playwright cukup kuat untuk memuat ekstensi browser seperti browser biasa.
--disable-extensions-except dan --load-extension.const { chromium } = require('playwright');
const extensionPath = 'path/to/capsolver extension';
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: [
`--disable-extensions-except=${extensionPath}`,
`--load-extension=${extensionPath}`,
],
});
const [page] = context.pages();
await page.goto('https://www.capsolver.com/blog/All');
await browser.close();
})();
Jenis CAPTCHA seperti reCAPTCHA v2/v3, Cloudflare Turnstile, AWS WAF, banyak digunakan di ribuan situs web. Terlepas dari popularitasnya, CAPTCHA ini biasanya memiliki struktur DOM yang konsisten dan dapat dideteksi. Di situlah Ekstensi CapSolver berperan—ia mendeteksi dan menyelesaikannya secara otomatis tanpa perlu interaksi manual.
Mari kita ambil reCAPTCHA v2 sebagai contoh untuk menunjukkan cara menyelesaikannya menggunakan Ekstensi CapSolver di Playwright.
Catatan: Kecuali dinyatakan lain, contoh berikut menggunakan mode klik (/assets/config.js -> reCaptchaMode: 'click').
⚠️ Jangan lupa untuk mengekstrak file zip ekstensi dan mengkonfigurasi
apiKeyAnda di/assets/config.js
const { chromium } = require('playwright');
// Langkah 1: Unduh ekstensi dari GitHub: https://github.com/capsolver/capsolver-browser-extension/releases
// Langkah 2: Ekstrak file ekstensi dan atur apiKey Anda di /assets/config.js
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: [
`--disable-extensions-except=${extensionPath}`,
`--load-extension=${extensionPath}`,
'--lang=en-US'
],
});
const [page] = context.pages();
await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');
// Ekstensi akan secara otomatis mendeteksi dan menyelesaikan reCAPTCHA.
await page.waitForTimeout(15000); // Tunggu hingga selesai
await page.click('button[type="submit"]');
await page.waitForTimeout(5000);
await context.close();
})();
⚠️ Ekstensi CapSolver juga mendukung banyak opsi konfigurasi yang berguna. Berikut beberapa contoh umum (Catatan: Semua konfigurasi diatur di
/assets/config.js)
solvedCallbackSeperti yang mungkin Anda perhatikan, pada kode sebelumnya kami menunggu 15 detik setelah memuat halaman sebelum mengklik tombol kirim. Penundaan ini dimaksudkan untuk memberi ekstensi CapSolver waktu yang cukup untuk secara otomatis menyelesaikan reCAPTCHA. Namun, pendekatan ini tidak ideal—terkadang CAPTCHA diselesaikan jauh lebih cepat, dan dalam kondisi jaringan yang buruk, mungkin perlu waktu lebih lama dari 15 detik.
Di situlah solvedCallback berperan. Ia menyediakan solusi yang lebih baik dengan memicu callback setelah CAPTCHA diselesaikan, memberi tahu Anda bahwa verifikasi telah selesai. Anda dapat mengkonfigurasi solvedCallback di /assets/config.js dengan menentukan nama fungsi kustom—secara default, ini adalah captchaSolvedCallback. Kemudian, gunakan page.exposeFunction di Playwright untuk mengekspos fungsi ini di dalam konteks browser.
Sekarang mari kita tingkatkan kode sebelumnya menggunakan pendekatan ini.
const { chromium } = require('playwright');
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: [
`--disable-extensions-except=${extensionPath}`,
`--load-extension=${extensionPath}`,
'--lang=en-US'
],
});
const [page] = context.pages();
await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');
await page.exposeFunction('captchaSolvedCallback', async () => {
console.log('Captcha solved!');
const iframe = await page.$('iframe[src*="recaptcha"]');
if (iframe) {
const frame = await iframe.contentFrame();
const finished = await frame.evaluate(() => {
const element = document.querySelector('.recaptcha-checkbox-border');
return element && window.getComputedStyle(element).display === 'none';
});
if (finished) {
console.log('Verification completed!');
await page.click('button[type="submit"]');
await page.waitForTimeout(3000);
await context.close();
} else {
console.log('Verification not complete. Retrying...');
}
}
});
})();
Untuk reCAPTCHA v2, terkadang beberapa tantangan gambar mungkin muncul. Jadi setelah setiap tantangan, kami memeriksa apakah kotak centang "Saya bukan robot" telah dicentang—jika hilang, verifikasi dianggap selesai.
manualSolvingPada contoh sebelumnya, pemecahan CAPTCHA dimulai segera setelah halaman dimuat. Namun, dalam beberapa skenario, Anda mungkin perlu melakukan tugas lain terlebih dahulu—seperti memasukkan nama pengguna/kata sandi—sebelum memicu pemecahan CAPTCHA. Memulai terlalu dini dapat menyebabkan token kedaluwarsa.
Untuk menangani ini, atur manualSolving: true di /assets/config.js, yang memungkinkan Anda untuk memicu secara manual proses pemecahan CAPTCHA.
Ada dua cara untuk memicu pemecahan:
window.postMessage({ type: 'capsolverSolve' });⚠️ Catatan: Fitur ini hanya didukung di versi ekstensi yang lebih tinggi dari v1.16.0!
Contoh:
const { chromium } = require('playwright');
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: [
`--disable-extensions-except=${extensionPath}`,
`--load-extension=${extensionPath}`,
'--lang=en-US'
],
});
const [page] = context.pages();
await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');
// Simulasikan pengisian kredensial
await page.evaluate(() => {
const inputA = document.querySelector('input[name="ex-a"]');
inputA.value = 'username';
const inputB = document.querySelector('input[name="ex-b"]');
inputB.value = 'password';
});
// Simulasikan penundaan atau aktivitas pengguna lainnya
for (let i = 1; i <= 5; i++) {
await page.waitForTimeout(1000);
console.log(`Waited ${i} seconds...`);
}
console.log('Start solving CAPTCHA...');
// Metode 1: Simulasikan pengklikkan tombol CapSolver
await page.evaluate(() => {
document.querySelector('#capsolver-solver-tip-button').click();
});
// Metode 2: Memicu menggunakan postMessage
// await page.evaluate(() => {
// window.postMessage({ type: 'capsolverSolve' });
// });
await page.exposeFunction('captchaSolvedCallback', async () => {
console.log('Captcha solved!');
const iframe = await page.$('iframe[src*="recaptcha"]');
if (iframe) {
const frame = await iframe.contentFrame();
const finished = await frame.evaluate(() => {
const element = document.querySelector('.recaptcha-checkbox-border');
return element && window.getComputedStyle(element).display === 'none';
});
if (finished) {
console.log('Verification completed!');
await page.click('button[type="submit"]');
await page.waitForTimeout(3000);
await context.close();
} else {
console.log('Verification not complete. Try again.');
}
}
});
})();
reCaptchaModePengaturan reCaptchaMode mendukung dua mode: click dan token.
Jika Anda mengalami beberapa putaran pemilihan gambar menggunakan mode click, kemungkinan besar karena skor sidik jari browser yang rendah. Beralih ke mode token disarankan untuk keandalan yang lebih baik.
| Mode Klik | Mode Token |
|---|---|
![]() |
![]() |
showSolveButtonKetika showSolveButton diatur ke false (default adalah true), tombol CapSolver tidak akan lagi ditampilkan di halaman. Namun, ini tidak akan memengaruhi fungsionalitas pemecahan CAPTCHA normal.

Setelah mengatur useProxy: true, Anda dapat menentukan parameter berikut: proxyType, hostOrIp, port, proxyLogin, dan proxyPassword. Dengan pengaturan ini, kami akan menggunakan proxy kustom Anda untuk menyelesaikan CAPTCHA. Kapan Anda harus menggunakan proxy Anda sendiri? Biasanya, dalam situasi berikut:
Di atas adalah beberapa opsi konfigurasi yang umum digunakan. Anda dapat menyesuaikan pengaturan lain sesuai dengan kebutuhan aktual Anda. Jika Anda memiliki pertanyaan, silakan hubungi dukungan pelanggan.
Tidak seperti CAPTCHA pihak ketiga seperti reCAPTCHA, Cloudflare Turnstile, AWS WAF, atau GeeTest, ada jenis CAPTCHA lain yang memerlukan pengenalan huruf atau angka dari gambar. Kami menyebutnya sebagai CAPTCHA ImageToText. Biasanya terlihat seperti ini:

ImageToText adalah CAPTCHA yang diimplementasikan oleh administrator situs web sendiri. Tidak seperti CAPTCHA pihak ketiga, CAPTCHA ImageToText dibuat khusus oleh pemilik situs web. Karena CAPTCHA ini bervariasi dalam penempatan di berbagai situs web dan halaman, Ekstensi CapSolver tidak dapat secara otomatis mendeteksi gambar mana yang merupakan CAPTCHA. Oleh karena itu, Anda harus secara eksplisit memberi tahu Ekstensi CapSolver dalam kode Anda. Berikut cara melakukannya:
capsolver-image-to-text-source dengan nilai 0 ke elemen gambar CAPTCHA;capsolver-image-to-text-result dengan nilai 0 ke bidang input tempat hasilnya harus diisi.Atribut ini—capsolver-image-to-text-source dan capsolver-image-to-text-result—dapat dikonfigurasi di /assets/config.js menggunakan bidang textCaptchaSourceAttribute dan textCaptchaResultAttribute, masing-masing.
Mari kita lihat contoh menggunakan situs:
https://captcha.com/demos/features/captcha-demo.aspx
Pertama, periksa sumber halaman untuk menemukan elemen gambar CAPTCHA dan bidang input hasil. Dalam hal ini:
demoCaptcha_CaptchaImagecaptchaCodeSekarang, mari kita gunakan Playwright untuk mengotomatiskan pemecahan CAPTCHA ini dengan menandai elemen-elemen ini sesuai kebutuhan:
const { chromium } = require('playwright');
// Langkah 1: Dapatkan ekstensi dari GitHub (https://github.com/capsolver/capsolver-browser-extension/releases)
// Langkah 2: Ekstrak file zip ekstensi dan konfigurasikan apiKey Anda di /assets/config.js
const extensionPath = 'path/to/CapSolver Browser Extension-v1.16.0';
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: [
`--disable-extensions-except=${extensionPath}`,
`--load-extension=${extensionPath}`,
'--lang=en-US'
],
});
const [page] = context.pages();
await page.goto('https://captcha.com/demos/features/captcha-demo.aspx');
await page.waitForSelector('#demoCaptcha_CaptchaImage');
// Beri tahu CapSolver Extension di mana gambar CAPTCHA berada
await page.evaluate(() => {
const imgElement = document.querySelector('#demoCaptcha_CaptchaImage');
if (imgElement) {
imgElement.setAttribute('capsolver-image-to-text-source', '0');
}
});
// Beri tahu CapSolver Extension di mana hasil pengenalan harus dimasukkan
await page.evaluate(() => {
const resultElement = document.querySelector('#captchaCode');
if (resultElement) {
resultElement.setAttribute('capsolver-image-to-text-result', '0');
}
});
// Tunggu hingga CAPTCHA terpecahkan dan kirim formulir
await page.exposeFunction('captchaSolvedCallback', async () => {
console.log('Captcha terpecahkan!');
await page.waitForTimeout(3000);
await page.click('#validateCaptchaButton');
await page.waitForTimeout(3000);
await context.close();
});
})();
Hasil:

Menggunakan CapSolver Extension sangat mudah dan cepat, tetapi jika Anda adalah pengembang berpengalaman, kami sangat menyarankan untuk menggunakan integrasi API sebagai gantinya. Dibandingkan dengan metode berbasis ekstensi, pendekatan API menawarkan beberapa keunggulan utama:
Sebelum kita membahas demo kode, berikut ini ikhtisar singkat tentang cara menggunakan API CapSolver:
Untuk membuat tugas, Anda perlu mengirimkan objek JSON ke CapSolver. JSON ini mencakup clientKey, websiteURL, websiteKey, dan data lainnya. Kolom-kolom ini bervariasi tergantung pada jenis CAPTCHA dan situs web.
👉 Untuk detailnya, lihat dokumentasi kami: dokumentasi
Sebelum memecahkan reCAPTCHA v2, silakan baca dokumentasinya di sini:
📖 ReCaptchaV2
Panduan ini menjelaskan parameter JSON mana yang harus disertakan saat membuat tugas.
Selain itu, Anda dapat menggunakan CapSolver Extension untuk dengan cepat menghasilkan data JSON untuk permintaan API Anda.
Lihat blog ini untuk bantuan:
🔗 mendapatkan data JSON
Mari kita ambil contoh berikut:
🔗 https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php
JSON yang diperlukan untuk membuat tugas untuk halaman ini adalah:
{
"type": "ReCaptchaV2TaskProxyLess",
"websiteKey": "6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9",
"websiteURL": "https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php"
}
Kami juga menyediakan contoh kode JavaScript untuk menggunakan API di dokumentasi kami:

Integrasi di Playwright:
const { chromium } = require('playwright');
const axios = require('axios');
// Ganti dengan API key Anda
const api_key = 'YOUR_API_KEY';
const captcha_type = 'ReCaptchaV2TaskProxyLess';
const site_key = '6LfW6wATAAAAAHLqO2pb8bDBahxlMxNdo9g947u9';
const site_url = 'https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php';
async function capSolver() {
const payload = {
clientKey: api_key,
task: {
type: captcha_type,
websiteKey: site_key,
websiteURL: site_url
}
};
try {
const res = await axios.post('https://api.capsolver.com/createTask', payload);
const task_id = res.data.taskId;
if (!task_id) {
console.log('Gagal membuat tugas:', res.data);
return;
}
console.log('Mendapatkan taskId:', task_id);
while (true) {
await new Promise(resolve => setTimeout(resolve, 1000)); // Tunda selama 1 detik
const getResultPayload = { clientKey: api_key, taskId: task_id };
const resp = await axios.post('https://api.capsolver.com/getTaskResult', getResultPayload);
const status = resp.data.status;
if (status === 'ready') {
return resp.data.solution.gRecaptchaResponse;
}
if (status === 'failed' || resp.data.errorId) {
console.log('Pemecahan gagal! respons:', resp.data);
return;
}
}
} catch (error) {
console.error('Error:', error);
}
}
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: ['--lang=en-US'],
});
const [page] = context.pages();
await page.goto('https://recaptcha-demo.appspot.com/recaptcha-v2-checkbox.php');
await page.waitForSelector('form[action="/recaptcha-v2-checkbox.php"]');
const token = await capSolver();
console.log("Token:", token);
// Tetapkan nilai token
await page.evaluate((token) => {
const textarea = document.getElementById('g-recaptcha-response');
if (textarea) {
textarea.value = token;
}
}, token);
await page.click('button[type="submit"]');
await page.waitForTimeout(5000);
await context.close();
})();
Kami masih menggunakan contoh https://captcha.com/demos/features/captcha-demo.aspx, di mana elemen gambar captcha memiliki id demoCaptcha_CaptchaImage, dan elemen input hasil memiliki id captchaCode, seperti yang ditunjukkan pada gambar berikut:

Untuk ImageToTextTask, kita perlu meneruskan nilai base64 dari gambar captcha ke CapSolver. Contoh kodenya adalah sebagai berikut:
const { chromium } = require('playwright');
const axios = require('axios');
// Ganti dengan API key Anda
const api_key = 'YOUR_API_KEY';
const captcha_type = 'ImageToTextTask';
const site_url = 'https://captcha.com/demos/features/captcha-demo.aspx';
async function capSolver(base64Image) {
const payload = {
clientKey: api_key,
task: {
type: captcha_type,
websiteURL: site_url,
body: base64Image,
}
};
try {
const res = await axios.post('https://api.capsolver.com/createTask', payload);
const status = res.data.status;
if (status === 'ready') {
return res.data.solution.text;
}
if (status === 'failed' || res.data.errorId) {
console.log('Pemecahan gagal! respons:', res.data);
return "";
}
} catch (error) {
console.error('Error:', error);
}
}
(async () => {
const context = await chromium.launchPersistentContext('', {
headless: false,
viewport: { width: 1920, height: 1080 },
args: ['--lang=en-US'],
});
const [page] = context.pages();
await page.goto('https://captcha.com/demos/features/captcha-demo.aspx');
await page.waitForSelector('#demoCaptcha_CaptchaImage');
// Dapatkan nilai base64 dari gambar captcha
const captchaImage = await page.evaluate(() => {
const img = document.querySelector('img[id="demoCaptcha_CaptchaImage"]');
return img ? img.getAttribute('src') : null;
});
const base64Image = captchaImage.split(',')[1];
const text = await capSolver(base64Image);
console.log("Teks:", text);
// Tetapkan teks captcha yang telah terpecahkan
await page.evaluate((text) => {
document.getElementById('captchaCode').value = text;
}, text);
await page.click('#validateCaptchaButton');
await page.waitForTimeout(5000);
await context.close();
})();
Selain itu, untuk beberapa tipe ImageToText khusus, Anda dapat menentukan model yang berbeda untuk meningkatkan akurasi. Untuk detailnya, silakan lihat dokumentasi kami:
https://docs.capsolver.com/en/guide/recognition/ImageToTextTask/

Video Demo yang Menampilkan CapSolver Extension:
Selain itu, CapSolver menawarkan Program Pembagian Pendapatan Pengembang, yang memungkinkan pengembang dan mitra untuk mendapatkan komisi dengan mengintegrasikan atau mempromosikan solusi CapSolver. Ini adalah cara yang bagus untuk memonetisasi pekerjaan Anda sambil membantu orang lain memecahkan captcha secara efisien. Untuk detail lengkapnya, lihat:
Rencana Pengembang CapSolver
Fitur-fitur Playwright yang kuat, dikombinasikan dengan kemampuan CapSolver untuk menangani CAPTCHA, menawarkan solusi komprehensif untuk otomatisasi web. Baik menggunakan ekstensi CapSolver untuk kenyamanan atau API untuk kontrol yang lebih besar, integrasi ini menyederhanakan tugas-tugas yang kompleks dan meningkatkan alur kerja otomatisasi. Di luar sekadar memecahkan CAPTCHA, ingatlah bahwa CapSolver juga menawarkan Program Pembagian Pendapatan Pengembang, yang memberikan peluang bagus untuk mendapatkan komisi dengan mengintegrasikan atau mempromosikan solusi mereka.
Menguasai pencarian data penerbangan dengan belajar bagaimana menyelesaikan tantangan CAPTCHA yang kompleks. Temukan jenis verifikasi, contoh kode Python, dan praktik terbaik pencarian data etis.

Panduan langkah demi langkah untuk mengelak CAPTCHA dalam otomatisasi browser Playwright. Menyelesaikan tantangan reCAPTCHA v2/v3 dan Cloudflare Turnstile dengan alat berbasis AI
