Playwright: Web Scraping & Testing

Masterkan otomatisasi browser untuk pengujian & pengambilan data

Konten Halaman

Playwright adalah kerangka kerja otomasi browser yang kuat dan modern yang merevolusi pengambilan data web dan pengujian akhir-ke-akhir (end-to-end).

Dikembangkan oleh Microsoft, kerangka kerja ini menyediakan API terpadu untuk mengotomasi browser Chromium, Firefox, dan WebKit dengan keandalan dan kecepatan yang luar biasa.

playwright ui

Apa itu Playwright?

Playwright adalah kerangka kerja otomasi browser open-source yang memungkinkan pengembang menulis pengujian akhir-ke-akhir yang andal dan membangun solusi pengambilan data web yang canggih. Berbeda dengan alat otomasi tradisional, Playwright dibangun dari awal untuk menangani aplikasi web modern dengan konten dinamis, aplikasi satu halaman (single-page applications atau SPAs), dan kerangka kerja JavaScript yang kompleks.

Kerangka kerja ini mengatasi masalah inti yang mengganggu alat otomasi sebelumnya: ketidakandalan. Playwright memperkenalkan mekanisme auto-waiting yang secara otomatis menunggu elemen menjadi actionable sebelum melakukan operasi, menghilangkan kebutuhan untuk timeout dan pernyataan sleep yang membuat pengujian tidak andal.

Fitur Utama

Dukungan Multi-Browser: Playwright mendukung semua mesin browser utama - Chromium (termasuk Chrome dan Edge), Firefox, dan WebKit (Safari). Ini berarti Anda dapat menulis skrip otomasi Anda sekali dan menjalankannya di berbagai browser tanpa modifikasi, memastikan aplikasi web Anda berjalan konsisten di mana pun.

Auto-Waiting: Salah satu fitur paling kuat dari Playwright adalah mekanisme auto-waiting bawaannya. Sebelum melakukan tindakan apa pun, Playwright secara otomatis menunggu elemen menjadi terlihat, diaktifkan, stabil, dan tidak terhalang. Ini menghilangkan kondisi race dan membuat pengujian jauh lebih andal dibandingkan alat seperti Selenium di mana penundaan eksplisit sering diperlukan.

Intersepsi Jaringan: Playwright memungkinkan Anda mengintersepsi, memodifikasi, dan memalsukan permintaan dan respons jaringan. Ini sangat berharga untuk menguji kasus ujung, mensimulasikan jaringan lambat, memblokir sumber daya yang tidak diperlukan selama pengambilan data, atau memalsukan respons API tanpa memerlukan backend.

Emulasi Mobile: Uji aplikasi web mobile dengan mengemulasi berbagai perangkat mobile dengan ukuran viewport spesifik, user agents, dan event sentuhan. Playwright menyertakan deskriptor perangkat untuk ponsel dan tablet populer.

Selector yang Kuat: Selain selector CSS dan XPath, Playwright mendukung selector berbasis teks, selector berbasis peran untuk pengujian aksesibilitas, dan bahkan selector eksperimental untuk kerangka kerja berbasis komponen seperti React dan Vue.

Instalasi dan Pengaturan

Mengatur Playwright sangat sederhana di berbagai bahasa pemrograman.

Instalasi Python

Untuk proyek Python, Playwright dapat diinstal melalui pip dan mencakup API sinkron dan asinkron. Jika Anda mencari manajer paket, proyek, dan lingkungan Python yang lebih cepat dan modern, lihat panduan kami tentang uv - Python Package, Project, and Environment Manager:

# Instal paket Playwright
pip install playwright

# Instal browser (Chromium, Firefox, WebKit)
playwright install

# Untuk browser tertentu saja
playwright install chromium

Untuk referensi menyeluruh tentang sintaks Python dan perintah umum yang digunakan saat bekerja dengan Playwright, lihat Python Cheatsheet.

Instalasi JavaScript/TypeScript

Untuk proyek Node.js, instal Playwright melalui npm atau yarn:

# Menggunakan npm
npm init playwright@latest

# Menggunakan yarn
yarn create playwright

