01-Playwright 浏览器与上下文Playwright 的核心架构基于三层模型Browser → Context → Page。理解这三层对于编写稳定、高效的自动化脚本至关重要。1. 架构层次Browser (浏览器实例) └── Context (隔离的浏览环境) └── Page (标签页)层级说明特点Browser浏览器进程实例开销大通常复用Context独立的浏览器会话类似隐身窗口cookies/storage 完全隔离Page单个浏览器标签页主要交互对象2. 支持的浏览器fromplaywright.sync_apiimportsync_playwrightwithsync_playwright()asp:# Chromium - 最快最稳定browserp.chromium.launch()# Firefox - 部分功能有差异browserp.firefox.launch()# WebKit - Safari 内核browserp.webkit.launch()启动速度对比Chromium: ~800ms最快Firefox: ~1200msWebKit: ~1500ms3. Browser 启动选项browserp.chromium.launch(headlessTrue,# True无头模式, False有头模式slow_mo100,# 每个操作延迟 100ms方便观察args[# 浏览器启动参数--disable-dev-shm-usage,# Docker 中常用--start-maximized,# 最大化窗口],executable_path/path/to/chrome,# 自定义浏览器路径downloads_path./downloads,# 下载保存路径timeout30000,# 启动超时)4. Context 上下文配置Context 是 Playwright 最强大的特性之一每个 Context 拥有独立的 cookies、localStorage 和 sessioncontextbrowser.new_context(# 视口大小viewport{width:1280,height:720},# 用户代理user_agentMozilla/5.0 (Windows NT 10.0; Win64; x64) ...,# 语言和时区localezh-CN,timezone_idAsia/Shanghai,# 地理位置geolocation{latitude:31.2304,longitude:121.4737},permissions[geolocation],# 授予权限# 颜色方案color_schemedark,# light | dark | no-preference# 安全ignore_https_errorsTrue,# 忽略 HTTPS 证书错误# 代理proxy{server:http://proxy.example.com:8080,username:user,password:pass,},# 存储状态恢复登录态storage_stateauth.json,# 视频录制record_video_dir./videos,record_video_size{width:1280,height:720},# HAR 网络录制record_har_pathnetwork.har,)5. Context 隔离示例# 两个完全隔离的上下文context1browser.new_context()context2browser.new_context()page1context1.new_page()page2context2.new_page()# page1 登录page1.goto(https://example.com/login)page1.fill(#username,user1)page1.click(#login-btn)# page2 完全不知道 page1 的登录状态# cookies、localStorage 完全独立page2.goto(https://example.com/dashboard)# page2 会重定向到登录页因为该 context 未登录6. 资源管理# 方式 1: with 语句推荐withsync_playwright()asp:browserp.chromium.launch()contextbrowser.new_context()pagecontext.new_page()# ... 操作 ...# 自动释放所有资源# 方式 2: 显式关闭browserp.chromium.launch()try:pagebrowser.new_page()page.goto(https://example.com)finally:browser.close()# context 和 page 也会被关闭# 方式 3: 分层关闭pagecontext.new_page()# ... 使用 ...page.close()# 先关 pagecontext.close()# 再关 contextbrowser.close()# 最后关 browser7. 存储状态认证复用# 保存登录状态context1browser.new_context()page1context1.new_page()page1.goto(https://example.com/login)page1.fill(#username,admin)page1.fill(#password,secret)page1.click(#login-btn)page1.wait_for_url(**/dashboard)# 保存到文件context1.storage_state(pathauth.json)# 后续测试直接复用context2browser.new_context(storage_stateauth.json)page2context2.new_page()page2.goto(https://example.com/dashboard)# page2 已处于登录状态8. 最佳实践复用 BrowserBrowser 启动开销大在测试套件中复用每测试一个 Context利用 Context 隔离确保测试独立使用 with 语句自动清理资源避免内存泄漏storage_state 复用认证避免每次测试重复登录选择合适的浏览器CI 中用 Chromium最快兼容性测试用多种浏览器常用 API 速查API说明p.chromium.launch()启动 Chromiump.firefox.launch()启动 Firefoxp.webkit.launch()启动 WebKitbrowser.new_context()创建隔离上下文context.new_page()创建新标签页context.storage_state()保存/导出存储状态browser.close()关闭浏览器context.close()关闭上下文page.close()关闭标签页
01-Playwright 浏览器与上下文
01-Playwright 浏览器与上下文Playwright 的核心架构基于三层模型Browser → Context → Page。理解这三层对于编写稳定、高效的自动化脚本至关重要。1. 架构层次Browser (浏览器实例) └── Context (隔离的浏览环境) └── Page (标签页)层级说明特点Browser浏览器进程实例开销大通常复用Context独立的浏览器会话类似隐身窗口cookies/storage 完全隔离Page单个浏览器标签页主要交互对象2. 支持的浏览器fromplaywright.sync_apiimportsync_playwrightwithsync_playwright()asp:# Chromium - 最快最稳定browserp.chromium.launch()# Firefox - 部分功能有差异browserp.firefox.launch()# WebKit - Safari 内核browserp.webkit.launch()启动速度对比Chromium: ~800ms最快Firefox: ~1200msWebKit: ~1500ms3. Browser 启动选项browserp.chromium.launch(headlessTrue,# True无头模式, False有头模式slow_mo100,# 每个操作延迟 100ms方便观察args[# 浏览器启动参数--disable-dev-shm-usage,# Docker 中常用--start-maximized,# 最大化窗口],executable_path/path/to/chrome,# 自定义浏览器路径downloads_path./downloads,# 下载保存路径timeout30000,# 启动超时)4. Context 上下文配置Context 是 Playwright 最强大的特性之一每个 Context 拥有独立的 cookies、localStorage 和 sessioncontextbrowser.new_context(# 视口大小viewport{width:1280,height:720},# 用户代理user_agentMozilla/5.0 (Windows NT 10.0; Win64; x64) ...,# 语言和时区localezh-CN,timezone_idAsia/Shanghai,# 地理位置geolocation{latitude:31.2304,longitude:121.4737},permissions[geolocation],# 授予权限# 颜色方案color_schemedark,# light | dark | no-preference# 安全ignore_https_errorsTrue,# 忽略 HTTPS 证书错误# 代理proxy{server:http://proxy.example.com:8080,username:user,password:pass,},# 存储状态恢复登录态storage_stateauth.json,# 视频录制record_video_dir./videos,record_video_size{width:1280,height:720},# HAR 网络录制record_har_pathnetwork.har,)5. Context 隔离示例# 两个完全隔离的上下文context1browser.new_context()context2browser.new_context()page1context1.new_page()page2context2.new_page()# page1 登录page1.goto(https://example.com/login)page1.fill(#username,user1)page1.click(#login-btn)# page2 完全不知道 page1 的登录状态# cookies、localStorage 完全独立page2.goto(https://example.com/dashboard)# page2 会重定向到登录页因为该 context 未登录6. 资源管理# 方式 1: with 语句推荐withsync_playwright()asp:browserp.chromium.launch()contextbrowser.new_context()pagecontext.new_page()# ... 操作 ...# 自动释放所有资源# 方式 2: 显式关闭browserp.chromium.launch()try:pagebrowser.new_page()page.goto(https://example.com)finally:browser.close()# context 和 page 也会被关闭# 方式 3: 分层关闭pagecontext.new_page()# ... 使用 ...page.close()# 先关 pagecontext.close()# 再关 contextbrowser.close()# 最后关 browser7. 存储状态认证复用# 保存登录状态context1browser.new_context()page1context1.new_page()page1.goto(https://example.com/login)page1.fill(#username,admin)page1.fill(#password,secret)page1.click(#login-btn)page1.wait_for_url(**/dashboard)# 保存到文件context1.storage_state(pathauth.json)# 后续测试直接复用context2browser.new_context(storage_stateauth.json)page2context2.new_page()page2.goto(https://example.com/dashboard)# page2 已处于登录状态8. 最佳实践复用 BrowserBrowser 启动开销大在测试套件中复用每测试一个 Context利用 Context 隔离确保测试独立使用 with 语句自动清理资源避免内存泄漏storage_state 复用认证避免每次测试重复登录选择合适的浏览器CI 中用 Chromium最快兼容性测试用多种浏览器常用 API 速查API说明p.chromium.launch()启动 Chromiump.firefox.launch()启动 Firefoxp.webkit.launch()启动 WebKitbrowser.new_context()创建隔离上下文context.new_page()创建新标签页context.storage_state()保存/导出存储状态browser.close()关闭浏览器context.close()关闭上下文page.close()关闭标签页
