Bright Data：用 Playwright 抓取必须由 JavaScript 渲染才显示内容的网页，并自动点击“下一页”翻页

用 Playwright 抓取必须由 JavaScript 渲染才显示内容的网页，并自动点击“下一页”翻页。开发时用本机 Chrome 调试，上线时只改一个环境变量，就切换到 Bright Data Browser API 的远程浏览器运行。

先看清成品

成品是 quotes.py：打开练习站 quotes.toscrape.com/js（内容由 JS 生成，直接请求 HTML 拿不到），等待渲染、提取名言、作者和标签，翻页后保存为 quotes.json。本文代码已用本机 Chrome 和 Playwright 1.64.0 实际运行：抓取 3 页共 30 条、内容无重复，第一条作者是 Albert Einstein。本文环境没有 Bright Data 账号，连接远程 Browser API 的部分没有实际运行，连接地址格式按官方示例编写。

注意：采集前先读目标网站的服务条款和 robots.txt，只采集公开、非个人的数据，控制频率，不绕过登录和付费墙，不采集个人信息。本文示例使用专门供练习的网站 toscrape.com。用于商业用途前请咨询法律意见，并遵守所在地关于数据和个人信息保护的法律。

做完之后你会得到什么？

需要准备哪些环境？

官方免费额度页面说明 Browser API 也使用每月免费额度，按流量计费（每 MB 5 个额度）。

第一步：为什么需要浏览器？

先确认页面确实需要渲染：

curl -s https://quotes.toscrape.com/js/ | grep -c 'class="quote"'

输出 0，说明 HTML 里没有内容，名言是浏览器执行 JS 后才生成的。这时 Web Unlocker 这类“拿 HTML”的方式不够用，需要真正的浏览器。

第二步：怎样准备 Browser API？

在控制台添加 Browser API 区域，Overview 里能看到用户名（形如 brd-customer-xxx-zone-yyy）和密码。官方示例的连接地址是：

wss://用户名:密码@brd.superproxy.io:9222

第三步：代码怎么写？

1. 项目结构

js-scraper/
├── quotes.py
└── quotes.json    # 运行后生成

2. quotes.py

"""抓取需要 JavaScript 渲染的页面（练习站 quotes.toscrape.com/js），支持翻页。
配置 BRIGHTDATA_BROWSER_AUTH 时连接 Bright Data Browser API；否则用本机 Chrome 调试。
用法：python quotes.py --pages 3
"""
import argparse
import asyncio
import json
import os

from playwright.async_api import async_playwright

START = "https://quotes.toscrape.com/js/"


async def open_browser(p):
    auth = os.environ.get("BRIGHTDATA_BROWSER_AUTH")  # 形如 brd-customer-xxx-zone-yyy:密码
    if auth:
        return await p.chromium.connect_over_cdp(f"wss://{auth}@brd.superproxy.io:9222")
    return await p.chromium.launch(channel=os.environ.get("LOCAL_CHANNEL", "chrome"), headless=True)


async def scrape(max_pages: int):
    results = []
    async with async_playwright() as p:
        browser = await open_browser(p)
        page = await browser.new_page()
        await page.goto(START, timeout=120_000)
        for n in range(1, max_pages + 1):
            await page.wait_for_selector("div.quote")  # 等 JS 把内容渲染出来
            items = await page.eval_on_selector_all(
                "div.quote",
                """els => els.map(e => ({
                    text: e.querySelector('.text').innerText,
                    author: e.querySelector('.author').innerText,
                    tags: [...e.querySelectorAll('.tag')].map(t => t.innerText)
                }))""",
            )
            results.extend(items)
            print(f"第 {n} 页：{len(items)} 条")
            nxt = page.locator("li.next > a")
            if n == max_pages or await nxt.count() == 0:
                break
            await nxt.click()
            await page.wait_for_load_state("domcontentloaded")
        await browser.close()
    return results


def main():
    ap = argparse.ArgumentParser()
    ap.add_argument("--pages", type=int, default=2)
    ap.add_argument("--out", default="quotes.json")
    a = ap.parse_args()
    data = asyncio.run(scrape(a.pages))
    with open(a.out, "w", encoding="utf-8") as f:
        json.dump(data, f, ensure_ascii=False, indent=2)
    print(f"共 {len(data)} 条，已保存到 {a.out}")


if __name__ == "__main__":
    main()

第四步：怎样运行？

1. 本机调试

python3 -m venv .venv && source .venv/bin/activate
pip install playwright
python quotes.py --pages 3

没有安装 Chrome 时，先执行 playwright install chromium，再用 LOCAL_CHANNEL=chromium python quotes.py。

本文实际输出：

第 1 页：10 条
第 2 页：10 条
第 3 页：10 条
共 30 条，已保存到 quotes.json

2. 切换到 Browser API

export BRIGHTDATA_BROWSER_AUTH='brd-customer-xxx-zone-yyy:你的密码'
python quotes.py --pages 3

代码其他部分不用改。

3. 检查结果

出问题时该怎么调？

1. 报 Executable doesn't exist

本机没有 Chrome，Playwright 也没下载浏览器。执行 playwright install chromium 并设置 LOCAL_CHANNEL=chromium。

2. wait_for_selector 超时

3. 远程连接失败

检查用户名密码是否是 Browser API 区域的（不是 Web Unlocker 区域），以及网络是否允许连接 9222 端口。

常见问题怎么处理？

项目资源

建议先在本机跑 python quotes.py --pages 1，确认能拿到 10 条，再加大页数。

本地完全跑通后，再设置 BRIGHTDATA_BROWSER_AUTH 用远程浏览器跑一页，对比结果一致后再正式使用。