# Instalasi manual
npm install -D @playwright/test
npx playwright install

Perintah npm init playwright menyediakan pengaturan interaktif yang mengkonfigurasi proyek Anda dengan contoh pengujian, file konfigurasi, dan alur kerja GitHub Actions.

Konfigurasi Dasar

Buat file playwright.config.ts (TypeScript) atau playwright.config.js (JavaScript):

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  timeout: 30000,
  retries: 2,
  workers: 4,
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
});

Pengambilan Data dengan Playwright

Playwright sangat unggul dalam pengambilan data web, terutama untuk situs web modern dengan konten dinamis yang sering kali sulit diakses oleh perpustakaan pengambilan data tradisional.

Contoh Pengambilan Data Dasar

Berikut adalah contoh Python menyeluruh yang menunjukkan konsep pengambilan data inti:

from playwright.sync_api import sync_playwright
import json

def scrape_website():
    with sync_playwright() as p:
        # Meluncurkan browser
        browser = p.chromium.launch(headless=True)
        
        # Membuat konteks untuk isolasi
        context = browser.new_context(
            viewport={'width': 1920, 'height': 1080},
            user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
        )
        
        # Membuka halaman baru
        page = context.new_page()
        
        # Navigasi ke URL
        page.goto('https://example.com/products')
        
        # Tunggu konten untuk dimuat
        page.wait_for_selector('.product-item')
        
        # Ekstrak data
        products = page.query_selector_all('.product-item')
        
        data = []
        for product in products:
            title = product.query_selector('h2').inner_text()
            price = product.query_selector('.price').inner_text()
            url = product.query_selector('a').get_attribute('href')
            
            data.append({
                'title': title,
                'price': price,
                'url': url
            })
        
        # Bersihkan
        browser.close()
        
        return data

# Jalankan scraper
results = scrape_website()
print(json.dumps(results, indent=2))

Mengelola Konten Dinamis

Situs web modern sering kali memuat konten secara dinamis melalui JavaScript. Playwright menangani ini secara mulus:

async def scrape_dynamic_content():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        
        await page.goto('https://example.com/infinite-scroll')
        
        # Scroll untuk memuat lebih banyak konten
        for _ in range(5):
            await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
            await page.wait_for_timeout(2000)
        
        # Tunggu jaringan menjadi tidak sibuk
        await page.wait_for_load_state('networkidle')
        
        # Ekstrak semua item yang dimuat
        items = await page.query_selector_all('.item')
        
        await browser.close()

Mengubah Konten yang Dikumpulkan ke Markdown

Setelah mengekstrak konten HTML dengan Playwright, sering kali Anda perlu mengubahnya menjadi format yang lebih berguna. Untuk panduan menyeluruh tentang mengubah HTML ke Markdown, lihat artikel kami tentang Mengubah HTML ke Markdown dengan Python: Panduan Menyeluruh yang membandingkan 6 perpustakaan Python berbeda, dan Mengubah Konten HTML ke Markdown menggunakan LLM dan Ollama untuk konversi berbasis AI. Jika Anda bekerja dengan dokumen Word, lihat panduan kami tentang Mengubah Dokumen Word ke Markdown.

Otentikasi dan Manajemen Session

Ketika pengambilan data memerlukan otentikasi, Playwright membuatnya mudah untuk menyimpan dan mengulang state browser:

def login_and_save_session():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        
        # Login
        page.goto('https://example.com/login')
        page.fill('input[name="username"]', 'your_username')
        page.fill('input[name="password"]', 'your_password')
        page.click('button[type="submit"]')
        
        # Tunggu navigasi setelah login
        page.wait_for_url('**/dashboard')
        
        # Simpan state otentikasi
        context.storage_state(path='auth_state.json')
        
        browser.close()

def scrape_with_saved_session():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        # Gunakan state otentikasi yang disimpan
        context = browser.new_context(storage_state='auth_state.json')
        page = context.new_page()
        
        # Sudah terotentikasi!
        page.goto('https://example.com/protected-data')
        # ... ekstrak konten yang dilindungi
        
        browser.close()

