Playwright: Scrapowanie sieci i testowanie

Zdobyj wiedzę na temat automatyzacji przegladarki do testowania i scrapingu

Page content

Playwright to potężny, nowoczesny framework do automatyzacji przeglądarek, który rewolucjonizuje scrapowanie sieci i testowanie end-to-end.

Został opracowany przez Microsofta i oferuje jednolity interfejs API do automatyzacji przeglądarek Chromium, Firefox i WebKit z niezwykłą niezawodnością i prędkością.

interfejs użytkownika Playwright

Co to jest Playwright?

Playwright to open-source framework do automatyzacji przeglądarek, który umożliwia programistom tworzenie niezawodnych testów end-to-end oraz budowanie zaawansowanych rozwiązań do scrapowania sieci. W przeciwieństwie do tradycyjnych narzędzi automatyzacji, Playwright został stworzony od podstaw, aby obsługiwać nowoczesne aplikacje webowe z dynamicznym treścią, aplikacjami jednostronicowymi (SPA) i złożonymi frameworkami JavaScript.

Framework rozwiązuje problem, który dotknięty był wcześniejszym narzędziami automatyzacji: niepewność testów. Playwright wprowadza mechanizmy automatycznego oczekiwania, które automatycznie czekają, aż elementy będą gotowe do działania przed wykonaniem operacji, eliminując konieczność ustawiania arbitralnych timeoutów i instrukcji sleep, które sprawiały, że testy były niepewne.

Kluczowe funkcje

Wsparcie wielu przeglądarek: Playwright obsługuje wszystkie główne silniki przeglądarek - Chromium (w tym Chrome i Edge), Firefox oraz WebKit (Safari). Oznacza to, że możesz napisać skrypt automatyzacji raz i uruchomić go na różnych przeglądarkach bez modyfikacji, zapewniając, że Twoje aplikacje webowe będą działać zgodnie wszędzie.

Automatyczne oczekiwanie: Jedną z najpotężniejszych funkcji Playwright jest wbudowany mechanizm automatycznego oczekiwania. Przed wykonaniem dowolnej akcji, Playwright automatycznie czeka, aż elementy będą widoczne, włączone, stabilne i nie zakryte. To eliminuje warunki wyścigu i znacznie zwiększa niezawodność testów w porównaniu do narzędzi takich jak Selenium, gdzie często są konieczne jawne oczekiwania.

Interceptowanie sieci: Playwright pozwala na przechwytywanie, modyfikowanie i symulowanie żądań i odpowiedzi sieciowych. To niezwykle przydatne do testowania przypadków granicznych, symulowania wolnych sieci, blokowania niepotrzebnych zasobów podczas scrapowania lub symulowania odpowiedzi API bez potrzeby backendu.

Symulacja urządzeń mobilnych: Testuj aplikacje webowe na urządzeniach mobilnych symulując różne urządzenia mobilne z konkretnymi rozmiarami widoków, agentami użytkownika i zdarzeniami dotykowymi. Playwright zawiera opisane urządzenia dla popularnych telefonów i tabletów.

Potężne selektory: Oprócz selektorów CSS i XPath, Playwright obsługuje selektory tekstowe, selektory oparte na rólach do testowania dostępności oraz eksperymentalne selektory dla frameworków React i Vue w aplikacjach komponentowych.

Instalacja i konfiguracja

Instalacja Playwright jest prosta w różnych językach programowania.

Instalacja w Pythonie

Dla projektów Pythona, Playwright może zostać zainstalowany przez pip i zawiera zarówno synchroniczne, jak i asynchroniczne API. Jeśli szukasz szybszego, nowoczesnego menedżera pakietów, pakietów i środowisk dla Pythona, sprawdź nasz przewodnik dotyczący uv - Menedżera pakietów, projektów i środowisk Pythona:

# Instalacja pakietu Playwright
pip install playwright

# Instalacja przeglądarek (Chromium, Firefox, WebKit)
playwright install

# Dla konkretnej przeglądarki
playwright install chromium

Dla pełnego odniesienia do składni Pythona i powszechnie używanych poleceń podczas pracy z Playwright, odwiedź nasz Python Cheatsheet.

Instalacja w JavaScript/TypeScript

Dla projektów Node.js, zainstaluj Playwright przez npm lub yarn:

# Używając npm
npm init playwright@latest

# Używając yarn
yarn create playwright

# Instalacja ręczna
npm install -D @playwright/test
npx playwright install

Komenda npm init playwright oferuje interaktywną konfigurację, która skonfiguruje Twój projekt z przykładowymi testami, plikami konfiguracyjnymi i przepływem pracy GitHub Actions.

Podstawowa konfiguracja

Utwórz plik playwright.config.ts (TypeScript) lub 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'] },
    },
  ],
});

Scrapowanie sieci za pomocą Playwright

