刚接触Python爬虫的朋友十有八九是从requests库开始的拿到URL发请求解析HTML看似行云流水。可一旦遇到动态页面这套组合拳就失灵了——HTML文本里根本没有你要的数据数据是页面加载后由JavaScript渲染出来的。这时候就需要Playwright这类浏览器自动化工具出场它帮你控制一个真实浏览器打开页面、等待元素、然后拿到渲染后的完整HTML。这一节我们就从零开始写一个最小可用的Playwright脚本走完整条流程。我不会给你堆一堆理论而是直接把我自己踩过的坑、验证过能跑的代码、以及为什么这么写都讲清楚。这篇文章适合刚学完Python基础、知道requests和BeautifulSoup基本用法、但面对动态页面束手无策的人。你只要安装了Python跟着操作半小时内就能跑出第一个Playwright脚本。1. 为什么要从 requests 切换到 Playwright1.1 动态页面到底“动”在哪先理解一个现象你用浏览器打开一个网页右键查看源代码发现里面全是div idapp/div这种空壳正文数据一个都没有。但你在浏览器里肉眼看到的内容是完整的文字、图片、列表都在。这就是典型的动态渲染页面。动态页面的流程大致是这样浏览器先请求到一份HTML骨架然后JavaScript脚本开始执行脚本可能会再去请求一些接口API拿到JSON数据再把这些数据通过DOM操作插入到页面节点里。最后用户看到的内容是“JS执行完毕之后”的状态。关键区别就在这里requests库拿到的是服务器最初返回的HTML也就是那个空壳。那些需要JS执行后才能生成的数据requests根本看不到。你就算把返回的HTML拿去用BeautifulSoup解析也只能解析出一个空架子。动态页面常见的技术包括Vue、React、Angular这些框架也包括各种异步加载、滚动加载、点击加载更多的页面。只要是数据依赖脚本运行后产生的都可以叫动态页面。1.2 Playwright 相比 Selenium/requests 的优势很多人第一反应是处理动态页面不是还有Selenium吗对Selenium确实能处理但Playwright在几个核心体验上更符合现在写爬虫的习惯。Playwright是微软开源的一个自动化测试工具它支持的浏览器包括Chromium、Firefox和WebKit。对爬虫来说它最大的价值是你写代码控制一个真实的浏览器环境浏览器能渲染的页面它都能拿到。它和Selenium相比有几个非常直观的优点。第一安装简单一条pip命令装库一条命令装浏览器内核不需要像Selenium那样还要单独下载driver、管理driver版本。第二API设计更现代自带自动等待机制你定位元素时它会等元素出现、可见、可以交互不用像老一代工具那样整天sleep。第三有同步和异步两套API异步版可以轻松做并发抓取。第四默认就是无头模式抓数据时不会弹出浏览器窗口但对新手来说可以先开有头模式调试很直观。和requests相比Playwright不是替代关系而是互补关系。requests适合那些接口直接返回JSON、不需要JS渲染的页面Playwright适合必须走完整浏览器渲染流程的动态页面。会了两者爬虫生涯才算基本完整。1.3 这一节你要达成的目标这一节我们只做三件事对应Playwright的核心三部曲打开页面、等待元素、拿到渲染后HTML。第一步用page.goto()打开一个网址。第二步用page.wait_for_selector()等待一个关键元素出现这个元素一旦出现说明内容已经渲染好了。第三步用page.content()拿到渲染后的完整HTML你也可以用locator.inner_html()只拿某一块内容。这三步走完你就掌握了Playwright最常见的使用方式。后面的课程可能会教你点击、输入、翻页、处理iframe但只要这三步打好底子那些都是在现有基础上的延伸。2. 环境准备装好 Playwright 只需要两条命令2.1 安装 Python 库先假设你已经装好了Python版本建议3.8以上因为Playwright对旧版本支持有限。如果你用的是较新的Python 3.11、3.12完全没问题。安装库本身非常简单一条命令搞定pip install playwright国内网络环境下如果你觉得豆瓣、清华的镜像源更快也可以用这种方式pip install playwright -i https://pypi.tuna.tsinghua.edu.cn/simple这个看个人习惯。安装完成后你可以验证一下库是否正常pip show playwright看到版本号就说明库已经装好了。2.2 下载浏览器内核库装好还差一步。Playwright不像requests那样可以在虚拟环境里直接发请求它需要真实操作浏览器。所以你得让Playwright下载一份它专用的Chromium内核。在命令行里执行playwright install chromium这个命令会下载Chromium浏览器到你的用户目录下的缓存文件夹里。安装过程中如果网络不好会等很久甚至会报错。这是新手碰到的第一个高频问题。如果你下载特别慢可以设置环境变量让Playwright从国内镜像拉取浏览器内核。以Windows为例在命令行里执行set PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ playwright install chromiummacOS或Linux用户可以用export命令export PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright/ playwright install chromium这个地址是npmmirror的Playwright浏览器镜像我自己实测过速度比默认源快很多。如果你已经安装了系统自带的Chrome或Edge其实也可以不下载Chromium内核直接用现有浏览器。启动浏览器时加上channel参数就行比如browser playwright.chromium.launch(channelchrome)channelchrome会让Playwright改用你电脑上安装的Google Chromechannelmsedge则改用Edge。这个方案能省掉下载内核的功夫不过它依赖你已经装好了对应浏览器。2.3 验证安装是否成功安装完成后写个10秒钟的小脚本验证一下。新建一个test_playwright.py文件输入以下内容from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch(headlessTrue) page browser.new_page() page.goto(https://example.com) print(page.title()) browser.close()运行它python test_playwright.py如果屏幕上打印出Example Domain恭喜你环境彻底通了。如果报错说找不到浏览器多半是因为playwright install chromium没装成功重新执行一遍即可。browser.close()这行很容易被新手忽略但很有必要。每个浏览器实例都会占用系统内存不关闭的话任务多了能把内存吃满。后面我们会改成更安全的上下文管理器写法不用手动写close。3. 第一个 Playwright 脚本打开页面、等待元素、拿到渲染后 HTML3.1 打开页面goto 和网络等待Playwright的同步API用起来最直观核心对象有三个Playwright、Browser、Page。你可以这么理解sync_playwright()启动一个控制器chromium.launch()开了一个浏览器窗口browser.new_page()在窗口里开了一个标签页后面的操作都在这个标签页上完成。打开页面的方法叫gotopage.goto(https://quotes.toscrape.com/js/, wait_untildomcontentloaded, timeout30000)这里有两个参数很关键新手建议先弄明白。第一个是wait_until它决定goto什么时候算“完成”。有几个可选值load表示等页面所有资源都加载完包括图片、样式、脚本这是默认值domcontentloaded表示等HTML解析完就返回速度更快networkidle表示等网络连接降到0个也就是说页面里没什么请求了才返回最严格但也可能等很久。对爬虫来说如果不是很在意页面里的图片资源用domcontentloaded就够后面接一个wait_for_selector做精确等待是效率和稳定性的平衡。第二个是timeout单位是毫秒默认是30000毫秒也就是30秒。如果一个页面30秒都没打开成功goto会抛超时异常。在弱网环境下你可以把这个值调大比如60000。讲个我实际遇到的场景以前用requests抓一个页面5秒钟就能拿到响应但用Playwright打开同一个页面时经常卡在goto这一步。后来发现是页面里有一些慢到离谱的广告脚本一直加载不完导致wait_untilload等不到结束。后来改成wait_untildomcontentloaded问题立刻消失。所以不要迷信load你需要的不是“完整加载”而是“我需要的数据出现了”。3.2 等待元素wait_for_selector 背后的逻辑goto只能保证页面框架到达不能保证数据渲染完成。动态页面的常见情况是HTML骨架加载完了但JS还在跑数据还没插入到DOM里。这时候你直接去提取HTML拿到的仍然是空壳。解决办法是等一个“信号”元素。什么叫信号元素就是这个元素只要出现在页面里就说明JS已经把数据渲染出来了。比如名言网站页面里每一句名言都放在div.quote里面。那我就等这个div.quote出现page.wait_for_selector(div.quote, timeout10000)wait_for_selector会反复检查页面直到选择器匹配到至少一个元素或者超时。这比用sleep(5)然后碰运气要靠谱得多。因为sleep你没法预测网络快慢等久了浪费时间等短了元素还没出现。Playwright里还有一套“自动等待”机制这个后面还会遇到。简单说就是当你使用locator.click()、locator.fill()这类操作时Playwright会自己等元素出现、可见、可用不用你手动调用wait_for_selector。但如果你只是想提取HTML不做交互操作那最好还是先wait_for_selector一下给页面一点渲染时间。这里有个经验等待元素时要选择“数据存在”的标志而不是“页面存在”的标志。比如等body出现没有任何意义因为刚打开页面它就在了。要等的是你未来真正要解析的那个列表、那条商品信息、那个标题节点。3.3 拿到渲染后的 HTMLcontent() 与 inner_html()页面渲染完成后拿最终的HTML有两种常见姿势。第一种拿整份页面HTML用page.content()html page.content()这个方法返回当前页面DOM序列化后的完整HTML字符串注意它是“当前状态”的DOM不是HTML源代码。你在浏览器里右键“查看源代码”看到的是最初那份content()返回的是经过JS修改后的最终状态。区别就在这很多动态数据已经在里面了。第二种我只想拿某个区域比如名言列表那一块。可以先定位元素再取内部HTMLquote_list page.locator(div.quote).first html_block quote_list.inner_html()如果确实想输出整个页面但还是希望少消耗点内存可以用page.locator(body).inner_html()这时候得到的还是不包含html和head标签的body内容需要哪个按需选。这里面有个性能细节。page.content()是要把整个DOM树序列化成字符串页面越大序列化耗时越长。如果你只为了解析某几条数据用locator配合inner_html()或inner_text()反而更划算。但这一节标题叫“拿到渲染后HTML”所以我重点讲content()后面的课程里你会慢慢体会这两者的取舍。3.4 一个可以直接跑的实例为了让你有直观感受我挑了一个公开的、适合练手的动态页面https://quotes.toscrape.com/js/。这个页面本身是某爬虫教程网站提供的内容是一句句名言quotes每一句下面有作者和标签。它是典型的JS渲染页面刚开始拿到的HTML里只有空壳数据是页面内部脚本从接口拿过来后拼出来的。完整代码如下from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch(headlessTrue) page browser.new_page() page.goto(https://quotes.toscrape.com/js/, wait_untildomcontentloaded) page.wait_for_selector(div.quote, timeout10000) html page.content() print(HTML长度:, len(html)) print(html[:500]) first_quote page.locator(div.quote).first print(第一条名言:, first_quote.inner_text()) browser.close()这段代码非常好理解启动Chromium打开页面等待名言节点出现然后分别打印整份HTML和第一条名言。运行之后你会在命令行里看到类似这样的输出HTML长度: 19945 ... 第一条名言: “The world as we have created it is a process of our thinking. It cannot be changed without changing our thinking.” — Albert EinsteinHTML长度已经不再是空壳那么短了说明渲染后的DOM结构拿到了。如果你把html[:500]打印出来会看到div classquote、span classtext这些节点说明JS已经执行完毕并完成了插入。我建议你先把这段代码跑通再改着玩比如把headlessTrue改成headlessFalse你会看到浏览器真的被打开页面在屏幕上闪一下然后自动关闭。这个“有头模式”对调试很有帮助。3.5 如果用 BeautifulSoup 解析这份 HTMLpage.content()拿到了HTML字符串最自然的思路就是把它喂给熟悉的BeautifulSoup用之前的CSS选择器知识解析。真就这么简单from bs4 import BeautifulSoup soup BeautifulSoup(html, html.parser) quotes soup.select(div.quote) for q in quotes[:3]: text q.select_one(span.text).text author q.select_one(span.author).text print(text, ——, author)你会发现以前requestsBeautifulSoup抓不到的动态内容现在都能用同样的解析逻辑拿到。Playwright帮你解决了“动态渲染”这一步后面的解析反而回归传统了。不过这里我要提醒一个滥用风险不要每次都把整份HTML丢给BeautifulSoup去解析尤其页面很大的时候序列化和解析都是双份开销。如果你的目标只是拿页面里的少数数据直接用Playwright的locator更高效。这一节内容很多两种方式你都要能看懂后面才好根据场景取舍。4. 踩坑记录第一次跑 Playwright 最常见的 5 个问题4.1 Timeout 30000ms exceeded 怎么办这是新手遇到最多的报错之一长得像这样TimeoutError: Timeout 30000ms exceeded.翻译成大白话就是等一个东西等了30秒还没等到。这个“东西”可能是goto等待的页面加载也可能是wait_for_selector等待的元素。排查步骤我一般这样来先看等的是哪个操作如果卡在goto就把wait_until改成domcontentloaded试试如果卡在wait_for_selector说明你选择器写错或者这个元素真的不在当前页面。你可以在超时前先看一眼页面状态比如打印page.content()前1000个字符看看页面到底渲染了什么。还有一个调试利器page.screenshot()。在wait_for_selector之前或之后加一行截图page.screenshot(pathdebug.png, full_pageTrue)然后打开图片看页面长什么样一目了然。如果页面上根本没有div.quote那你等的方向就错了应该检查实际DOM结构换成真实存在的选择器。4.2 定位不到页面里的元素选择器半天匹配不到元素常见原因有三类。第一类选择器语法不对。Playwright支持CSS选择器和文本选择器比如div.quote、text名言。如果项目结构复杂你可以用page.locator(div.quote).all()返回所有匹配元素或者用locator.count()看看数量print(page.locator(div.quote).count())如果数量是0那说明这个选择器在当前页面里确实找不到。第二类元素在iframe里。页面里嵌着一层子页面直接定位是找不到的需要先切到frame里。这个问题比较复杂后面的章节会专门讲。这里你先知道有这个东西。第三类元素在shadow DOM里。一些复杂的前端组件会把节点封装在Shadow DOM里普通选择器无法穿透。这个同样属于进阶内容新手阶段可以先绕开找一些暴露在普通DOM里的节点作为信号。4.3 拿到的 HTML 还是空的明明等了半天page.content()返回的内容和requests拿到的一模一样数据依然不存在。我排查过很多次原因通常是这三种。第一种你等错了信号。比如你觉得等某个外部容器出现就行但那个容器在HTML骨架里本来就有不等同于数据加载完成。等信号元素要选数据本身所在的那一层节点比如名言区域里的div.quote。第二种页面数据其实不在当前页面里而是通过弹窗、悬浮层、或者某个接口动态加载出来的。你需要触发某个事件后才会出现单靠等待是等不来的。这种情况可以配合点击或滚动操作后续课程会展开。第三种你用的是有头模式一边看页面一边调试发觉页面数据存在但脚本写成无头模式就跑不出来。这跟浏览器的渲染行为、检测机制都有关系我下面单独讲。4.4 有头模式和无头模式结果不一致headlessFalse时你会看到一个真实浏览器窗口打开数据肉眼可见。headlessTrue时浏览器在后台运行页面结构应该是相同的但部分JS可能会有针对无头浏览器的不同表现。有头模式和无头模式不一致通常不是Playwright的问题而是页面脚本在通过一些特征感知环境。最典型的特征是navigator.userAgent等浏览器指纹信息还有window.chrome对象、浏览器视口大小、屏幕分辨率这些。破解思路不是本篇重点但你可以先做两个简单的调整能降低大部分不一致的概率。第一设置一个正常的视口尺寸不要用默认的狭长视口page browser.new_page(viewport{width: 1280, height: 800})第二设置一个常见的浏览器User-Agentpage browser.new_page( user_agentMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 )这两个设置在模拟“真实用户”场景里很常用。不过我得实话告诉你真碰上硬核检测这两招不够用。那是另一座山我们以后有合适的章节再爬。4.5 懒加载、滚动加载怎么处理很多动态页面为了性能不会一次性把所有数据都渲染出来而是等你滚动页面到接近底部时再异步请求下一页的数据。这时候光wait_for_selector是不够的因为元素还没有被创建出来。一个通用的办法是用鼠标滚轮模拟下拉。Playwright里可以这样for _ in range(5): page.mouse.wheel(0, 1000) page.wait_for_timeout(1000)每滚动一次等一秒再滚一次。滚几轮之后你需要的元素通常会陆续出现。你还可以每轮结束检查一下元素数量达到目标就提前退出。这种“滚动等待”的模式在爬取无限加载页面时很常用。Playwright里没有内置“滚到底”的API但配合循环、计数、判断实现起来也不难。5. 从“拿到 HTML”到“稳定爬取”的几条经验5.1 用 locator 直接从页面拿数据不要总是先拿 HTML第一节课程教了你page.content()拿HTML但我反而希望你在后面养成一个习惯能用locator直接拿数据就别绕道content()。举个对比。直接拿第一条名言和作者可以这样quote page.locator(div.quote).first text quote.locator(span.text).inner_text() author quote.locator(span.author).inner_text()如果要拿整个列表还可以这样for quote in page.locator(div.quote).all(): text quote.locator(span.text).inner_text() author quote.locator(span.author).inner_text() print(text, author)这种方式有几个好处不用把整个DOM序列化成字符串内存更省代码逻辑更接近页面结构Playwright的自动等待还会帮助你等元素就绪稳定性更高。page.content()更多用于整页快照、保存网页、调试排查而不是每条数据都走一遍完整序列化。5.2 等待接口响应比 sleep 更靠谱新手最容易写出的代码是这样page.goto(https://...) page.wait_for_timeout(5000)sleep定点等待不是不能用但不稳定。网络快的时候5秒纯浪费网络慢的时候5秒可能还不够。推荐用等待元素、等待接口响应这类“条件等待”。Playwright可以等一个接口返回with page.expect_response(lambda response: /api/quote in response.url and response.status 200) as response_info: page.goto(https://quotes.toscrape.com/js/) response response_info.value这里的意思是在打开页面到返回的过程中只要检测到某个接口响应了就立刻继续后面的代码。你甚至可以从接口响应里直接抓到JSON根本没必再解析HTML。这个思路叫“接口拦截”属于动态页面爬虫的高阶技巧。本节先知道有这回事后面会细讲。5.3 单浏览器多页面 vs 多浏览器实例写爬虫时很多人会纠结每一个任务都新开浏览器是不是太浪费实际上浏览器可以开多个标签页也就是多个page但共享同一个浏览器进程browser p.chromium.launch(headlessTrue) page1 browser.new_page() page2 browser.new_page() page1.goto(https://example.com) page2.goto(https://example.org)这样做的好处是减少启动浏览器的开销。但要注意如果你同时操作太多页面网络连接和内存占用也会涨。另一种做法是直接开多个浏览器实例彻底隔离适合做并发抓取。Playwright异步API专门用于高并发场景。对新手来说先学会单页面跑通再慢慢加并发别一开始就想着多线程。5.4 下一节可以玩什么到这一步你已经能用Playwright打开页面、等待元素、拿到渲染后HTML了。这个能力足以解决那些requests搞不定的“空壳页面”。但动态页面不只是“加载完给你看”这么简单大多数时候你还要和页面交互点击“加载更多”按钮、填写搜索框、选择下拉菜单、翻页、登录、处理弹窗。这些交互操作的核心就是locator的点击、填表、按键方法。我个人在实际操作中有一个体会Playwright的学习曲线很平缓只要你把“打开页面”和“等待元素”这两步理解透了后面学任何交互操作都是在丰富“怎么找准对象”的技巧。所以这一节课你多花点时间也没关系把这段代码敲几遍改改选择器看看页面变化。越熟练后面第八章的“点击、输入与请求拦截”就越轻松。