Pendekatan ini sangat berguna ketika bekerja dengan API atau membangun server MCP untuk integrasi AI. Untuk panduan lengkap tentang menerapkan pengambilan data web dalam integrasi alat AI, lihat artikel kami tentang Membangun Server MCP dalam Python: WebSearch & Scrape.

Pengujian Akhir-ke-Akhir

Kasus penggunaan utama Playwright adalah menulis pengujian akhir-ke-akhir yang kuat untuk aplikasi web.

Berikut adalah contoh pengujian lengkap dalam TypeScript:

import { test, expect } from '@playwright/test';

test('user can add item to cart', async ({ page }) => {
  // Navigasi ke halaman utama
  await page.goto('https://example-shop.com');
  
  // Cari produk
  await page.fill('[data-testid="search-input"]', 'laptop');
  await page.press('[data-testid="search-input"]', 'Enter');
  
  // Tunggu hasil pencarian
  await expect(page.locator('.product-card')).toBeVisible();
  
  // Klik produk pertama
  await page.locator('.product-card').first().click();
  
  // Verifikasi halaman produk telah dimuat
  await expect(page).toHaveURL(/\/product\/.+/);
  
  // Tambahkan ke keranjang
  await page.click('[data-testid="add-to-cart"]');
  
  // Verifikasi keranjang telah diperbarui
  const cartCount = page.locator('[data-testid="cart-count"]');
  await expect(cartCount).toHaveText('1');
});

Model Halaman (Page Object Model)

Untuk suite pengujian yang lebih besar, gunakan pola Model Halaman (Page Object Model) untuk meningkatkan keterpeliharaan:

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}
  
  async navigate() {
    await this.page.goto('/login');
  }
  
  async login(username: string, password: string) {
    await this.page.fill('[name="username"]', username);
    await this.page.fill('[name="password"]', password);
    await this.page.click('button[type="submit"]');
  }
  
  async getErrorMessage() {
    return await this.page.locator('.error-message').textContent();
  }
}

// tests/login.spec.ts
import { test, expect } from '@playwright/test';
import { LoginPage } from '../pages/LoginPage';

test('login with invalid credentials shows error', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.navigate();
  await loginPage.login('invalid@email.com', 'wrongpass');
  
  const error = await loginPage.getErrorMessage();
  expect(error).toContain('Invalid credentials');
});

Fitur Lanjutan

Codegen - Pembuatan Uji Otomatis

Alat Codegen dari Playwright menghasilkan pengujian dengan merekam interaksi Anda dengan halaman web:

# Buka Codegen
playwright codegen example.com

# Dengan browser tertentu
playwright codegen --browser firefox example.com

# Dengan state otentikasi yang disimpan
playwright codegen --load-storage=auth.json example.com

Saat Anda berinteraksi dengan halaman, Codegen menghasilkan kode secara real-time. Ini sangat berguna untuk membuat prototipe pengujian secara cepat atau belajar sintaks selector Playwright.

Trace Viewer untuk Debugging

Ketika pengujian gagal, memahami mengapa bisa menjadi tantangan. Trace Viewer dari Playwright menyediakan tampilan timeline dari eksekusi pengujian:

// Aktifkan tracing dalam konfigurasi
use: {
  trace: 'on-first-retry',
}

Setelah pengujian gagal dan mencoba kembali, lihat trace:

playwright show-trace trace.zip

Trace Viewer menampilkan screenshot di setiap tindakan, aktivitas jaringan, log konsol, dan snapshot DOM, membuat debugging menjadi mudah.

Intersepsi dan Pemalsuan Jaringan

Intersepsi dan modifikasi lalu lintas jaringan untuk menguji kasus ujung:

def test_with_mocked_api():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        
        # Palsukan respons API
        def handle_route(route):
            if 'api/products' in route.request.url:
                route.fulfill(
                    status=200,
                    body=json.dumps({
                        'products': [
                            {'id': 1, 'name': 'Test Product', 'price': 99.99}
                        ]
                    })
                )
            else:
                route.continue_()
        
        page.route('**/*', handle_route)
        
        page.goto('https://example.com')
        # Halaman sekarang menggunakan data yang dipalsukan
        
        browser.close()

Pengujian Mobile

