Playwright基础使用教程（附完整代码拆解）
本文适合Playwright新手，将详细讲解Playwright的安装方法、核心优势，以及一段完整自动化代码的每一步知识点，通俗易懂，可直接复制学习，适配CSDN技术博客发布需求。
一、Playwright简介：为什么要使用它？
在学习代码之前，我们先搞清楚：为什么做自动化测试/网页自动化，优先选Playwright？而非Selenium等其他工具？
Playwright是微软推出的一款自动化测试工具，专门用于Web端自动化（浏览器操作），相比其他同类工具，它的核心优势的是“简单、稳定、全能”，具体如下，新手也能快速理解：
无需额外配置驱动：很多工具（比如Selenium）需要手动下载浏览器驱动（如ChromeDriver），还要匹配浏览器版本，新手很容易踩坑；Playwright安装后会自动下载对应浏览器的驱动，无需手动操作，开箱即用。
跨浏览器支持：一次性支持Chrome（谷歌）、Firefox（火狐）、Edge（edge）三大主流浏览器，不用改代码，只需修改一行配置，就能切换浏览器运行。
稳定性极高：内置智能等待机制，不用手动写“等待时间”（比如time.sleep()），能自动等待元素加载完成再操作，避免因元素未加载而报错，新手再也不用被“元素找不到”困扰。
API简洁易懂：语法简单，封装度高，一行代码就能实现“打开浏览器、输入内容、点击按钮”等常用操作，上手成本极低，适合新手入门。
功能强大：支持页面截图、PDF生成、网络请求拦截、多页面操作、无头模式（后台运行，不弹出浏览器）等，满足自动化测试、网页爬取、批量操作等多种需求。
总结：如果你是新手，想快速实现网页自动化（比如自动登录、自动填写表单、自动点击），Playwright是最优选择，不用折腾环境，专注于代码逻辑即可。
二、Playwright安装方法（详细步骤，零踩坑）
Playwright基于Python开发（也支持其他语言），安装分为两步：安装Playwright库 + 安装浏览器驱动（自动），全程命令行操作，新手跟着来就行。
2.1 前提：安装Python
确保你的电脑已经安装了Python（3.7及以上版本），可以通过以下命令验证：
python--version# Windows系统# 或python3--version# Mac/Linux系统如果显示Python版本（如3.9.6），说明已安装；如果未安装，去Python官网下载对应系统版本，安装时勾选“Add Python to PATH”（Windows），避免后续配置环境变量。
2.2 安装Playwright库
打开命令行（Windows：CMD或PowerShell；Mac/Linux：终端），输入以下命令，一键安装Playwright库：
pipinstallplaywright# Windows系统# 或pip3installplaywright# Mac/Linux系统等待安装完成（约1-3分钟，取决于网络速度），安装成功后，不会有报错提示，命令行会回到正常输入状态。
2.3 安装浏览器驱动（自动）
安装完Playwright库后，输入以下命令，自动下载Chrome、Firefox、Edge三大浏览器的驱动（无需手动匹配版本）：
playwrightinstall等待下载完成（约5-10分钟，驱动文件较大，建议用稳定网络），下载完成后，Playwright就可以正常使用了。
2.4 验证安装成功
输入以下命令，若能正常运行，说明安装成功：
fromplaywright.sync_apiimportsync_playwrightwithsync_playwright()asp:browser=p.chromium.launch(headless=True)browser.close()运行后没有报错，就说明环境配置无误，可以开始学习后续代码了。
三、完整代码逐行拆解（每步附说明+作用）
以下是你提供的完整代码，我们逐行拆解，讲解每一步的作用、使用方法和注意事项，确保新手能看懂、会用。
fromplaywright.sync_apiimportsync_playwrightwithsync_playwright()asp:browser=p.chromium.launch(headless=False)# 设置无头模式，默认为Truepage=browser.new_page()page.goto("https://www.baidu.com/")page.set_viewport_size({"width":1920,"height":1080})# print(page.title())# print(page.url)# print(page.content())# 用xpath给输入框填内容ele_input=page.locator('//textarea[@id="chat-textarea"]')ele_input.fill("你好")# css 选择器，给按钮点击ele_bottom=page.locator('#chat-submit-button')ele_bottom.click()page.wait_for_timeout(50000000)3.1 第1行：导入Playwright核心模块
fromplaywright.sync_apiimportsync_playwright作用：导入Playwright的同步API模块（sync_playwright），这是Playwright最常用的模块，适合新手（同步代码逻辑简单，容易理解）。
说明：
Playwright有两种模式：同步（sync）和异步（async），新手优先学同步模式，代码一行一行执行，逻辑清晰；异步模式适合高级场景，需要用到async/await语法。
如果导入报错，说明Playwright安装失败，重新执行“pip install playwright”和“playwright install”命令即可。
3.2 第2行：创建Playwright上下文（核心语法）
withsync_playwright()asp:作用：创建一个Playwright上下文，所有的浏览器操作（打开浏览器、打开页面等）都要在这个上下文里面执行。
说明：
“with”关键字是Python的上下文管理器，作用是“自动释放资源”——当代码执行完上下文里的内容后，会自动关闭浏览器、释放内存，不用手动写“browser.close()”，避免资源泄露。
“as p”是给上下文起一个别名“p”，后续通过“p”来调用浏览器（如p.chromium、p.firefox）。
3.3 第3行：打开Chrome浏览器
browser=p.chromium.launch(headless=False)# 设置无头模式，默认为True作用：启动Chrome浏览器（chromium就是Chrome的开源版本，功能和Chrome完全一致），并返回浏览器实例，后续通过“browser”操作浏览器。
关键参数说明：
headless=False：设置浏览器为“非无头模式”，即会弹出浏览器窗口，我们可以看到自动化操作的全过程（适合调试、学习）；如果设置为“headless=True”，则浏览器在后台运行，不弹出窗口（适合实际运行、批量操作）。其他常用参数（可选）：
slow_mo=1000：设置操作延迟（单位：毫秒），比如1000就是每一步操作延迟1秒，方便观察操作过程，适合新手调试。args=["--start-maximized"]：启动浏览器时最大化窗口，不用手动设置窗口大小。
补充：如果想打开Firefox或Edge浏览器，只需把“p.chromium”改成“p.firefox”或“p.edge”，比如：
browser=p.firefox.launch(headless=False)# 打开Firefox浏览器browser=p.edge.launch(headless=False)# 打开Edge浏览器3.4 第4行：新建浏览器页面
page=browser.new_page()作用：在打开的浏览器中，新建一个空白页面（相当于我们手动打开Chrome后，点击“+”号新建标签页），后续所有的页面操作（访问网址、输入内容等）都在这个“page”实例上执行。
说明：一个浏览器实例（browser）可以新建多个页面，比如再写一行“page2 = browser.new_page()”，就会新建第二个标签页，两个页面可以独立操作。
3.5 第5行：访问指定网址
page.goto("https://www.baidu.com/")作用：让新建的页面跳转到指定的网址（这里是百度首页），相当于我们手动在浏览器地址栏输入网址并按回车。
说明：
网址必须完整，包含“http://”或“https://”，否则会报错（比如写成“www.baidu.com”会失败，必须写“https://www.baidu.com/”）。
Playwright会自动等待页面加载完成，再执行下一行代码，不用手动写等待（这就是它的智能等待优势）。
3.6 第6行：设置浏览器窗口大小
page.set_viewport_size({"width":1920,"height":1080})作用：设置当前页面的视口大小（即浏览器窗口的宽和高），这里设置为1920×1080（高清屏尺寸），避免因窗口太小导致元素被遮挡，无法操作。
说明：
参数是一个字典，key为“width”（宽度）和“height”（高度），值为整数（单位：像素）。
如果想让窗口最大化，也可以用“page.maximize_window()”，替代这一行代码，更简洁：
page.maximize_window()# 窗口最大化，无需设置宽高3.7 第7-9行：注释的调试代码（重要）
# print(page.title())# print(page.url)# print(page.content())作用：这三行是调试代码，被“#”注释了（注释的代码不会执行），用于查看页面信息，方便调试，新手建议掌握。
逐行说明（取消注释后执行）：
print(page.title())：打印当前页面的标题（比如百度首页的标题是“百度一下，你就知道”），用于验证是否成功访问目标页面。print(page.url)：打印当前页面的URL（网址），用于验证页面是否跳转到正确的地址。print(page.content())：打印当前页面的HTML源代码，用于查看页面的元素结构（比如查找输入框、按钮的定位方式）。
3.8 第10-11行：用XPath定位输入框并填写内容
# 用xpath给输入框填内容ele_input=page.locator('//textarea[@id="chat-textarea"]')ele_input.fill("你好")作用：通过XPath定位到页面中的输入框元素，然后向输入框中填写“你好”（这是自动化中最常用的操作之一，比如自动填写表单、搜索框）。
逐行说明：
page.locator('//textarea[@id="chat-textarea"]')：定位元素的核心方法，“locator”是Playwright推荐的定位方式，支持多种定位语法，这里用的是XPath语法。XPath语法解释：
//textarea[@id="chat-textarea"]—— 找到页面中所有“textarea”标签（文本输入框标签），且“id”属性等于“chat-textarea”的元素（id是唯一的，能精准定位到输入框）。补充：如果定位不到元素，大概率是XPath语法错误，或者元素还没加载完成（但Playwright有智能等待，一般不会出现后者）。
ele_input.fill("你好")：给定位到的输入框元素（ele_input）填写内容“你好”，相当于我们手动点击输入框，然后输入文字。
补充：填写内容时，会自动清空输入框中原有的内容，无需手动清空（比如输入框有默认提示文字，fill会自动清空后再填写）。
3.9 第12-13行：用CSS选择器定位按钮并点击
# css 选择器，给按钮点击ele_bottom=page.locator('#chat-submit-button')ele_bottom.click()作用：通过CSS选择器定位到页面中的按钮元素，然后点击按钮（比如提交表单、搜索按钮），和上一步的输入操作配合，完成“输入+提交”的完整流程。
逐行说明：
page.locator('#chat-submit-button')：这里用的是CSS选择器定位，“#”表示根据id属性定位，“chat-submit-button”是按钮的id，和XPath定位的效果一致，只是语法不同。CSS选择器语法解释：
#chat-submit-button—— 找到页面中id为“chat-submit-button”的元素（id唯一，精准定位按钮）。ele_bottom.click()：点击定位到的按钮元素，相当于我们手动点击按钮。
关键区别：XPath和CSS选择器是两种最常用的元素定位方式，新手可根据习惯选择：
XPath：语法更灵活，支持多种条件（比如根据文本、属性、层级关系定位），适合复杂场景。CSS选择器：语法更简洁，执行速度更快，适合简单场景（比如根据id、class定位）。
3.10 第14行：设置等待时间
page.wait_for_timeout(50000000)作用：设置页面等待时间（单位：毫秒），这里设置的是50000000毫秒（约13.8小时），目的是让浏览器保持打开状态，方便我们观察自动化操作的结果（比如点击按钮后，页面的变化）。
说明：
这个等待时间是“强制等待”，不管页面是否加载完成，都会等待指定的时间，适合调试时使用；实际运行自动化脚本时，一般不需要设置这么长的时间，甚至可以省略（因为Playwright有智能等待）。
如果想让脚本执行完后自动关闭浏览器，只需删除这一行代码——当“with”上下文执行完毕后，会自动关闭浏览器。
补充：调试时，也可以设置较短的等待时间，比如5000（5秒），避免等待过久：
page.wait_for_timeout(5000)# 等待5秒后，自动关闭浏览器四、常见问题及解决方法（新手必看）
在运行代码时，新手可能会遇到以下问题，这里整理了常见问题和解决方法，避免踩坑：
问题1：导入模块报错（ModuleNotFoundError: No module named ‘playwright’）
解决方法：重新安装Playwright，执行命令“pip install playwright”，如果还是报错，检查Python环境是否正确（比如多个Python版本，用对应版本的pip安装）。问题2：浏览器无法启动，报错“Could not find browser executable”
解决方法：重新执行“playwright install”，确保浏览器驱动下载完成；如果还是报错，重启电脑后再尝试。问题3：定位不到元素（TimeoutError: Locator timed out）
解决方法：1. 检查定位语法（XPath或CSS选择器）是否正确，可通过“print(page.content())”查看页面HTML，确认元素的id、标签是否正确；2. 确认页面是否成功加载（可添加“page.wait_for_timeout(3000)”，等待3秒后再定位）。问题4：点击按钮后，页面没有反应
解决方法：检查按钮是否被遮挡（比如弹窗、广告），可设置窗口最大化（page.maximize_window()）；或者用“page.wait_for_selector()”等待按钮可点击后再点击：page.wait_for_selector('#chat-submit-button') # 等待按钮可点击 ele_bottom = page.locator('#chat-submit-button') ele_bottom.click()
五、总结
本文详细讲解了Playwright的安装方法、核心优势，以及完整自动化代码的每一步知识点，重点关注“定位元素”和“常用操作”，新手只要跟着代码拆解一步步学习，就能快速上手Playwright。
后续可以尝试修改代码（比如更换网址、修改输入内容、切换浏览器），多练习就能熟练掌握；如果需要实现更复杂的功能（比如自动登录、截图、爬取数据），可以关注后续教程。
最后，将本文代码复制到Python文件中，运行即可看到完整的自动化效果，赶紧动手试试吧！
