处理分页与动态内容
跟踪下一页链接，并使用 Playwright 处理由 JavaScript 渲染的页面。
处理分页与动态内容 是 CoddyKit 上的免费 AI Agents 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 AI Agents 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 AI Agents 课程共包含 4 节课。
分页问题
大多数真实网站不会在单个页面上提供全部数据。为了减少负载，结果会分散在多个页面中。智能体必须检测并遵循分页，以收集完整的数据集。
常见的分页模式有两种：下一页链接和页码网址模式。
检测下一页链接
许多网站都有“下一页”按钮或箭头链接。请查找带有 rel='next' 属性或文本类似“下一页”的锚点标签，提取其 href，并循环跟随该链接，直到不存在下一页为止。
from bs4 import BeautifulSoup
import httpx
def scrape_all_pages(start_url: str) -> list:
results = []
url = start_url
while url:
response = httpx.get(url, timeout=10.0)
soup = BeautifulSoup(response.text, 'html.parser')
# Collect data from this page
for item in soup.select('.result-item'):
results.append(item.text.strip())
# Find the next page link
next_link = soup.find('a', rel='next') or soup.find('a', string='Next')
url = next_link.get('href') if next_link else None
return results页码网址模式
许多 API 和网站使用可预测的网址模式：/results?page=1、/results?page=2 等。智能体可以直接遍历这些网址，而无需解析 DOM 来查找下一页链接。
import httpx
def scrape_paginated_api(base_url: str, max_pages: int = 10) -> list:
all_items = []
for page in range(1, max_pages + 1):
response = httpx.get(
base_url,
params={'page': page, 'per_page': 50},
timeout=10.0
)
response.raise_for_status()
data = response.json()
items = data.get('results', [])
if not items:
break # No more data
all_items.extend(items)
print(f'Page {page}: fetched {len(items)} items')
return all_items基于游标的分页
现代 API（GitHub、Slack、Twitter）使用基于游标的分页。每个响应都会包含下一页所需的游标令牌。请在下一次请求中传入该游标，直到它不存在或为空。
import httpx
def fetch_with_cursor(url: str, headers: dict) -> list:
all_data = []
cursor = None
while True:
params = {'cursor': cursor} if cursor else {}
response = httpx.get(url, headers=headers, params=params, timeout=10.0)
response.raise_for_status()
data = response.json()
all_data.extend(data.get('items', []))
cursor = data.get('next_cursor') # None when done
if not cursor:
break
return all_data静态内容与动态内容
有些页面会在初始 HTML 交付后通过 JavaScript 加载内容。普通 HTTP 客户端只能收到空壳，实际数据会由浏览器中的 JS 注入。
对于这类页面，Playwright 等工具会运行真实的浏览器引擎，并等待 JavaScript 执行后再提取内容。
安装并导入 Playwright
使用 pip install playwright 安装 Playwright，然后运行 playwright install chromium 下载浏览器。在异步智能体工作流中，请使用 async_playwright()。
# Installation (run in terminal):
# pip install playwright
# playwright install chromium
from playwright.async_api import async_playwright
import asyncio
async def fetch_dynamic(url: str) -> str:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
html = await page.content() # Full rendered HTML
await browser.close()
return html
# html = asyncio.run(fetch_dynamic('https://example.com'))等待动态内容加载
JavaScript 页面通常会异步加载数据。请让 Playwright 等待特定元素出现后再提取内容，以确保您需要的数据确实存在于 DOM 中。
from playwright.async_api import async_playwright
async def scrape_dynamic_table(url: str) -> list:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
# Wait for the table to appear in the DOM
await page.wait_for_selector('table.results', timeout=10000)
html = await page.content()
await browser.close()
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, 'html.parser')
return [td.text for td in soup.select('table.results td')]点击并与页面交互
Playwright 可以模拟用户交互，包括点击、填写表单、滚动和键盘输入。这样，智能体就能处理登录流程、下拉菜单或无限滚动页面。
from playwright.async_api import async_playwright
async def click_load_more(url: str) -> str:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
# Click the 'Load More' button
load_more = page.locator('button:text("Load More")')
if await load_more.count() > 0:
await load_more.click()
await page.wait_for_timeout(2000) # wait 2s for content
html = await page.content()
await browser.close()
return html处理无限滚动
有些网站会在您向下滚动时加载更多内容。Playwright 可以模拟滚动来触发这些加载操作。请反复滚动，并在每次滚动后检查是否出现了新内容。
from playwright.async_api import async_playwright
async def scrape_infinite_scroll(url: str, scroll_count: int = 5) -> str:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
for _ in range(scroll_count):
await page.evaluate('window.scrollTo(0, document.body.scrollHeight)')
await page.wait_for_timeout(1500) # wait for new content
html = await page.content()
await browser.close()
return html将 Playwright 与 BeautifulSoup 结合使用
Playwright 渲染页面并返回完整 HTML 后，将其传入 BeautifulSoup 以便轻松提取数据。这样可以结合两个库各自的优势。
from playwright.async_api import async_playwright
from bs4 import BeautifulSoup
async def extract_js_rendered_data(url: str) -> list:
async with async_playwright() as p:
browser = await p.chromium.launch(headless=True)
page = await browser.new_page()
await page.goto(url)
await page.wait_for_selector('.product-card')
html = await page.content()
await browser.close()
soup = BeautifulSoup(html, 'html.parser')
products = []
for card in soup.select('.product-card'):
products.append({
'name': card.select_one('.name').text.strip(),
'price': card.select_one('.price').text.strip()
})
return products选择合适的工具
并非每个页面都需要 Playwright。请使用能够完成任务的最简单方法：
- 静态 HTML：httpx + BeautifulSoup（速度快，没有浏览器开销）
- 带分页的 JSON API：使用带页码/游标参数的 httpx
- JS 渲染的内容：异步 Playwright（速度较慢，但功能更强）
请始终从静态方法开始，只有在需要时才使用 Playwright。
知识检查：分页与动态内容
请测试您对分页和动态内容处理的理解。
回顾：分页与动态内容
现在，您的智能体已经能够处理各种网页内容：
- 跟随下一页链接，或遍历网址中的页码参数
- 使用游标令牌处理现代 API 的分页
- 使用
async_playwright()处理 JavaScript 渲染的页面 - 使用
page.wait_for_selector()等待元素出现 - 将 Playwright 与 BeautifulSoup 结合使用，以便轻松提取数据
请始终从最简单的方法开始，只有在静态方法无法满足需求时才升级到 Playwright。
常见问题解答
「处理分页与动态内容」课时是免费的吗？
是的 — 「处理分页与动态内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 AI Agents 课程的其余内容，请升级到 CoddyKit PRO。 AI Agents 课程共包含 4 节课。
「处理分页与动态内容」这节课中我会学到什么？
跟踪下一页链接，并使用 Playwright 处理由 JavaScript 渲染的页面。 你通过在浏览器中直接运行的动手代码来练习 AI Agents，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 AI Agents 需要有经验吗？
无需任何先前经验。CoddyKit 上的 AI Agents 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「处理分页与动态内容」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 AI Agents 课中编写并运行代码吗？
能。每节 AI Agents 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。