1. 项目概述为什么是Playwright如果你在过去几年里做过Web自动化测试大概率绕不开Selenium。它很强大但用久了总会遇到一些“老毛病”脚本不稳定需要写一堆显式等待来应对页面加载延迟跨浏览器测试时Firefox和Chrome的行为总有些微妙的差异调试起来头疼处理文件下载、网络拦截、模拟移动设备这些高级场景要么很麻烦要么得依赖第三方库。Playwright的出现就是为了解决这些痛点。它不是Selenium的简单替代品而是一个为现代Web应用从头设计的下一代测试与自动化框架。我最初接触它是因为一个复杂的单页应用SPA项目那个项目里大量的异步加载和动态DOM更新让传统的测试工具疲于奔命。在尝试了Playwright之后整个团队的测试稳定性和开发效率得到了质的提升。简单来说Playwright能让你用一套API同时驱动ChromiumChrome/Edge、Firefox和WebKitSafari三大浏览器引擎进行测试。这不仅仅是“支持”多个浏览器而是保证了在三大引擎上行为的高度一致性。它的设计哲学是“默认可靠”内置了智能等待、自动重试等机制让你写出的测试脚本天生就比用传统工具写的更健壮。无论是前端开发者做组件测试还是QA工程师做端到端E2E测试甚至是做爬虫或RPA自动化Playwright都提供了一个极其强大的工具箱。2. 核心设计理念与架构解析2.1 与Selenium的根本区别协议与架构要理解Playwright为什么快和稳得先看看它的“底子”。Selenium WebDriver的核心是W3C WebDriver协议这是一个基于HTTP的远程控制协议。你的测试脚本客户端通过发送HTTP请求如POST /session/{sessionId}/element给浏览器驱动程序如chromedriver驱动再通过调试协议如Chrome DevTools Protocol与浏览器内核通信。这个链条长而且WebDriver协议本身是为兼容性设计的并非最高效。Playwright则走了另一条路它直接使用各个浏览器厂商提供的原生调试协议。对于Chromium它使用Chrome DevTools Protocol (CDP)对于Firefox使用Firefox Remote Protocol对于WebKit使用WebKit Protocol。这意味着Playwright能与浏览器内核进行更低延迟、更高带宽的通信可以访问更多底层能力比如精确模拟网络条件、拦截请求、录制视频等。更重要的是Playwright采用了一种**“浏览器上下文”Browser Context** 的隔离模型。你可以把它想象成浏览器的一个轻量级、完全隔离的“隐身模式”会话。每个上下文都有独立的cookie、本地存储和缓存但共享同一个浏览器进程。这比Selenium中每次测试启动一个全新的浏览器实例要快得多资源消耗也更小。同时一个浏览器实例下可以创建多个上下文一个上下文中又可以打开多个页面Page这种层级结构为并行测试和复杂场景模拟提供了极大的灵活性。2.2 关键特性深度解读自动等待Auto-wait这是Playwright的“杀手锏”之一。在Selenium里你经常需要写WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, “submit”)))。Playwright将这种等待内化了。当你执行page.click(‘button#submit’)时Playwright会自动执行一系列检查元素是否存在于DOM中是否可见是否稳定例如不再有动画是否可交互未被其他元素遮挡只有所有这些条件都满足它才会执行点击操作。这极大地减少了“元素未找到”、“元素不可交互”这类脆弱的失败。网络拦截与模拟现代应用高度依赖API。Playwright允许你在测试中轻松拦截和修改任何网络请求。你可以模拟API响应直接返回一个预设的JSON而无需启动后端服务非常适合测试前端在各种数据状态下的表现。阻断不必要的请求比如屏蔽广告、分析脚本让测试跑得更快。监听请求/响应断言某个特定API是否被调用以及调用参数是否正确。# Python 示例拦截并修改请求 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch() page browser.new_page() # 路由拦截将所有对图片的请求改为返回一个空响应 def route_handler(route): if route.request.resource_type image: route.abort() # 中止请求 else: route.continue_() # 继续请求 page.route(**/*, route_handler) page.goto(https://example.com) # 此时页面将不加载任何图片 browser.close()多页面与多上下文轻松模拟标签页、弹出窗口、甚至是完全独立的用户会话。这对于测试OAuth登录流程、多用户交互场景非常有用。设备与视口模拟内置了大量设备描述符如iPhone 13, Pixel 5可以一键模拟设备的屏幕尺寸、用户代理、触摸屏支持等让响应式测试变得非常简单。追踪与调试工具Playwright Test运行器内置了强大的追踪功能可以录制测试执行的完整过程生成一个可交互的HTML报告里面包含了每一步的截图、DOM快照、网络请求和浏览器日志。当测试失败时这个报告是排查问题的第一手资料比看单纯的日志高效得多。3. 环境搭建与核心API实战3.1 安装与初始化避坑指南Playwright支持多种语言这里以最流行的Python和Node.js为例。无论哪种语言第一步都是安装。Node.js环境npm init playwrightlatest这个命令是官方推荐的一站式初始化方式。它会安装playwright/test包。在项目根目录创建基础的配置文件playwright.config.ts。下载三大浏览器的二进制文件Chromium, Firefox, WebKit。这是最关键的一步也是新手最容易卡住的地方。注意下载浏览器二进制文件可能会很慢尤其是从国内网络访问。这是因为默认从Google的存储桶下载。解决方法有两种设置环境变量在运行安装命令前设置PLAYWRIGHT_DOWNLOAD_HOST为国内镜像源例如阿里云的镜像export PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright(对于npm) 或使用PLAYWRIGHT_CDN_URL。手动安装如果网络实在不通可以先跳过自动下载 (PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD1)然后从其他途径获取浏览器二进制文件手动放置到~/.cache/ms-playwright目录下对应的位置。但这比较麻烦不推荐新手。Python环境pip install playwright playwright installplaywright install命令会下载浏览器。同样可能遇到网络问题解决方案同上。初始化验证安装完成后创建一个简单的测试脚本来验证一切正常。# test_demo.py from playwright.sync_api import sync_playwright with sync_playwright() as p: # 启动一个无头浏览器不显示UI browser p.chromium.launch(headlessFalse) # 设置为False可以看到浏览器操作 page browser.new_page() page.goto(https://www.baidu.com) print(page.title()) # 应该打印出“百度一下你就知道” # 截图 page.screenshot(pathbaidu.png) browser.close()如果能成功运行并截图说明环境配置成功。3.2 核心API与元素定位实战Playwright的API设计非常直观围绕几个核心对象Browser,BrowserContext,Page,Frame,Locator。启动与导航browser p.chromium.launch(headlessFalse, slow_mo100) # slow_mo让操作变慢方便观察 context browser.new_context( viewport{width: 1920, height: 1080}, user_agent自定义UA ) # 创建一个带有自定义设置的上下文 page context.new_page() # 在上下文中打开一个新页面 page.goto(https://example.com, wait_untilnetworkidle) # 导航并等待到网络空闲元素定位Locator这是与页面交互的基础。Playwright的定位器非常强大且灵活。基础选择器与CSS选择器、XPath兼容。page.locator(button).click() # 点击第一个button page.locator(#search-input).fill(Playwright) # 根据ID填充输入框 page.locator(textSubmit).click() # 点击文本包含“Submit”的元素 page.locator(div:has-text(Hello)).click() # 点击包含特定文本的div组合与过滤# 获取列表中的第三个项目 page.locator(ul li).nth(2).click() # 获取包含特定class的div下的第一个button page.locator(div.container).locator(button).first.click() # 使用 filter 进行更复杂的过滤 page.locator(tr).filter(has_textJohn).locator(button.edit).click()最佳实践优先使用page.get_by_xxx()系列角色定位器。这是Playwright推荐的方式可读性更好对前端代码变化的抵抗力更强。page.get_by_role(button, nameSign in).click() page.get_by_label(User Name).fill(john) page.get_by_placeholder(emailexample.com).fill(testtest.com) page.get_by_text(Submit, exactTrue).click()交互操作click(),dblclick(),fill(),type(),press(),check(),uncheck(),select_option()等。所有操作都内置了自动等待。断言Playwright Test框架内置了丰富的断言但即使使用纯API也可以结合Python的assert或使用expect函数。# 使用纯API断言 assert page.url() https://example.com/dashboard assert page.locator(h1).is_visible() # 使用Playwright Test的expect更强大 from playwright.sync_api import expect expect(page).to_have_url(https://example.com/dashboard) expect(page.locator(h1)).to_be_visible() expect(page.locator(.success-message)).to_contain_text(操作成功)4. 高级应用场景与模式4.1 测试组织与Playwright Test运行器虽然你可以用纯API写脚本但对于正经的测试项目强烈推荐使用官方的Playwright Test运行器Node.js或Pytest插件Python。它们提供了测试隔离、并行执行、夹具Fixtures管理、报告生成等专业功能。Playwright Test (Node.js) 示例// tests/example.spec.js const { test, expect } require(playwright/test); test(basic test, async ({ page }) { // page fixture 由框架自动注入 await page.goto(https://playwright.dev/); await expect(page).toHaveTitle(/Playwright/); }); test(click test, async ({ page }) { await page.goto(https://example.com); await page.get_by_text(Click me).click(); await expect(page.locator(#result)).toContainText(Clicked!); });运行测试npx playwright test。它会自动并行运行所有测试并在结束后打开HTML报告。Pytest with Playwright (Python) 示例# conftest.py - 定义共享的fixture import pytest from playwright.sync_api import Page, BrowserContext pytest.fixture(scopesession) def browser_context_args(browser_context_args): return { **browser_context_args, viewport: {width: 1920, height: 1080}, ignore_https_errors: True, } pytest.fixture def page(context: BrowserContext): page context.new_page() yield page page.close() # test_login.py def test_login_success(page: Page): page.goto(/login) # 使用base_url page.get_by_label(Username).fill(testuser) page.get_by_label(Password).fill(secret) page.get_by_role(button, nameLogin).click() expect(page).to_have_url(/dashboard) expect(page.get_by_text(Welcome, testuser)).to_be_visible()使用pytest --browser chromium --headed运行测试。4.2 复杂场景处理文件、弹窗、iframe文件上传与下载上传Playwright简化了文件上传无需与隐藏的input type”file”元素纠缠。# 设置文件路径然后触发选择文件的操作如点击按钮 page.locator(input[typefile]).set_input_files(/path/to/myfile.pdf) # 上传多个文件 page.locator(input[typefile]).set_input_files([file1.pdf, file2.jpg])下载监听download事件。# 启动下载 with page.expect_download() as download_info: page.locator(a#download-link).click() download download_info.value # 获取下载的文件名和保存路径 print(download.suggested_filename) download.save_as(/path/to/save/ download.suggested_filename)处理弹窗与对话框# 监听并接受一个alert对话框 page.on(dialog, lambda dialog: dialog.accept()) page.locator(button#trigger-alert).click() # 或者使用 expect_event 更精确 with page.expect_event(dialog) as dialog_info: page.locator(button#trigger-alert).click() dialog dialog_info.value assert dialog.message Are you sure? dialog.dismiss() # 取消操作iframe定位到iframe元素然后获取其内部的Frame对象进行操作。# 通过iframe的name或URL定位 frame page.frame(namemy-frame) # 或 page.frame(urlre.compile(r.*login.*)) # 在iframe内部操作 frame.fill(#username, user) frame.click(#submit) # 通过元素定位器获取frame iframe_element page.locator(iframe#preview) frame iframe_element.content_frame4.3 在CI/CD中集成与并行化Playwright天生适合持续集成。它的浏览器是自带二进制文件的不需要在CI机器上单独安装Chrome、Firefox等。配置好playwright.config.js/ts文件是关键。关键配置项// playwright.config.ts import { defineConfig, devices } from playwright/test; export default defineConfig({ testDir: ./tests, // 测试目录 fullyParallel: true, // 完全并行运行所有测试 forbidOnly: !!process.env.CI, // 在CI环境中禁止使用 test.only retries: process.env.CI ? 2 : 0, // CI环境中失败重试2次 workers: process.env.CI ? 4 : undefined, // CI中最多4个worker并行 reporter: [ [html], // 生成HTML报告 [list], // 命令行输出 [junit, { outputFile: results.xml }] // 生成JUnit报告供Jenkins等集成 ], use: { baseURL: process.env.BASE_URL || http://localhost:3000, // 基础URL trace: on-first-retry, // 仅在第一次重试时记录trace节省资源 screenshot: only-on-failure, // 仅在失败时截图 video: retain-on-failure, // 仅在失败时保留视频 }, projects: [ { name: chromium, use: { ...devices[Desktop Chrome] }, }, { name: firefox, use: { ...devices[Desktop Firefox] }, }, { name: webkit, use: { ...devices[Desktop Safari] }, }, // 可以添加移动端模拟 { name: Mobile Chrome, use: { ...devices[Pixel 5] }, }, ], });在GitHub Actions中一个典型的 workflow 配置如下name: Playwright Tests on: [push] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: actions/setup-nodev3 with: { node-version: 18 } - name: Install dependencies run: npm ci - name: Install Playwright Browsers run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - uses: actions/upload-artifactv3 if: always() # 即使测试失败也上传报告 with: name: playwright-report path: playwright-report/ retention-days: 305. 性能调优、问题排查与最佳实践5.1 提升测试执行速度并行执行充分利用workers配置。根据CI机器的CPU核心数设置通常为核心数或核心数-1。复用浏览器上下文对于一组不依赖完全隔离状态的测试可以共享一个BrowserContext只在新Page级别隔离。这比每个测试都启动新浏览器快得多。选择性安装浏览器如果只测Chromium在CI中安装时使用npx playwright install chromium而不是默认安装全部。优化等待策略page.goto()使用wait_until: ‘domcontentloaded’通常比‘networkidle’更快除非你真的需要等待所有网络请求结束。拦截非必要资源使用page.route()拦截并中止对图片、样式表、字体等静态资源的请求可以显著加快页面加载速度。禁用不必要的功能在创建上下文时可以关闭一些用不到的功能。context await browser.newContext({ javaScriptEnabled: true, // 默认开启如果测试静态页可关闭 hasTouch: false, // 非移动端测试可关闭 serviceWorkers: block, // 阻止service worker有时能避免缓存问题 });5.2 常见问题与调试技巧问题1元素定位不到Timeout Error可能原因元素尚未加载/出现元素在iframe或shadow DOM内选择器写错了。排查使用page.pause()暂停测试打开Playwright Inspector手动调试。使用page.screenshot({ fullPage: true })在失败时截全屏图看看页面当时是什么状态。使用page.locator(‘your-selector’).waitFor({ state: ‘attached’ })显式等待元素出现。检查是否需要用frame.locator()或page.locator(‘’, ‘shadow-selector’)对于shadow DOM。问题2测试在CI上通过本地失败或反之可能原因环境差异屏幕尺寸、时区、语言网络延迟数据状态不同。解决在配置中固定视口大小、时区、语言环境。在CI和本地都使用无头模式运行减少环境差异。确保测试数据是隔离和可预知的使用测试数据库或mock数据。问题3异步操作导致的状态不一致最佳实践始终使用Playwright的自动等待或显式的expect断言而不是time.sleep()。expect断言本身带有重试机制。# 不好 page.click(‘button’) time.sleep(2) # 魔法数字不可靠 assert page.text_content(‘#result’) ‘Success’ # 好 page.click(‘button’) expect(page.locator(‘#result’)).to_have_text(‘Success’, timeout10000) # 会等待最多10秒直到文本匹配问题4追踪Trace文件太大配置在CI中将trace配置为‘on-first-retry’或‘retain-on-failure’而不是‘on’。这样可以只保留失败测试的追踪信息节省存储空间。5.3 从Selenium迁移的注意事项如果你有一个现有的Selenium测试套件想迁移到Playwright不建议直接重写。可以采取渐进式策略并行运行在新功能或修改的模块上使用Playwright编写新测试旧测试继续用Selenium运行。重点迁移优先迁移那些最不稳定、维护成本最高的Selenium测试。模式转换定位器将复杂的XPath转换为Playwright更简洁的文本定位器(text)或角色定位器(get_by_role)。等待删除所有显式的WebDriverWait和time.sleep依赖Playwright的自动等待和expect。浏览器管理将driver webdriver.Chrome()替换为browser p.chromium.launch()和page browser.new_page()。断言库将assert语句或第三方断言库替换为Playwright内置的expect。迁移过程可能会发现一些在Selenium下被隐藏的时序问题因为Playwright的等待更严格这反而是好事能帮你写出更健壮的测试。6. 生态、工具与未来展望Playwright的生态正在快速发展。除了核心的测试功能社区还围绕它构建了许多强大的工具Playwright Codegen录制工具。启动它然后手动在浏览器中操作它会自动生成对应的Playwright脚本。这是快速创建测试原型或学习API的绝佳方式。Playwright InspectorGUI调试工具。可以单步执行测试、查看定位器、检查页面状态。第三方集成与Cucumber行为驱动开发、Allure精美报告、Docker等工具链无缝集成。云服务与网格虽然Playwright本身可以管理多浏览器但对于大规模并行测试可以考虑使用如Playwright Grid社区方案或云测试平台提供的Playwright支持。与Selenium/Puppeteer的对比总结特性PlaywrightSelenium WebDriverPuppeteer浏览器支持Chromium, Firefox, WebKit (一套API)多浏览器 (通过不同driver)仅Chromium架构直接使用浏览器原生调试协议基于W3C WebDriver标准协议使用Chrome DevTools Protocol自动等待内置默认启用需要手动实现显式/隐式等待部分内置但不如Playwright全面执行速度快协议高效上下文隔离较慢协议开销大快但仅限Chrome网络拦截强大且易用支持但API较复杂支持移动端模拟内置大量设备描述符需要复杂配置支持需手动设置参数多页面/上下文原生支持模型清晰支持但API稍显笨拙支持录制与调试内置Trace Viewer功能强大依赖第三方工具或日志依赖Chrome DevTools从我个人的使用经验来看Playwright最大的优势在于其“开箱即用”的完整性和开发者体验的一致性。它几乎考虑到了现代Web测试中的所有常见需求并将最佳实践内置到了框架中。对于新项目毫无疑问应该首选Playwright。对于老项目评估测试套件的价值和维护成本有计划地迁移也是值得的投资。它的活跃开发和微软的持续投入也让人对其长期发展充满信心。现在是时候把你的测试脚本升级到“下一代”了。
1. 项目概述为什么是Playwright如果你在过去几年里做过Web自动化测试大概率绕不开Selenium。它很强大但用久了总会遇到一些“老毛病”脚本不稳定需要写一堆显式等待来应对页面加载延迟跨浏览器测试时Firefox和Chrome的行为总有些微妙的差异调试起来头疼处理文件下载、网络拦截、模拟移动设备这些高级场景要么很麻烦要么得依赖第三方库。Playwright的出现就是为了解决这些痛点。它不是Selenium的简单替代品而是一个为现代Web应用从头设计的下一代测试与自动化框架。我最初接触它是因为一个复杂的单页应用SPA项目那个项目里大量的异步加载和动态DOM更新让传统的测试工具疲于奔命。在尝试了Playwright之后整个团队的测试稳定性和开发效率得到了质的提升。简单来说Playwright能让你用一套API同时驱动ChromiumChrome/Edge、Firefox和WebKitSafari三大浏览器引擎进行测试。这不仅仅是“支持”多个浏览器而是保证了在三大引擎上行为的高度一致性。它的设计哲学是“默认可靠”内置了智能等待、自动重试等机制让你写出的测试脚本天生就比用传统工具写的更健壮。无论是前端开发者做组件测试还是QA工程师做端到端E2E测试甚至是做爬虫或RPA自动化Playwright都提供了一个极其强大的工具箱。2. 核心设计理念与架构解析2.1 与Selenium的根本区别协议与架构要理解Playwright为什么快和稳得先看看它的“底子”。Selenium WebDriver的核心是W3C WebDriver协议这是一个基于HTTP的远程控制协议。你的测试脚本客户端通过发送HTTP请求如POST /session/{sessionId}/element给浏览器驱动程序如chromedriver驱动再通过调试协议如Chrome DevTools Protocol与浏览器内核通信。这个链条长而且WebDriver协议本身是为兼容性设计的并非最高效。Playwright则走了另一条路它直接使用各个浏览器厂商提供的原生调试协议。对于Chromium它使用Chrome DevTools Protocol (CDP)对于Firefox使用Firefox Remote Protocol对于WebKit使用WebKit Protocol。这意味着Playwright能与浏览器内核进行更低延迟、更高带宽的通信可以访问更多底层能力比如精确模拟网络条件、拦截请求、录制视频等。更重要的是Playwright采用了一种**“浏览器上下文”Browser Context** 的隔离模型。你可以把它想象成浏览器的一个轻量级、完全隔离的“隐身模式”会话。每个上下文都有独立的cookie、本地存储和缓存但共享同一个浏览器进程。这比Selenium中每次测试启动一个全新的浏览器实例要快得多资源消耗也更小。同时一个浏览器实例下可以创建多个上下文一个上下文中又可以打开多个页面Page这种层级结构为并行测试和复杂场景模拟提供了极大的灵活性。2.2 关键特性深度解读自动等待Auto-wait这是Playwright的“杀手锏”之一。在Selenium里你经常需要写WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.ID, “submit”)))。Playwright将这种等待内化了。当你执行page.click(‘button#submit’)时Playwright会自动执行一系列检查元素是否存在于DOM中是否可见是否稳定例如不再有动画是否可交互未被其他元素遮挡只有所有这些条件都满足它才会执行点击操作。这极大地减少了“元素未找到”、“元素不可交互”这类脆弱的失败。网络拦截与模拟现代应用高度依赖API。Playwright允许你在测试中轻松拦截和修改任何网络请求。你可以模拟API响应直接返回一个预设的JSON而无需启动后端服务非常适合测试前端在各种数据状态下的表现。阻断不必要的请求比如屏蔽广告、分析脚本让测试跑得更快。监听请求/响应断言某个特定API是否被调用以及调用参数是否正确。# Python 示例拦截并修改请求 from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch() page browser.new_page() # 路由拦截将所有对图片的请求改为返回一个空响应 def route_handler(route): if route.request.resource_type image: route.abort() # 中止请求 else: route.continue_() # 继续请求 page.route(**/*, route_handler) page.goto(https://example.com) # 此时页面将不加载任何图片 browser.close()多页面与多上下文轻松模拟标签页、弹出窗口、甚至是完全独立的用户会话。这对于测试OAuth登录流程、多用户交互场景非常有用。设备与视口模拟内置了大量设备描述符如iPhone 13, Pixel 5可以一键模拟设备的屏幕尺寸、用户代理、触摸屏支持等让响应式测试变得非常简单。追踪与调试工具Playwright Test运行器内置了强大的追踪功能可以录制测试执行的完整过程生成一个可交互的HTML报告里面包含了每一步的截图、DOM快照、网络请求和浏览器日志。当测试失败时这个报告是排查问题的第一手资料比看单纯的日志高效得多。3. 环境搭建与核心API实战3.1 安装与初始化避坑指南Playwright支持多种语言这里以最流行的Python和Node.js为例。无论哪种语言第一步都是安装。Node.js环境npm init playwrightlatest这个命令是官方推荐的一站式初始化方式。它会安装playwright/test包。在项目根目录创建基础的配置文件playwright.config.ts。下载三大浏览器的二进制文件Chromium, Firefox, WebKit。这是最关键的一步也是新手最容易卡住的地方。注意下载浏览器二进制文件可能会很慢尤其是从国内网络访问。这是因为默认从Google的存储桶下载。解决方法有两种设置环境变量在运行安装命令前设置PLAYWRIGHT_DOWNLOAD_HOST为国内镜像源例如阿里云的镜像export PLAYWRIGHT_DOWNLOAD_HOSThttps://npmmirror.com/mirrors/playwright(对于npm) 或使用PLAYWRIGHT_CDN_URL。手动安装如果网络实在不通可以先跳过自动下载 (PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD1)然后从其他途径获取浏览器二进制文件手动放置到~/.cache/ms-playwright目录下对应的位置。但这比较麻烦不推荐新手。Python环境pip install playwright playwright installplaywright install命令会下载浏览器。同样可能遇到网络问题解决方案同上。初始化验证安装完成后创建一个简单的测试脚本来验证一切正常。# test_demo.py from playwright.sync_api import sync_playwright with sync_playwright() as p: # 启动一个无头浏览器不显示UI browser p.chromium.launch(headlessFalse) # 设置为False可以看到浏览器操作 page browser.new_page() page.goto(https://www.baidu.com) print(page.title()) # 应该打印出“百度一下你就知道” # 截图 page.screenshot(pathbaidu.png) browser.close()如果能成功运行并截图说明环境配置成功。3.2 核心API与元素定位实战Playwright的API设计非常直观围绕几个核心对象Browser,BrowserContext,Page,Frame,Locator。启动与导航browser p.chromium.launch(headlessFalse, slow_mo100) # slow_mo让操作变慢方便观察 context browser.new_context( viewport{width: 1920, height: 1080}, user_agent自定义UA ) # 创建一个带有自定义设置的上下文 page context.new_page() # 在上下文中打开一个新页面 page.goto(https://example.com, wait_untilnetworkidle) # 导航并等待到网络空闲元素定位Locator这是与页面交互的基础。Playwright的定位器非常强大且灵活。基础选择器与CSS选择器、XPath兼容。page.locator(button).click() # 点击第一个button page.locator(#search-input).fill(Playwright) # 根据ID填充输入框 page.locator(textSubmit).click() # 点击文本包含“Submit”的元素 page.locator(div:has-text(Hello)).click() # 点击包含特定文本的div组合与过滤# 获取列表中的第三个项目 page.locator(ul li).nth(2).click() # 获取包含特定class的div下的第一个button page.locator(div.container).locator(button).first.click() # 使用 filter 进行更复杂的过滤 page.locator(tr).filter(has_textJohn).locator(button.edit).click()最佳实践优先使用page.get_by_xxx()系列角色定位器。这是Playwright推荐的方式可读性更好对前端代码变化的抵抗力更强。page.get_by_role(button, nameSign in).click() page.get_by_label(User Name).fill(john) page.get_by_placeholder(emailexample.com).fill(testtest.com) page.get_by_text(Submit, exactTrue).click()交互操作click(),dblclick(),fill(),type(),press(),check(),uncheck(),select_option()等。所有操作都内置了自动等待。断言Playwright Test框架内置了丰富的断言但即使使用纯API也可以结合Python的assert或使用expect函数。# 使用纯API断言 assert page.url() https://example.com/dashboard assert page.locator(h1).is_visible() # 使用Playwright Test的expect更强大 from playwright.sync_api import expect expect(page).to_have_url(https://example.com/dashboard) expect(page.locator(h1)).to_be_visible() expect(page.locator(.success-message)).to_contain_text(操作成功)4. 高级应用场景与模式4.1 测试组织与Playwright Test运行器虽然你可以用纯API写脚本但对于正经的测试项目强烈推荐使用官方的Playwright Test运行器Node.js或Pytest插件Python。它们提供了测试隔离、并行执行、夹具Fixtures管理、报告生成等专业功能。Playwright Test (Node.js) 示例// tests/example.spec.js const { test, expect } require(playwright/test); test(basic test, async ({ page }) { // page fixture 由框架自动注入 await page.goto(https://playwright.dev/); await expect(page).toHaveTitle(/Playwright/); }); test(click test, async ({ page }) { await page.goto(https://example.com); await page.get_by_text(Click me).click(); await expect(page.locator(#result)).toContainText(Clicked!); });运行测试npx playwright test。它会自动并行运行所有测试并在结束后打开HTML报告。Pytest with Playwright (Python) 示例# conftest.py - 定义共享的fixture import pytest from playwright.sync_api import Page, BrowserContext pytest.fixture(scopesession) def browser_context_args(browser_context_args): return { **browser_context_args, viewport: {width: 1920, height: 1080}, ignore_https_errors: True, } pytest.fixture def page(context: BrowserContext): page context.new_page() yield page page.close() # test_login.py def test_login_success(page: Page): page.goto(/login) # 使用base_url page.get_by_label(Username).fill(testuser) page.get_by_label(Password).fill(secret) page.get_by_role(button, nameLogin).click() expect(page).to_have_url(/dashboard) expect(page.get_by_text(Welcome, testuser)).to_be_visible()使用pytest --browser chromium --headed运行测试。4.2 复杂场景处理文件、弹窗、iframe文件上传与下载上传Playwright简化了文件上传无需与隐藏的input type”file”元素纠缠。# 设置文件路径然后触发选择文件的操作如点击按钮 page.locator(input[typefile]).set_input_files(/path/to/myfile.pdf) # 上传多个文件 page.locator(input[typefile]).set_input_files([file1.pdf, file2.jpg])下载监听download事件。# 启动下载 with page.expect_download() as download_info: page.locator(a#download-link).click() download download_info.value # 获取下载的文件名和保存路径 print(download.suggested_filename) download.save_as(/path/to/save/ download.suggested_filename)处理弹窗与对话框# 监听并接受一个alert对话框 page.on(dialog, lambda dialog: dialog.accept()) page.locator(button#trigger-alert).click() # 或者使用 expect_event 更精确 with page.expect_event(dialog) as dialog_info: page.locator(button#trigger-alert).click() dialog dialog_info.value assert dialog.message Are you sure? dialog.dismiss() # 取消操作iframe定位到iframe元素然后获取其内部的Frame对象进行操作。# 通过iframe的name或URL定位 frame page.frame(namemy-frame) # 或 page.frame(urlre.compile(r.*login.*)) # 在iframe内部操作 frame.fill(#username, user) frame.click(#submit) # 通过元素定位器获取frame iframe_element page.locator(iframe#preview) frame iframe_element.content_frame4.3 在CI/CD中集成与并行化Playwright天生适合持续集成。它的浏览器是自带二进制文件的不需要在CI机器上单独安装Chrome、Firefox等。配置好playwright.config.js/ts文件是关键。关键配置项// playwright.config.ts import { defineConfig, devices } from playwright/test; export default defineConfig({ testDir: ./tests, // 测试目录 fullyParallel: true, // 完全并行运行所有测试 forbidOnly: !!process.env.CI, // 在CI环境中禁止使用 test.only retries: process.env.CI ? 2 : 0, // CI环境中失败重试2次 workers: process.env.CI ? 4 : undefined, // CI中最多4个worker并行 reporter: [ [html], // 生成HTML报告 [list], // 命令行输出 [junit, { outputFile: results.xml }] // 生成JUnit报告供Jenkins等集成 ], use: { baseURL: process.env.BASE_URL || http://localhost:3000, // 基础URL trace: on-first-retry, // 仅在第一次重试时记录trace节省资源 screenshot: only-on-failure, // 仅在失败时截图 video: retain-on-failure, // 仅在失败时保留视频 }, projects: [ { name: chromium, use: { ...devices[Desktop Chrome] }, }, { name: firefox, use: { ...devices[Desktop Firefox] }, }, { name: webkit, use: { ...devices[Desktop Safari] }, }, // 可以添加移动端模拟 { name: Mobile Chrome, use: { ...devices[Pixel 5] }, }, ], });在GitHub Actions中一个典型的 workflow 配置如下name: Playwright Tests on: [push] jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkoutv3 - uses: actions/setup-nodev3 with: { node-version: 18 } - name: Install dependencies run: npm ci - name: Install Playwright Browsers run: npx playwright install --with-deps - name: Run Playwright tests run: npx playwright test - uses: actions/upload-artifactv3 if: always() # 即使测试失败也上传报告 with: name: playwright-report path: playwright-report/ retention-days: 305. 性能调优、问题排查与最佳实践5.1 提升测试执行速度并行执行充分利用workers配置。根据CI机器的CPU核心数设置通常为核心数或核心数-1。复用浏览器上下文对于一组不依赖完全隔离状态的测试可以共享一个BrowserContext只在新Page级别隔离。这比每个测试都启动新浏览器快得多。选择性安装浏览器如果只测Chromium在CI中安装时使用npx playwright install chromium而不是默认安装全部。优化等待策略page.goto()使用wait_until: ‘domcontentloaded’通常比‘networkidle’更快除非你真的需要等待所有网络请求结束。拦截非必要资源使用page.route()拦截并中止对图片、样式表、字体等静态资源的请求可以显著加快页面加载速度。禁用不必要的功能在创建上下文时可以关闭一些用不到的功能。context await browser.newContext({ javaScriptEnabled: true, // 默认开启如果测试静态页可关闭 hasTouch: false, // 非移动端测试可关闭 serviceWorkers: block, // 阻止service worker有时能避免缓存问题 });5.2 常见问题与调试技巧问题1元素定位不到Timeout Error可能原因元素尚未加载/出现元素在iframe或shadow DOM内选择器写错了。排查使用page.pause()暂停测试打开Playwright Inspector手动调试。使用page.screenshot({ fullPage: true })在失败时截全屏图看看页面当时是什么状态。使用page.locator(‘your-selector’).waitFor({ state: ‘attached’ })显式等待元素出现。检查是否需要用frame.locator()或page.locator(‘’, ‘shadow-selector’)对于shadow DOM。问题2测试在CI上通过本地失败或反之可能原因环境差异屏幕尺寸、时区、语言网络延迟数据状态不同。解决在配置中固定视口大小、时区、语言环境。在CI和本地都使用无头模式运行减少环境差异。确保测试数据是隔离和可预知的使用测试数据库或mock数据。问题3异步操作导致的状态不一致最佳实践始终使用Playwright的自动等待或显式的expect断言而不是time.sleep()。expect断言本身带有重试机制。# 不好 page.click(‘button’) time.sleep(2) # 魔法数字不可靠 assert page.text_content(‘#result’) ‘Success’ # 好 page.click(‘button’) expect(page.locator(‘#result’)).to_have_text(‘Success’, timeout10000) # 会等待最多10秒直到文本匹配问题4追踪Trace文件太大配置在CI中将trace配置为‘on-first-retry’或‘retain-on-failure’而不是‘on’。这样可以只保留失败测试的追踪信息节省存储空间。5.3 从Selenium迁移的注意事项如果你有一个现有的Selenium测试套件想迁移到Playwright不建议直接重写。可以采取渐进式策略并行运行在新功能或修改的模块上使用Playwright编写新测试旧测试继续用Selenium运行。重点迁移优先迁移那些最不稳定、维护成本最高的Selenium测试。模式转换定位器将复杂的XPath转换为Playwright更简洁的文本定位器(text)或角色定位器(get_by_role)。等待删除所有显式的WebDriverWait和time.sleep依赖Playwright的自动等待和expect。浏览器管理将driver webdriver.Chrome()替换为browser p.chromium.launch()和page browser.new_page()。断言库将assert语句或第三方断言库替换为Playwright内置的expect。迁移过程可能会发现一些在Selenium下被隐藏的时序问题因为Playwright的等待更严格这反而是好事能帮你写出更健壮的测试。6. 生态、工具与未来展望Playwright的生态正在快速发展。除了核心的测试功能社区还围绕它构建了许多强大的工具Playwright Codegen录制工具。启动它然后手动在浏览器中操作它会自动生成对应的Playwright脚本。这是快速创建测试原型或学习API的绝佳方式。Playwright InspectorGUI调试工具。可以单步执行测试、查看定位器、检查页面状态。第三方集成与Cucumber行为驱动开发、Allure精美报告、Docker等工具链无缝集成。云服务与网格虽然Playwright本身可以管理多浏览器但对于大规模并行测试可以考虑使用如Playwright Grid社区方案或云测试平台提供的Playwright支持。与Selenium/Puppeteer的对比总结特性PlaywrightSelenium WebDriverPuppeteer浏览器支持Chromium, Firefox, WebKit (一套API)多浏览器 (通过不同driver)仅Chromium架构直接使用浏览器原生调试协议基于W3C WebDriver标准协议使用Chrome DevTools Protocol自动等待内置默认启用需要手动实现显式/隐式等待部分内置但不如Playwright全面执行速度快协议高效上下文隔离较慢协议开销大快但仅限Chrome网络拦截强大且易用支持但API较复杂支持移动端模拟内置大量设备描述符需要复杂配置支持需手动设置参数多页面/上下文原生支持模型清晰支持但API稍显笨拙支持录制与调试内置Trace Viewer功能强大依赖第三方工具或日志依赖Chrome DevTools从我个人的使用经验来看Playwright最大的优势在于其“开箱即用”的完整性和开发者体验的一致性。它几乎考虑到了现代Web测试中的所有常见需求并将最佳实践内置到了框架中。对于新项目毫无疑问应该首选Playwright。对于老项目评估测试套件的价值和维护成本有计划地迁移也是值得的投资。它的活跃开发和微软的持续投入也让人对其长期发展充满信心。现在是时候把你的测试脚本升级到“下一代”了。
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