Playwright wyróżnia się w scrapowaniu sieci, szczególnie w przypadku nowoczesnych stron internetowych z dynamicznym treścią, z którymi tradycyjne biblioteki scrapowania mają trudności.

Przykład podstawowego scrapowania

Oto kompletny przykład w Pythonie demonstrujący podstawowe koncepcje scrapowania:

from playwright.sync_api import sync_playwright
import json

def scrape_website():
    with sync_playwright() as p:
        # Uruchom przeglądarkę
        browser = p.chromium.launch(headless=True)
        
        # Utwórz kontekst dla izolacji
        context = browser.new_context(
            viewport={'width': 1920, 'height': 1080},
            user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
        )
        
        # Otwórz nową stronę
        page = context.new_page()
        
        # Przejdź do URL
        page.goto('https://example.com/products')
        
        # Poczekaj, aż treść zostanie załadowana
        page.wait_for_selector('.product-item')
        
        # Wyodrębnij dane
        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
            })
        
        # Zwolnij zasoby
        browser.close()
        
        return data

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

Obsługa dynamicznego treści

Nowoczesne strony internetowe często ładowają treści dynamicznie przez JavaScript. Playwright obsługuje to płynnie:

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')
        
        # Przewiń, aby załadować więcej treści
        for _ in range(5):
            await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
            await page.wait_for_timeout(2000)
        
        # Poczekaj, aż sieć będzie bezczynna
        await page.wait_for_load_state('networkidle')
        
        # Wyodrębnij wszystkie załadowane elementy
        items = await page.query_selector_all('.item')
        
        await browser.close()

Konwertowanie zasobów scrapowania na Markdown

Po wyodrębnieniu treści HTML za pomocą Playwright, często potrzebujesz konwersji na bardziej użyteczny format. Dla pełnych przewodników na temat konwersji HTML na Markdown, zobacz nasze artykuły: Konwertowanie HTML na Markdown w Pythonie: Kompletny Przewodnik, który porównuje 6 różnych bibliotek Pythona, oraz Konwertowanie treści HTML na Markdown za pomocą LLM i Ollama dla konwersji z użyciem AI. Jeśli pracujesz z dokumentami Word, sprawdź nasz przewodnik dotyczący Konwertowania dokumentów Word na Markdown.

Autoryzacja i zarządzanie sesją

Gdy scrapowanie wymaga autoryzacji, Playwright ułatwia zapisywanie i ponowne użycie stanu przeglądarki:

def login_and_save_session():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()
        
        # Logowanie
        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"]')
        
        # Poczekaj na nawigację po logowaniu
        page.wait_for_url('**/dashboard')
        
        # Zapisz zautoryzowany stan
        context.storage_state(path='auth_state.json')
        
        browser.close()

def scrape_with_saved_session():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        # Użyj zapisanego stanu autoryzacji
        context = browser.new_context(storage_state='auth_state.json')
        page = context.new_page()
        
        # Już zautoryzowany!
        page.goto('https://example.com/protected-data')
        # ... scrapuj chronioną treść
        
        browser.close()

Ten podejście jest szczególnie przydatny, gdy pracujesz z API lub budujesz serwery MCP dla integracji z AI. Dla pełnego przewodnika na temat implementacji scrapowania sieci w integracji z narzędziami AI, zobacz nasz artykuł dotyczący Budowania serwerów MCP w Pythonie: WebSearch & Scrape.

Testowanie end-to-end

Głównym zastosowaniem Playwright jest pisanie solidnych testów end-to-end dla aplikacji webowych.

Pisanie pierwszego testu

Oto kompletny przykład testu w TypeScript:

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

test('użytkownik może dodać produkt do koszyka', async ({ page }) => {
  // Przejdź do strony głównej
  await page.goto('https://example-shop.com');
  
  // Wyszukaj produkt
  await page.fill('[data-testid="search-input"]', 'laptop');
  await page.press('[data-testid="search-input"]', 'Enter');
  
  // Poczekaj na wyniki wyszukiwania
  await expect(page.locator('.product-card')).toBeVisible();
  
  // Kliknij pierwszy produkt
  await page.locator('.product-card').first().click();
  
  // Sprawdź, czy strona produktu została załadowana
  await expect(page).toHaveURL(/\/product\/.+/);
  
  // Dodaj do koszyka
  await page.click('[data-testid="add-to-cart"]');
  
  // Sprawdź, czy koszyk został zaktualizowany
  const cartCount = page.locator('[data-testid="cart-count"]');
  await expect(cartCount).toHaveText('1');
});

Model strony (Page Object Model)

Dla większych zestawów testów, użyj wzorca Page Object Model, aby poprawić utrzymanie:

// 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('logowanie z nieprawidłowymi danymi pokazuje błąd', 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('Nieprawidłowe dane logowania');
});

Zaawansowane funkcje

