Scarnox · Blog

Jak scrapować strony renderowane w JavaScript

Wiele nowoczesnych stron wysyła prawie pusty dokument HTML i buduje treść w przeglądarce za pomocą JavaScriptu. Jeśli twój scraper pobiera stronę i nie znajduje produktów, cen ani tekstu artykułu, treść tam jest, ale przychodzi później. Ten przewodnik pokazuje, jak rozpoznać, z jakim typem strony masz do czynienia, jak znaleźć szybszą drogę niż przeglądarka, jeśli istnieje, i jak scrapować renderowane strony w Playwright dla Pythona. Kończy się uwagą, co zrobić, gdy renderowana strona pokazuje captcha.

Krok 1: sprawdź, czy treść jest w HTML

Otwórz stronę przez view-source: w przeglądarce albo pobierz ją zwykłym żądaniem HTTP i przeszukaj źródło pod kątem fragmentu tekstu, który widzisz na ekranie. Typowe są trzy wyniki:

Tekst tam jest. Strona jest renderowana po stronie serwera. Zwykły klient HTTP i parser HTML wystarczą i powinieneś ich użyć, bo są szybsze i prostsze.
Tekstu brakuje, ale jest blob JSON. Wiele stron osadza swój stan w tagu script, na przykład __NEXT_DATA__. Parsuj ten JSON bezpośrednio.
Tekstu brakuje i nie ma bloba. Strona ładuje treść dalszymi żądaniami. Zajrzyj do zakładki Network w DevTools, filtrowanej do Fetch/XHR, podczas ładowania strony.

Krok 2: wywołaj endpoint JSON, jeśli istnieje

Gdy strona pobiera dane z endpointu, najlepszą opcją zwykle jest wywołanie tego endpointu bezpośrednio. Jest mniejszy, szybszy i stabilniejszy niż renderowana strona. Skopiuj adres żądania, sprawdź, jakich nagłówków wymaga strona, i wypróbuj go ze skryptu. Rób to tylko tam, gdzie regulamin strony na to pozwala, i szanuj limity tempa oraz uwierzytelnianie, których strona oczekuje. Endpoint bez dokumentacji może zmienić się bez ostrzeżenia, więc pisz parser tak, by głośno się wysypywał, gdy kształt odpowiedzi się zmieni.

Krok 3: renderuj stronę, gdy musisz

Jeśli treść naprawdę wymaga przeglądarki, uruchom headless browser. Playwright to dobry wybór dla Pythona. Poniższy przykład otwiera listę produktów, czeka na pojawienie się treści i odczytuje tekst z każdej karty:

from playwright.sync_api import sync_playwright

URL = "https://example.com/products"  # strona, którą wolno ci scrapować

with sync_playwright() as p:
    browser = p.chromium.launch(headless=True)
    page = browser.new_page()
    page.goto(URL, wait_until="domcontentloaded", timeout=60_000)
    # Czekaj na element, który dowodzi, że dane dotarły.
    page.wait_for_selector(".product-card", timeout=30_000)
    titles = page.locator(".product-card h2").all_inner_texts()
    browser.close()

for title in titles:
    print(title)

Czekanie na konkretny selektor jest znacznie bardziej niezawodne niż stałe sleep. Stała pauza jest albo za krótka w wolny dzień, albo marnuje czas w szybki. Wybierz element, który pojawia się dopiero, gdy dane się załadują.

Krok 4: obsłuż nieskończone przewijanie i paginację

Niektóre strony ładują więcej elementów podczas przewijania. Przewiń na dół, poczekaj, aż liczba elementów wzrośnie, i zatrzymaj się, gdy przestanie rosnąć. Strony z numerowaną paginacją są prostsze: znajdź link do następnej strony, podążaj za nim i zatrzymaj się na ostatniej. Zawsze ustaw maksymalną liczbę stron lub przewinięć, żeby błąd nie utrzymał crawlera w nieskończonej pętli.

def scroll_until_done(page, selector: str, max_rounds: int = 20) -> int:
    previous = -1
    for _ in range(max_rounds):
        count = page.locator(selector).count()
        if count == previous:
            break
        previous = count
        page.mouse.wheel(0, 4000)
        page.wait_for_timeout(1500)  # daj następnej partii czas na załadowanie
    return previous

Krok 5: oszczędzaj przeglądarkę

Renderowanie jest kosztowne. Blokuj obrazy, czcionki i media, których nie potrzebujesz, i używaj jednej przeglądarki do wielu stron zamiast uruchamiać nową za każdym razem. Zamykaj strony i konteksty, gdy skończysz, żeby pamięć nie rosła w długim przebiegu.

def block_heavy_assets(route):
    if route.request.resource_type in ("image", "font", "media"):
        route.abort()
    else:
        route.continue_()

page.route("**/*", block_heavy_assets)

Krok 6: gdy renderowana strona pokazuje captcha

Czasem renderowana strona prezentuje captcha, zanim pokaże jakąkolwiek treść. Jeśli ta captcha to PopularCaptcha, typ captcha obsługiwany w Scarnox, odczytujesz sitekey ze strony, prosisz o token i umieszczasz token w polu formularza, którego oczekuje strona. Przewodnik PopularCaptcha w Pythonie przechodzi przez ten krok. Inne widgety nie są jeszcze obsługiwane na żywo, więc sprawdź typy captcha wyjaśnione, zanim zaplanujesz cokolwiek na ich podstawie.

Uważaj na samą przeglądarkę. Headless browser, który wyraźnie wygląda na zautomatyzowany, może wywołać więcej sprawdzeń, a nie mniej. Przeczytaj wykrywanie headless browsera, żeby poznać sygnały do obserwowania, i preferuj wolniejsze, rzadsze ładowania stron.

Scrapuj odpowiedzialnie

Sprawdź robots.txt i regulamin strony, zanim zaczniesz renderować ją lub wywoływać jej endpointy.
Utrzymuj niskie limity tempa i cache'uj wyniki, żeby pobierać każdą stronę raz.
Nie scrapuj danych osobowych bez podstawy prawnej.
Jeśli strona ogranicza dostęp, zatrzymaj się. Nie próbuj obchodzić ograniczenia.

Dalsze kroki

Zacznij z darmowym kredytem próbnym, bez karty: załóż konto i przetestuj przepływ PopularCaptcha na stronie, którą posiadasz. Aktualne stawki znajdziesz na stronie cennika.