Uji desain responsif Anda pada berbagai perangkat:

from playwright.sync_api import sync_playwright

def test_mobile():
    with sync_playwright() as p:
        # Gunakan deskriptor perangkat
        iphone_13 = p.devices['iPhone 13']
        
        browser = p.webkit.launch()
        context = browser.new_context(**iphone_13)
        page = context.new_page()
        
        page.goto('https://example.com')
        
        # Interaksi sebagai pengguna mobile
        page.locator('#mobile-menu-button').click()
        
        browser.close()

Praktik Terbaik

Untuk Pengambilan Data

  1. Gunakan Mode Headless di Produksi: Browsing headless lebih cepat dan menggunakan sumber daya lebih sedikit
  2. Implementasikan Batas Tingkat: Hormati situs target dengan jeda antara permintaan
  3. Tangani Kesalahan Secara Halus: Masalah jaringan, timeout, dan perubahan selector terjadi
  4. Putar User Agents: Hindari deteksi dengan bervariasi fingerprint browser
  5. Hormati robots.txt: Periksa dan ikuti kebijakan pengambilan data situs web
  6. Gunakan Isolasi Konteks: Buat konteks browser terpisah untuk pengambilan data paralel

Ketika mengubah konten yang dikumpulkan ke format markdown, pertimbangkan untuk memanfaatkan alat konversi berbasis LLM atau perpustakaan Python khusus untuk konversi HTML ke markdown untuk output yang lebih bersih.

Untuk Pengujian

  1. Gunakan Atribut Data-testid: Lebih stabil daripada kelas CSS yang sering berubah
  2. Hindari Tunggu Hard: Gunakan mekanisme menunggu bawaan Playwright daripada sleep()
  3. Jaga Pengujian Terpisah: Setiap pengujian harus bisa dijalankan secara terpisah
  4. Gunakan Fixtures: Bagikan kode setup antar pengujian secara efisien
  5. Jalankan Pengujian Secara Paralel: Manfaatkan thread worker Playwright untuk kecepatan
  6. Catat Trace pada Gagal: Aktifkan pencatatan trace untuk debugging yang lebih mudah

Optimisasi Kinerja

# Nonaktifkan sumber daya yang tidak diperlukan
def fast_scraping():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        context = browser.new_context()
        page = context.new_page()
        
        # Blokir gambar dan stylesheet untuk mempercepat pengambilan data
        async def block_resources(route):
            if route.request.resource_type in ['image', 'stylesheet', 'font']:
                await route.abort()
            else:
                await route.continue_()
        
        page.route('**/*', block_resources)
        page.goto('https://example.com')
        
        browser.close()

Membandingkan Playwright dengan Alternatif

Playwright vs Selenium

Keunggulan Playwright:

  • Auto-waiting bawaan menghilangkan pengujian yang tidak andal
  • Eksekusi lebih cepat karena arsitektur modern
  • Intersepsi dan pemalsuan jaringan yang lebih baik
  • Alat debugging yang lebih unggul (Trace Viewer)
  • API yang lebih sederhana dengan sedikit boilerplate
  • Dukungan multi-browser dengan satu instalasi

Keunggulan Selenium:

  • Ekosistem yang lebih matang dengan komunitas yang luas
  • Mendukung lebih banyak bahasa pemrograman
  • Kompatibilitas browser yang lebih luas termasuk versi lama

Playwright vs Puppeteer

Keunggulan Playwright:

  • Dukungan multi-browser sejati (Firefox, WebKit, Chromium)
  • Desain API yang lebih baik berdasarkan pelajaran Puppeteer
  • Alat debugging yang lebih kuat
  • Dukungan aktif dari Microsoft

Keunggulan Puppeteer:

  • Ukuran yang sedikit lebih kecil
  • Keahlian dalam Chrome DevTools Protocol

Untuk sebagian besar proyek baru, Playwright adalah pilihan yang direkomendasikan karena arsitektur modern dan set fitur yang komprehensif. Jika Anda bekerja dengan Go alih-alih Python atau JavaScript dan membutuhkan kemampuan pengambilan data, lihat panduan kami tentang Alternatif Beautiful Soup untuk Go untuk alat pengambilan data yang setara dalam ekosistem Go.