Codegen - automatyczne generowanie testów

Narzędzie Codegen Playwright generuje testy rejestrując Twoje interakcje z stroną internetową:

# Otwórz Codegen
playwright codegen example.com

# Z wybraną przeglądarką
playwright codegen --browser firefox example.com

# Z zapisanym stanem autoryzacji
playwright codegen --load-storage=auth.json example.com

Podczas interakcji z stroną, Codegen generuje kod w czasie rzeczywistym. Jest to bardzo przydatne do szybkiego prototypowania testów lub nauki składni selektorów Playwright.

Trace Viewer do debugowania

Kiedy testy zawodzą, zrozumienie powodu może być trudne. Trace Viewer Playwright oferuje widok czasowy wykonywania testów:

// Włącz śledzenie w konfiguracji
use: {
  trace: 'on-first-retry',
}

Po zawodzeniu testu i ponownym próbowaniu, wyświetl ślad:

playwright show-trace trace.zip

Trace Viewer pokazuje screenshoty przy każdej akcji, aktywność sieciową, logi konsoli i snapshoty DOM, co ułatwia debugowanie.

Intercepowanie i symulowanie ruchu sieciowego

Interceptuj i modyfikuj ruch sieciowy do testowania przypadków granicznych:

def test_with_mocked_api():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        page = browser.new_page()
        
        # Symuluj odpowiedź API
        def handle_route(route):
            if 'api/products' in route.request.url:
                route.fulfill(
                    status=200,
                    body=json.dumps({
                        'products': [
                            {'id': 1, 'name': 'Testowy Produkt', 'price': 99.99}
                        ]
                    })
                )
            else:
                route.continue_()
        
        page.route('**/*', handle_route)
        
        page.goto('https://example.com')
        # Strona teraz używa danych symulowanych
        
        browser.close()

Testowanie mobilne

Testuj swoje responsywne projekty na różnych urządzeniach:

from playwright.sync_api import sync_playwright

def test_mobile():
    with sync_playwright() as p:
        # Użyj opisu urządzenia
        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')
        
        # Interakcja jako użytkownik mobilny
        page.locator('#mobile-menu-button').click()
        
        browser.close()

Najlepsze praktyki

Dla scrapowania sieci

  1. Użyj trybu bez głowicy w produkcji: Przeglądarka bez głowicy jest szybsza i zużywa mniej zasobów
  2. Zaimplementuj ograniczanie szybkości: Szanuj cele sieciowe poprzez opóźnienia między żądaniami
  3. Obsłuż błędy łagodnie: Problemy sieciowe, timeouty i zmiany selektorów występują
  4. Zmieniaj user agentów: Unikaj wykrywania poprzez zmianę odcisków przeglądarki
  5. Zachowuj robot.txt: Sprawdź i obserwuj zasady scrapowania
  6. Użyj izolacji kontekstu: Twórz oddzielne konteksty przeglądarki dla równoległego scrapowania

Kiedy konwertujesz zasoby scrapowania na format markdown, rozważ wykorzystanie narzędzi opartych na LLM lub bibliotek Pythona specjalistycznych do konwersji HTML na Markdown dla czystszych wyników.

Dla testowania

  1. Używaj atrybutów data-testid: Są bardziej stabilne niż często zmieniające się klasy CSS
  2. Unikaj długich oczekiwań: Używaj wbudowanych mechanizmów oczekiwania Playwright zamiast sleep()
  3. Każdy test powinien być niezależny: Każdy test powinien być w stanie działać samodzielnie
  4. Używaj fixtureów: Efektywnie dziel kod ustawienia między testami
  5. Uruchamiaj testy równolegle: Wykorzystaj wątki Playwright do przyspieszenia
  6. Rekorduj śledzenie po zawodzeniu: Włącz rejestrowanie śladów dla łatwiejszego debugowania

Optymalizacja wydajności

# Wyłącz niepotrzebne zasoby
def fast_scraping():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        context = browser.new_context()
        page = context.new_page()
        
        # Zablokuj obrazy i arkusze stylów, aby przyspieszyć scrapowanie
        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()

Porównanie Playwright z alternatywami

Playwright vs Selenium

Zalety Playwright:

  • Wbudowane automatyczne oczekiwanie eliminuje niestabilne testy
  • Szybsze działanie dzięki nowoczesnej architekturze
  • Lepsze interceptowanie i symulowanie sieci
  • Zaawansowane narzędzia do debugowania (Trace Viewer)
  • Prostszy API z mniejszą ilością boilerplate
  • Wiele przeglądarek z jednym zainstalowaniem

Zalety Selenium:

  • Starsza, bardziej dojrzała ekosystema z szeroką społecznością
  • Obsługuje więcej języków programowania
  • Szersza kompatybilność przeglądarek, w tym starszych wersji

Playwright vs Puppeteer

