Playwright的简单使用完整指南一、引言在现代Web开发与测试领域自动化操作浏览器已成为一项不可或缺的技能。无论是进行端到端测试、爬取动态渲染的页面数据还是自动化完成表单提交等重复性工作一个强大且易用的工具至关重要。Playwright 正是为此而生。它由微软开发是一个开源自动化框架通过单一API即可驱动Chromium、Firefox和WebKit三大浏览器引擎。相比传统工具Playwright在设计上更贴合现代Web应用它默认等待元素可操作后才执行动作极大减少了“等待超时”这类不稳定的问题。同时它原生支持自动录屏、网络拦截、移动端模拟等高级功能而这一切都可以通过简洁的代码实现。本文将带你从零开始掌握Playwright的安装、基础用法与实战技巧让你轻松迈入浏览器自动化的大门。二、基础概念Playwright的核心思想是模拟真实用户的操作。它不是通过注入JavaScript来暴力操控页面而是在浏览器底层协议层面进行交互因此能处理更多复杂场景比如跨域iframe、Shadow DOM等。2.1 三大核心对象理解Playwright首先要熟悉三个关键对象Browser浏览器实例代表一个浏览器进程。你可以通过 chromium.launch() 来启动一个Chromium实例。BrowserContext浏览器上下文一个独立的浏览器会话相当于一个全新的隐身窗口。不同上下文之间的Cookie、LocalStorage完全隔离非常适合模拟多用户登录场景。Page页面一个浏览器标签页所有页面操作导航、点击、输入都在这个对象上进行。2.2 基本用法启动与导航我们先安装Playwright并编写第一个脚本。安装Playwright库pip install playwright安装所需的浏览器驱动仅需执行一次playwright install以下是一个最基础的脚本它会启动浏览器、打开百度首页并打印标题import asynciofrom playwright.async_api import async_playwrightasync def main():# 启动Playwrightasync with async_playwright() as p:# 启动Chromium浏览器设置headlessFalse可以看到浏览器界面browser await p.chromium.launch(headlessFalse)# 创建一个新的上下文context await browser.new_context()# 创建一个新页面page await context.new_page()# 导航到目标网址 await page.goto(https://www.baidu.com) # 获取并打印页面标题 title await page.title() print(f页面标题是: {title}) # 关闭浏览器 await browser.close()asyncio.run(main())这段代码展示了Playwright的异步工作方式。async/await 确保了在执行耗时操作如网络请求时不会阻塞整个程序这也是Playwright高效运行的基础。2.3 选择器与元素交互找到页面上的元素是自动化的关键。Playwright支持多种选择器策略包括CSS选择器、XPath、文本内容、角色等。假设页面中有一个id为su的按钮和一个name为wd的输入框通过CSS选择器点击按钮await page.click(‘#su’)通过文本内容找到元素并点击await page.click(‘text登录’)在输入框中输入文本await page.fill(‘input[name“wd”]’, ‘Playwright教程’)使用更语义化的角色定位器推荐await page.get_by_role(‘button’, name‘搜索’).click()Playwright在执行这些操作前会自动等待元素变为可见且可操作状态这大大简化了等待逻辑的编写。三、实战应用3.1 示例一自动搜索并截图这个示例演示了如何打开百度输入关键词进行搜索并对搜索结果页面进行截图。import asynciofrom playwright.async_api import async_playwrightasync def search_and_screenshot():async with async_playwright() as p:browser await p.chromium.launch()page await browser.new_page()# 1. 打开百度 await page.goto(https://www.baidu.com) # 2. 在搜索框中输入关键词 # 使用placeholder定位输入框 search_box page.get_by_placeholder(百度一下) await search_box.fill(Playwright 自动化测试) # 3. 点击“百度一下”按钮 search_button page.get_by_role(button, name百度一下) await search_button.click() # 4. 等待搜索结果加载完成 # 等待包含搜索结果的容器出现 await page.wait_for_selector(#content_left) # 5. 对当前页面进行全屏截图 await page.screenshot(pathsearch_result.png, full_pageTrue) print(截图已保存为 search_result.png) await browser.close()asyncio.run(search_and_screenshot())代码说明get_by_placeholder 和 get_by_role 是Playwright推荐的语义化定位方式比传统的CSS选择器更稳定因为它们更贴近用户视角。wait_for_selector 用于显式等待某个元素出现确保页面动态内容已加载完毕。screenshot 方法的 full_pageTrue 参数会截取整个滚动页面而非仅当前可视区域。3.2 示例二表单自动填写与提交许多自动化场景涉及表单操作。下面的代码模拟了在示例网站中填写注册信息并提交的过程。import asynciofrom playwright.async_api import async_playwrightasync def auto_fill_form():async with async_playwright() as p:browser await p.chromium.launch(headlessFalse) # 显示浏览器便于观察page await browser.new_page()# 打开一个用于测试表单的网站 await page.goto(https://www.w3schools.com/html/html_forms.asp) # 填写名和姓 await page.fill(input[namefirstname], 张) await page.fill(input[namelastname], 三) # 选择性别单选框通过value属性定位 await page.check(input[valuemale]) # 点击提交按钮 await page.click(input[typesubmit]) # 等待提交后的页面加载 await page.wait_for_load_state(networkidle) # 获取并打印提交结果页面的部分内容 result_text await page.text_content(body) print(提交后的页面内容片段:, result_text[:200]) await browser.close()asyncio.run(auto_fill_form())代码说明fill 方法会先清空输入框原有内容再填入新值模拟了真实的用户输入行为。check 方法用于勾选复选框或单选框与之对应的是 uncheck。wait_for_load_state(‘networkidle’) 是一种智能等待它会等到网络请求基本停止500ms内无新请求这通常意味着页面动态内容已加载完毕。3.3 示例三网络请求拦截与数据抓取Playwright强大的网络拦截能力使其成为数据抓取的利器。我们可以监听并捕获特定的API响应直接获取结构化的JSON数据而无需解析HTML。import asynciofrom playwright.async_api import async_playwrightasync def intercept_api_data():async with async_playwright() as p:browser await p.chromium.launch()page await browser.new_page()# 用于存储捕获到的响应数据 captured_data [] # 注册响应监听事件 async def handle_response(response): # 筛选出目标API接口 if api.github.com/users in response.url and response.status 200: json_data await response.json() captured_data.append(json_data) print(f捕获到API数据: {json_data[login]} - {json_data[name]}) page.on(response, handle_response) # 访问GitHub用户页面该页面会触发多个API请求 await page.goto(https://github.com/microsoft) # 等待网络空闲确保所有请求都已完成 await page.wait_for_load_state(networkidle) print(f共捕获到 {len(captured_data)} 条API数据) await browser.close()asyncio.run(intercept_api_data())代码说明page.on(‘response’, callback) 注册了一个事件监听器每当页面收到HTTP响应时都会触发回调函数。在回调函数中我们可以根据URL、状态码等条件筛选出感兴趣的请求并直接通过 response.json() 获取解析后的数据。这种方法比传统的“等待元素出现再提取文本”更高效、更稳定尤其适合现代单页应用SPA的数据抓取。四、常见问题与解决方案在使用Playwright的过程中你可能会遇到一些典型问题以下是解决方案。问题1运行时报错 playwright._impl._api_types.Error: Browser closed原因通常是因为浏览器驱动未正确安装或系统缺少必要的依赖库。解决方案确保已执行 playwright install 安装浏览器。在Linux服务器上可能需要安装额外的系统依赖。运行 playwright install-deps 可以自动安装所有缺失的依赖包。检查代码中是否过早关闭了浏览器实例。问题2元素定位失败提示 TimeoutError原因元素在超时时间内未出现或不可操作。解决方案使用更稳定的语义化定位器如 get_by_role、get_by_label、get_by_text避免依赖易变的CSS类名。显式增加等待await page.wait_for_selector(‘#my-element’, state‘visible’)。检查元素是否在iframe内如果是需要先通过 page.frame_locator() 进入对应的iframe再进行定位。问题3执行速度慢脚本不稳定原因默认的超时设置可能过长或网络环境不稳定。解决方案在 launch 时设置全局超时browser await p.chromium.launch(timeout10000)。对于不需要加载图片、字体等资源的场景可以在创建上下文时拦截不必要的请求以加速context await browser.new_context()await context.route(re.compile(r’.(png|jpg|jpeg|gif|svg|css|woff|woff2)$),lambda route: route.abort())使用 headlessTrue 模式运行减少GUI渲染开销。五、总结通过本文我们系统地学习了Playwright的基础概念与实战应用。从核心对象Browser、Context、Page的理解到元素定位、表单填写、网络拦截等关键操作你已经掌握了使用Playwright进行浏览器自动化的核心技能。回顾一下学习路径基础入门学会启动浏览器、导航页面、定位元素。实战演练通过搜索截图、表单提交、API拦截三个典型场景将知识转化为实际能力。问题排查了解了常见报错的原因及优化脚本稳定性的方法。 深入理解playwright的简单使用的实用使用教程
Playwright的简单使用完整指南一、引言在现代Web开发与测试领域自动化操作浏览器已成为一项不可或缺的技能。无论是进行端到端测试、爬取动态渲染的页面数据还是自动化完成表单提交等重复性工作一个强大且易用的工具至关重要。Playwright 正是为此而生。它由微软开发是一个开源自动化框架通过单一API即可驱动Chromium、Firefox和WebKit三大浏览器引擎。相比传统工具Playwright在设计上更贴合现代Web应用它默认等待元素可操作后才执行动作极大减少了“等待超时”这类不稳定的问题。同时它原生支持自动录屏、网络拦截、移动端模拟等高级功能而这一切都可以通过简洁的代码实现。本文将带你从零开始掌握Playwright的安装、基础用法与实战技巧让你轻松迈入浏览器自动化的大门。二、基础概念Playwright的核心思想是模拟真实用户的操作。它不是通过注入JavaScript来暴力操控页面而是在浏览器底层协议层面进行交互因此能处理更多复杂场景比如跨域iframe、Shadow DOM等。2.1 三大核心对象理解Playwright首先要熟悉三个关键对象Browser浏览器实例代表一个浏览器进程。你可以通过 chromium.launch() 来启动一个Chromium实例。BrowserContext浏览器上下文一个独立的浏览器会话相当于一个全新的隐身窗口。不同上下文之间的Cookie、LocalStorage完全隔离非常适合模拟多用户登录场景。Page页面一个浏览器标签页所有页面操作导航、点击、输入都在这个对象上进行。2.2 基本用法启动与导航我们先安装Playwright并编写第一个脚本。安装Playwright库pip install playwright安装所需的浏览器驱动仅需执行一次playwright install以下是一个最基础的脚本它会启动浏览器、打开百度首页并打印标题import asynciofrom playwright.async_api import async_playwrightasync def main():# 启动Playwrightasync with async_playwright() as p:# 启动Chromium浏览器设置headlessFalse可以看到浏览器界面browser await p.chromium.launch(headlessFalse)# 创建一个新的上下文context await browser.new_context()# 创建一个新页面page await context.new_page()# 导航到目标网址 await page.goto(https://www.baidu.com) # 获取并打印页面标题 title await page.title() print(f页面标题是: {title}) # 关闭浏览器 await browser.close()asyncio.run(main())这段代码展示了Playwright的异步工作方式。async/await 确保了在执行耗时操作如网络请求时不会阻塞整个程序这也是Playwright高效运行的基础。2.3 选择器与元素交互找到页面上的元素是自动化的关键。Playwright支持多种选择器策略包括CSS选择器、XPath、文本内容、角色等。假设页面中有一个id为su的按钮和一个name为wd的输入框通过CSS选择器点击按钮await page.click(‘#su’)通过文本内容找到元素并点击await page.click(‘text登录’)在输入框中输入文本await page.fill(‘input[name“wd”]’, ‘Playwright教程’)使用更语义化的角色定位器推荐await page.get_by_role(‘button’, name‘搜索’).click()Playwright在执行这些操作前会自动等待元素变为可见且可操作状态这大大简化了等待逻辑的编写。三、实战应用3.1 示例一自动搜索并截图这个示例演示了如何打开百度输入关键词进行搜索并对搜索结果页面进行截图。import asynciofrom playwright.async_api import async_playwrightasync def search_and_screenshot():async with async_playwright() as p:browser await p.chromium.launch()page await browser.new_page()# 1. 打开百度 await page.goto(https://www.baidu.com) # 2. 在搜索框中输入关键词 # 使用placeholder定位输入框 search_box page.get_by_placeholder(百度一下) await search_box.fill(Playwright 自动化测试) # 3. 点击“百度一下”按钮 search_button page.get_by_role(button, name百度一下) await search_button.click() # 4. 等待搜索结果加载完成 # 等待包含搜索结果的容器出现 await page.wait_for_selector(#content_left) # 5. 对当前页面进行全屏截图 await page.screenshot(pathsearch_result.png, full_pageTrue) print(截图已保存为 search_result.png) await browser.close()asyncio.run(search_and_screenshot())代码说明get_by_placeholder 和 get_by_role 是Playwright推荐的语义化定位方式比传统的CSS选择器更稳定因为它们更贴近用户视角。wait_for_selector 用于显式等待某个元素出现确保页面动态内容已加载完毕。screenshot 方法的 full_pageTrue 参数会截取整个滚动页面而非仅当前可视区域。3.2 示例二表单自动填写与提交许多自动化场景涉及表单操作。下面的代码模拟了在示例网站中填写注册信息并提交的过程。import asynciofrom playwright.async_api import async_playwrightasync def auto_fill_form():async with async_playwright() as p:browser await p.chromium.launch(headlessFalse) # 显示浏览器便于观察page await browser.new_page()# 打开一个用于测试表单的网站 await page.goto(https://www.w3schools.com/html/html_forms.asp) # 填写名和姓 await page.fill(input[namefirstname], 张) await page.fill(input[namelastname], 三) # 选择性别单选框通过value属性定位 await page.check(input[valuemale]) # 点击提交按钮 await page.click(input[typesubmit]) # 等待提交后的页面加载 await page.wait_for_load_state(networkidle) # 获取并打印提交结果页面的部分内容 result_text await page.text_content(body) print(提交后的页面内容片段:, result_text[:200]) await browser.close()asyncio.run(auto_fill_form())代码说明fill 方法会先清空输入框原有内容再填入新值模拟了真实的用户输入行为。check 方法用于勾选复选框或单选框与之对应的是 uncheck。wait_for_load_state(‘networkidle’) 是一种智能等待它会等到网络请求基本停止500ms内无新请求这通常意味着页面动态内容已加载完毕。3.3 示例三网络请求拦截与数据抓取Playwright强大的网络拦截能力使其成为数据抓取的利器。我们可以监听并捕获特定的API响应直接获取结构化的JSON数据而无需解析HTML。import asynciofrom playwright.async_api import async_playwrightasync def intercept_api_data():async with async_playwright() as p:browser await p.chromium.launch()page await browser.new_page()# 用于存储捕获到的响应数据 captured_data [] # 注册响应监听事件 async def handle_response(response): # 筛选出目标API接口 if api.github.com/users in response.url and response.status 200: json_data await response.json() captured_data.append(json_data) print(f捕获到API数据: {json_data[login]} - {json_data[name]}) page.on(response, handle_response) # 访问GitHub用户页面该页面会触发多个API请求 await page.goto(https://github.com/microsoft) # 等待网络空闲确保所有请求都已完成 await page.wait_for_load_state(networkidle) print(f共捕获到 {len(captured_data)} 条API数据) await browser.close()asyncio.run(intercept_api_data())代码说明page.on(‘response’, callback) 注册了一个事件监听器每当页面收到HTTP响应时都会触发回调函数。在回调函数中我们可以根据URL、状态码等条件筛选出感兴趣的请求并直接通过 response.json() 获取解析后的数据。这种方法比传统的“等待元素出现再提取文本”更高效、更稳定尤其适合现代单页应用SPA的数据抓取。四、常见问题与解决方案在使用Playwright的过程中你可能会遇到一些典型问题以下是解决方案。问题1运行时报错 playwright._impl._api_types.Error: Browser closed原因通常是因为浏览器驱动未正确安装或系统缺少必要的依赖库。解决方案确保已执行 playwright install 安装浏览器。在Linux服务器上可能需要安装额外的系统依赖。运行 playwright install-deps 可以自动安装所有缺失的依赖包。检查代码中是否过早关闭了浏览器实例。问题2元素定位失败提示 TimeoutError原因元素在超时时间内未出现或不可操作。解决方案使用更稳定的语义化定位器如 get_by_role、get_by_label、get_by_text避免依赖易变的CSS类名。显式增加等待await page.wait_for_selector(‘#my-element’, state‘visible’)。检查元素是否在iframe内如果是需要先通过 page.frame_locator() 进入对应的iframe再进行定位。问题3执行速度慢脚本不稳定原因默认的超时设置可能过长或网络环境不稳定。解决方案在 launch 时设置全局超时browser await p.chromium.launch(timeout10000)。对于不需要加载图片、字体等资源的场景可以在创建上下文时拦截不必要的请求以加速context await browser.new_context()await context.route(re.compile(r’.(png|jpg|jpeg|gif|svg|css|woff|woff2)$),lambda route: route.abort())使用 headlessTrue 模式运行减少GUI渲染开销。五、总结通过本文我们系统地学习了Playwright的基础概念与实战应用。从核心对象Browser、Context、Page的理解到元素定位、表单填写、网络拦截等关键操作你已经掌握了使用Playwright进行浏览器自动化的核心技能。回顾一下学习路径基础入门学会启动浏览器、导航页面、定位元素。实战演练通过搜索截图、表单提交、API拦截三个典型场景将知识转化为实际能力。问题排查了解了常见报错的原因及优化脚本稳定性的方法。