Kasus Penggunaan Umum

Ekstraksi Data untuk Aplikasi AI/LLM

Playwright sangat baik untuk mengumpulkan data pelatihan atau membuat kemampuan pencarian web untuk model AI. Ketika membangun server MCP (Model Context Protocol), Playwright dapat menangani komponen pengambilan data web sementara LLM memproses konten yang diekstrak.

Pengujian Otomatis dalam CI/CD

Integrasikan pengujian Playwright ke dalam pipeline integrasi berkelanjutan Anda:

# .github/workflows/playwright.yml
name: Playwright Tests
on:
  push:
    branches: [ main, master ]
  pull_request:
    branches: [ main, master ]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18
    - name: Install dependencies
      run: npm ci
    - name: Install Playwright Browsers
      run: npx playwright install --with-deps
    - name: Run Playwright tests
      run: npx playwright test
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 30

Pemantauan Situs Web

Pantau situs web produksi Anda untuk uptime dan fungsi:

import schedule
import time

def monitor_website():
    with sync_playwright() as p:
        try:
            browser = p.chromium.launch()
            page = browser.new_page()
            page.goto('https://your-site.com', timeout=30000)
            
            # Periksa elemen kritis
            assert page.is_visible('.header')
            assert page.is_visible('#main-content')
            
            print("✓ Situs web sehat")
        except Exception as e:
            print(f"✗ Masalah situs web terdeteksi: {e}")
            # Kirim peringatan
        finally:
            browser.close()

# Jalankan setiap 5 menit
schedule.every(5).minutes.do(monitor_website)

while True:
    schedule.run_pending()
    time.sleep(1)

Menyelesaikan Masalah Umum

Masalah Instalasi Browser

Jika browser gagal diunduh:

# Tetapkan lokasi unduh kustom
PLAYWRIGHT_BROWSERS_PATH=/custom/path playwright install

# Bersihkan cache dan reinstal
playwright uninstall
playwright install

Kesalahan Timeout

Tingkatkan timeout untuk jaringan lambat atau halaman kompleks:

page.goto('https://slow-site.com', timeout=60000)  # 60 detik
page.wait_for_selector('.element', timeout=30000)  # 30 detik

Selector Tidak Ditemukan

Gunakan Playwright Inspector untuk mengidentifikasi selector yang benar:

PWDEBUG=1 pytest test_file.py

Ini membuka inspektornya di mana Anda dapat mengarahkan pointer ke elemen untuk melihat selector mereka.

Kesimpulan

Playwright mewakili ujung tombak teknologi otomasi browser, menggabungkan fitur kuat dengan pengalaman pengembang yang luar biasa. Baik Anda membangun pipeline pengambilan data web, menerapkan cakupan pengujian menyeluruh, atau menciptakan alur kerja otomatis, Playwright menyediakan alat dan keandalan yang Anda butuhkan.

Mekanisme auto-waitingnya menghilangkan pengujian yang tidak andal, dukungan multi-browser memastikan aplikasi Anda berjalan di mana pun, dan alat debugging yang kuat membuat troubleshooting menjadi mudah. Seiring aplikasi web terus berkembang menjadi lebih kompleks, arsitektur modern dan pengembangan aktif Playwright membuatnya menjadi pilihan yang sangat baik untuk kebutuhan otomasi browser apa pun.

Untuk pengembang Python yang bekerja pada pipeline data atau proyek pengambilan data, Playwright terintegrasi secara mulus dengan manajer paket modern dan bekerja sangat baik bersama pandas, requests, dan alat-alat lainnya dalam bidang ilmu data. Kemampuan untuk mengekstrak data terstruktur dari situs web modern yang kompleks membuatnya sangat berharga untuk aplikasi AI, proyek penelitian, dan bisnis intelijen. Ketika dikombinasikan dengan alat konversi HTML ke Markdown dan pemrosesan konten yang tepat, Playwright menjadi solusi lengkap untuk mengekstrak, mengubah, dan memanfaatkan data web secara skala besar.

Tautan Berguna

Referensi Lainnya