Zalety Playwright:

  • Prawdziwe wsparcie wielu przeglądarek (Firefox, WebKit, Chromium)
  • Lepszy projekt API oparty na lekcjach Puppeteer
  • Potężniejsze narzędzia do debugowania
  • Wsparcie firmy Microsoft i aktywne rozwijanie

Zalety Puppeteer:

  • Slightly mniejszy footprint
  • Ekspertyza w protokole Chrome DevTools

Dla większości nowych projektów, Playwright jest zalecanym wyborem z powodu nowoczesnej architektury i pełnego zestawu funkcji. Jeśli pracujesz z Go zamiast Pythona lub JavaScript i potrzebujesz możliwości scrapowania, sprawdź nasz przewodnik dotyczący Alternatyw dla BeautifulSoup w Go dla porównywalnych narzędzi scrapowania w ekosystemie Go.

Typowe przypadki użycia

Ekstrakcja danych dla aplikacji AI/LLM

Playwright jest świetny do gromadzenia danych treningowych lub tworzenia możliwości wyszukiwania sieci dla modeli AI. Kiedy budujesz serwery MCP (Model Context Protocol), Playwright może obsługiwać komponent scrapowania sieci, podczas gdy LLM przetwarza wyodrębnione treści.

Automatyzacja testów w CI/CD

Integruj testy Playwright w swoim pipeline CI/CD:

# .github/workflows/playwright.yml
name: Testy Playwright
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: Instalacja zależności
      run: npm ci
    - name: Instalacja przeglądarek Playwright
      run: npx playwright install --with-deps
    - name: Uruchomienie testów Playwright
      run: npx playwright test
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: raport-playwright
        path: raport-playwright/
        retention-days: 30

Monitorowanie stron internetowych

Monitoruj swoje strony internetowe w produkcji na dostępność i funkcjonalność:

import schedule
import time

def monitor_website():
    with sync_playwright() as p:
        try:
            browser = p.chromium.launch()
            page = browser.new_page()
            page.goto('https://twoja-strona.com', timeout=30000)
            
            # Sprawdź kluczowe elementy
            assert page.is_visible('.naglowek')
            assert page.is_visible('#main-content')
            
            print("✓ Strona jest zdrowa")
        except Exception as e:
            print(f"✗ Wykryto problem z stroną: {e}")
            # Wyślij alert
        finally:
            browser.close()

# Uruchom co 5 minut
schedule.every(5).minutes.do(monitor_website)

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

Rozwiązywanie typowych problemów

Problemy z instalacją przeglądarek

Jeśli instalacja przeglądarek nie powiedzie się:

# Ustaw niestandardowe miejsce pobierania
PLAYWRIGHT_BROWSERS_PATH=/custom/path playwright install

# Wyczyść cache i zainstaluj ponownie
playwright uninstall
playwright install

Błędy timeoutu

Zwiększ timeouty dla wolnych sieci lub złożonych stron:

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

Nie znaleziono selektora

Użyj Inspektora Playwright, aby zidentyfikować poprawne selektory:

PWDEBUG=1 pytest test_file.py

To otwiera inspektora, w którym możesz najechać kursorem nad elementami, aby zobaczyć ich selektory.

Podsumowanie

Playwright reprezentuje najnowsze osiągnięcia technologii automatyzacji przeglądarek, łącząc potężne funkcje z doskonałym doświadczeniem programisty. Niezależnie od tego, czy budujesz pipeline scrapowania sieci, implementujesz kompleksowe pokrycie testowe, czy tworzysz automatyzowane przepływy, Playwright oferuje narzędzia i niezawodność, które potrzebujesz.

Jego mechanizmy automatycznego oczekiwania eliminują niestabilne testy, wsparcie wielu przeglądarek zapewnia, że Twoje aplikacje działają wszędzie, a potężne narzędzia do debugowania ułatwiają rozwiązywanie problemów. Gdy aplikacje webowe będą się dalej rozwijać w złożoności, nowoczesna architektura Playwright i aktywne rozwijanie czynią z niego świetny wybór dla każdej potrzeby automatyzacji przeglądarki.

Dla programistów Pythona pracujących nad pipeline’ami danych lub projektami scrapowania sieci, Playwright łączy się płynnie z nowoczesnymi menedżerami pakietów i świetnie współpracuje z pandas, requests i innymi narzędziami do nauki danych. Możliwość wyodrębniania strukturalnych danych z złożonych stron internetowych czyni z niego niezastąpione narzędzie dla aplikacji AI, projektów badawczych i analizy biznesowej. Połączone z narzędziami do konwersji HTML na Markdown i odpowiednią obróbką treści, Playwright staje się kompletnym rozwiązaniem do ekstrakcji, przekształcania i wykorzystywania danych sieciowych w dużej skali.

Przydatne linki

Inne odniesienia