零基础入门Playwright自动化测试：从环境搭建到脚本实战

1. 项目概述为什么是Playwright如果你刚接触自动化测试面对Selenium、Cypress、Playwright这些名字可能有点懵。我干了十多年测试从QTP时代一路走来见证了工具的迭代。今天我强烈建议新手从Playwright开始。为什么因为它几乎解决了所有前辈的痛点。Selenium需要处理各种浏览器驱动版本Cypress在跨浏览器和跨域上有限制而Playwright由微软出品原生支持Chromium、Firefox和WebKit三大浏览器引擎API设计现代上手快稳定性高。对于零基础的朋友你的第一个脚本目标不是写出多么复杂的业务流而是成功运行看到浏览器自动打开、操作、关闭建立最初的信心。这个“Hello World”级别的脚本是推开自动化测试大门的第一步。2. 环境准备搭建你的第一个Playwright工作区动手之前先把“战场”布置好。环境配置是劝退新手的第一个门槛但跟着步骤走其实很简单。2.1 安装Python与包管理工具Playwright支持多种语言但Python以其简洁易学成为自动化测试领域最流行的语言之一。首先确保你的电脑上安装了Python。去Python官网下载最新稳定版如3.8以上版本安装。安装时务必勾选“Add Python to PATH”这样才可以在命令行里直接使用python和pip命令。安装完成后打开命令行Windows上是CMD或PowerShellMac/Linux上是Terminal输入以下命令检查是否成功python --version pip --version如果都能正确显示版本号说明基础环境OK。接下来我建议创建一个独立的虚拟环境来管理项目依赖避免和你系统里其他Python项目冲突。这是专业开发者的好习惯。# 创建一个名为playwright-demo的文件夹并进入 mkdir playwright-demo cd playwright-demo # 创建虚拟环境环境文件夹名为venv python -m venv venv创建后需要激活虚拟环境Windows:venv\Scripts\activateMac/Linux:source venv/bin/activate激活后命令行提示符前面通常会显示(venv)表示你已经在虚拟环境中了。2.2 安装Playwright库与浏览器在激活的虚拟环境中使用pip安装Playwright的Python库pip install playwright这个命令会安装Playwright的核心库。安装完成后我们还需要安装它需要操作的浏览器。Playwright很贴心提供了一个命令来安装所有它支持的浏览器Chromium, Firefox, WebKit的可执行文件playwright install这个步骤可能会花费一些时间因为它需要下载浏览器二进制文件。如果网络较慢可以单独安装需要的浏览器比如只安装Chromiumplaywright install chromium注意playwright install命令下载的浏览器是Playwright专门优化过的版本与你自己在电脑上安装的Chrome或Firefox是独立的互不影响。这样做保证了测试环境的一致性。安装完成后可以通过一个快速命令验证Playwright是否就绪playwright --version这个命令会输出Playwright命令行工具的版本号。3. 第一个脚本从录制到理解环境准备好了我们不用急着从零开始写代码。Playwright提供了一个强大的“录制”功能可以像录屏一样记录你的操作并生成代码这是零基础入门的神器。3.1 使用Playwright CodeGen录制脚本在项目目录下确保虚拟环境已激活运行以下命令playwright codegen这个命令会同时打开两个窗口一个是你将要操作的浏览器另一个是Playwright Inspector工具窗口里面会实时生成你操作的代码。在打开的浏览器中地址栏输入一个测试网址例如https://www.baidu.com。在搜索框里用鼠标点击一下然后输入“Playwright自动化测试”。点击“百度一下”按钮。观察Playwright Inspector窗口你会发现代码在随着你的操作实时生成。录制一段简单的操作后点击Inspector窗口中的“Copy”按钮将生成的代码复制到剪贴板。然后在你的项目文件夹里创建一个Python文件比如first_script.py用文本编辑器如VSCode、PyCharm打开将代码粘贴进去。你可能会得到类似下面的代码from playwright.sync_api import sync_playwright with sync_playwright() as p: browser p.chromium.launch(headlessFalse) context browser.new_context() page context.new_page() page.goto(https://www.baidu.com/) page.locator(input[name\wd\]).click() page.locator(input[name\wd\]).fill(Playwright自动化测试) page.locator(text百度一下).click() # 这里可以加一个等待方便观察结果 page.wait_for_timeout(3000) browser.close()这就是你的第一个自动化脚本虽然它是录制的但已经完全具备了可执行的能力。3.2 逐行解读你的“Hello World”别急着运行我们先来拆解一下这段代码理解每一行在做什么。这是从“会用”到“懂得”的关键一步。from playwright.sync_api import sync_playwright导入Playwright的同步API。同步模式更符合新手思维一行执行完再执行下一行。Playwright也支持异步APIasync_playwright性能更高但学习曲线稍陡我们入门先从同步开始。with sync_playwright() as p:这是一个上下文管理器。sync_playwright()启动Playwright进程as p让我们获得一个Playwright实例p。使用with语句可以确保在代码块执行完毕后无论是否发生错误都能正确地关闭和清理Playwright占用的资源这是一种最佳实践。browser p.chromium.launch(headlessFalse)通过p.chromium对象启动一个Chromium浏览器实例。launch()方法可以接收参数这里headlessFalse表示“非无头”模式即你会看到浏览器界面弹出来。如果设置为True则会在后台静默运行不显示界面常用于服务器环境。context browser.new_context()创建一个新的浏览器上下文Context。你可以把它理解为一个独立的“隐身会话”它拥有独立的cookie、缓存和权限设置。一个浏览器实例可以创建多个互不干扰的上下文这在测试多用户场景时非常有用。page context.new_page()在上下文中创建一个新的页面Page对象。Page代表一个浏览器标签页是我们与网页交互的主要接口。page.goto(“https://www.baidu.com/”)命令浏览器页面跳转到指定的URL。page.locator(“input[name\’wd\’]”).click()这一行是核心操作之一。page.locator()是Playwright最强大的元素定位器。这里的参数“input[name\’wd\’]”是一个CSS选择器意思是“找到name属性为’wd’的input标签”。.click()方法表示点击这个元素。这行代码模拟了鼠标点击搜索框的操作。page.locator(“input[name\’wd\’]”).fill(“Playwright自动化测试”)同样是定位到那个输入框然后使用.fill()方法向里面填充文本。这比先用.click()再模拟键盘输入更稳定、更快速。page.locator(“text百度一下”).click()这里使用了另一种定位方式——文本定位器“text百度一下”意思是找到页面上文本内容为“百度一下”的元素并点击。Playwright的文本定位非常智能能处理部分匹配和空格。page.wait_for_timeout(3000)让脚本暂停等待3000毫秒即3秒。这是一个固定等待主要用于演示时让我们有足够时间看到搜索结果页。在实际脚本中应尽量避免使用固定等待而是用更智能的page.wait_for_selector()、page.wait_for_function()等等待条件成立。browser.close()关闭浏览器。由于我们使用了with语句这一行其实不是必须的上下文管理器会帮我们处理。但显式地写出来是个好习惯。理解这些后你就不是代码的旁观者了。你可以尝试修改它比如把网址换成https://www.bing.com把搜索词换成别的感受一下掌控感。4. 核心技能元素定位的“道”与“术”录制功能虽好但不能解决所有问题。要想写出健壮、可维护的脚本必须掌握手动定位元素的技能。这是自动化测试工程师的基本功也是面试必问的点。4.1 Playwright定位器Locator哲学Playwright强烈推荐使用page.locator(selector)来创建定位器对象而不是直接使用page.click(selector)这样的旧式写法。为什么因为Locator对象是惰性求值的并且具有链式调用能力代码更清晰且能自动等待元素可操作。一个核心原则优先使用面向用户的定位策略。什么意思就是尽量用用户看得见、能理解的属性来定位比如文本内容、标签名而不是深奥的、容易变动的CSS路径或XPath。4.2 八大定位策略详解与实战选择Playwright提供了丰富的定位策略我结合经验给你排个优先级和使用场景按文本内容定位最推荐page.locator(“text登录”)或page.locator(“text’Sign in’”)。这是最直观、最稳定的方式之一因为UI文本变动的频率相对较低。对于按钮、链接特别有效。按CSS选择器定位最常用page.locator(“button.submit-btn”)。CSS选择器是Web前端的标准功能强大。优先使用id、class、name、type等属性。实操心得打开浏览器的开发者工具F12使用“元素选择”工具点击目标元素在Elements面板中右键该元素选择“Copy” - “Copy selector”可以快速获取一个CSS选择器。但自动生成的往往很长且脆弱需要你简化它只保留关键特征如唯一的id或具有辨识度的class。按XPath定位谨慎使用page.locator(“xpath//button[id’submit’]”)。XPath非常强大可以定位到任何元素但缺点是表达式可能很复杂且对页面结构变化极其敏感。一个微小的div嵌套变动就可能导致XPath失效。我的建议是只有在CSS和文本定位都无法解决时才考虑XPath并且尽量使用相对路径和具有稳定性的属性。按角色ARIA定位page.locator(“rolebutton[name’搜索’]”)。这是Playwright非常推崇的现代定位方式。ARIA角色role和名称name是专门为可访问性设计的通常比较稳定且能很好地表达元素的语义。如果你的应用遵循了良好的可访问性规范这将是最佳选择。按Placeholder定位page.locator(“input[placeholder’请输入用户名’]”)。对于输入框placeholder文本是个很好的定位锚点。按Title属性定位page.locator(“[title’工具提示’]”)。有些元素会有title属性当鼠标悬停时显示提示文本。按Label关联定位page.locator(“label:has-text(‘用户名’) ~ input”)。对于表单通过找到关联的label文本来定位input非常符合用户视角。组合定位与过滤定位器可以链式调用进行过滤。例如# 找到所有div然后过滤出其中包含“商品”文本的 page.locator(“div”).filter(has_text”商品”) # 找到所有按钮然后取第一个 page.locator(“button”).first # 找到特定位置的元素如第二个提交按钮 page.locator(“button.submit”).nth(1)避坑指南避免使用包含索引位置的绝对路径如div:nth-child(3) ul li:nth-child(5)也避免使用自动生成的长串CSS选择器。它们就像用纸糊的房子页面布局一变就塌。多花几分钟找到一个唯一、稳定、语义化的定位方式能为后续维护节省大量时间。4.3 定位辅助工具Playwright Inspector与浏览器开发者工具除了录制时的Inspector你还可以在任何脚本运行过程中打开它进行调试。在脚本的launch参数中加入devtoolsTrue浏览器会打开开发者工具。更专业的是使用PWDEBUG1环境变量。# 在命令行中设置环境变量并运行脚本 PWDEBUG1 python first_script.py在PWDEBUG模式下执行会暂停在第一行并打开Inspector。你可以单步执行查看每个步骤对应的定位器和快照这对于调试定位失败的问题 invaluable。5. 脚本增强等待、断言与框架集成一个只会点点点的脚本是脆弱的。我们需要让它学会“等待”和“判断”并融入测试框架这才是一个合格的测试脚本。5.1 智能等待告别time.sleep新手最爱用time.sleep(10)这是大忌。网络有快慢元素加载时间不确定固定等待要么浪费大量时间要么导致脚本因元素未加载而失败。Playwright内置了自动等待机制。对于大多数操作如click,fill,checkPlaywright在执行前会自动等待元素满足一系列可操作性条件如可见、启用、稳定等。但有些时候我们需要更灵活的等待等待元素出现page.wait_for_selector(“#success-message”)等待某个选择器对应的元素出现在DOM中。等待元素可见page.wait_for_selector(“#success-message”, state”visible”)等待元素不仅存在而且可见。等待导航完成page.goto(url, wait_until”networkidle”)。wait_until参数很关键“load”等待load事件触发“domcontentloaded”等待DOMContentLoaded事件触发“networkidle”等待网络基本空闲500ms内无新请求通常“networkidle”更可靠。等待特定条件page.wait_for_function(“() document.title.includes(‘结果’)”)可以等待任何JavaScript表达式返回真值。等待超时设置所有等待方法都可以设置超时时间例如page.wait_for_selector(“…”, timeout10000)表示最多等10秒。最佳实践优先依赖操作的自动等待在页面跳转或动态加载明显的地方显式使用wait_for_selector或wait_for_function。5.2 加入断言验证测试结果自动化测试的核心是“验证”。Playwright推荐与成熟的测试断言库如pytest结合使用但自身也提供了一些断言方法位于expectAPI中。首先你需要导入from playwright.sync_api import expect。然后你可以对定位器进行丰富的断言# 验证元素可见 expect(page.locator(“text操作成功”)).to_be_visible() # 验证元素包含文本 expect(page.locator(“.message”)).to_contain_text(“欢迎回来”) # 验证输入框的值 expect(page.locator(“#username”)).to_have_value(“testuser”) # 验证元素是否被选中复选框 expect(page.locator(“#agree”)).to_be_checked() # 验证页面标题 expect(page).to_have_title(“百度一下你就知道”) # 验证页面URL expect(page).to_have_url(“https://www.baidu.com/”)expect断言同样内置了智能等待它会在超时时间内不断重试直到断言通过或超时失败这比简单的if判断要强大和可靠得多。5.3 集成Pytest测试框架将脚本组织成标准的测试用例能更好地管理、运行和生成报告。pytest是Python生态中最主流的测试框架。安装pytestpip install pytest pytest-playwrightpytest-playwright是官方插件提供有用的Fixture。创建测试文件新建一个文件test_baidu_search.py。在pytest中测试文件和函数应以test_开头。编写测试用例import re from playwright.sync_api import Page, expect def test_baidu_search(page: Page): “”” 测试百度搜索功能 “”” # page fixture由pytest-playwright提供无需自己管理浏览器生命周期 page.goto(“https://www.baidu.com) # 定位搜索框并输入 search_box page.locator(“input[name’wd’]”) search_box.click() search_box.fill(“Playwright自动化测试”) # 点击搜索按钮 page.locator(“text百度一下”).click() # 等待结果页面加载验证标题包含搜索词 expect(page).to_have_title(re.compile(r”Playwright自动化测试”)) # 验证搜索结果列表中包含相关文本 first_result page.locator(“#content_left .result”).first expect(first_result).to_contain_text(“Playwright”)运行测试在命令行中进入项目目录直接运行pytest。pytest会自动发现并运行所有test_*.py文件中的test_*函数。使用pytest -v可以查看更多详细信息使用pytest --headed可以在有头模式下运行方便调试。使用Fixture管理资源pytest-playwright插件提供了page、context、browser等fixture让你无需关心它们的创建和关闭框架会自动处理。这是更优雅的方式。6. 常见问题与调试技巧实录在实际操作中你一定会遇到各种问题。我把最常见的一些坑和解决方法整理出来希望能让你少走弯路。6.1 元素定位失败Selector not found这是最高频的问题。可能原因1元素尚未加载。解决方案在操作前增加等待。使用page.wait_for_selector()或page.wait_for_function()。可能原因2iframe嵌套。元素在iframe内部。解决方案需要先切换到iframe上下文。# 通过iframe的name属性或选择器定位iframe frame page.frame(name”iframe-result”) # 或者 frame page.frame_locator(“iframe[title’编辑器’]”).content_frame # 然后在frame对象上进行操作 frame.locator(“button”).click()可能原因3动态ID或Class。元素的id或class是每次刷新页面随机生成的。解决方案放弃使用动态属性改用其他稳定属性如>browser p.chromium.launch(headlessTrue, args[‘--disable-blink-featuresAutomationControlled’])可能原因2缺少依赖。Linux服务器可能缺少浏览器运行所需的库。解决方案Playwright的install命令会尝试安装这些依赖但有时需要手动安装。可以使用Playwright CLI安装系统依赖playwright install-deps。可能原因3资源不足或超时。服务器性能较差。解决方案适当增加timeout配置比如page.goto(url, timeout60000)page.wait_for_selector(“…”, timeout30000)。6.3 处理弹窗、新标签页和对话框弹窗Alert, Confirm, PromptPlaywright可以监听并接受或驳回这些对话框。# 在触发弹窗的操作之前先设置监听器 page.on(“dialog”, lambda dialog: dialog.accept()) page.locator(“button#delete”).click() # 点击后会触发confirm弹窗将被自动接受新标签页/窗口# 在点击会打开新窗口的链接前监听新页面事件 with page.expect_popup() as popup_info: page.locator(“text在新窗口打开”).click() new_page popup_info.value # 现在可以操作new_page了 new_page.wait_for_load_state() expect(new_page).to_have_title(“新页面标题”)6.4 性能优化与稳定性提升复用浏览器上下文避免每个测试用例都启动关闭浏览器使用browser.new_context()创建独立的上下文来隔离测试但复用浏览器实例可以大幅提升套件执行速度。使用page.route拦截和模拟网络请求对于依赖第三方API的测试可以拦截请求并返回模拟数据使测试更快速、更稳定。# 拦截所有图片请求避免加载节省时间和带宽 page.route(“**/*.{png,jpg,jpeg}”, lambda route: route.abort()) # 拦截特定API请求返回模拟数据 page.route(“https://api.example.com/data”, lambda route: route.fulfill( status200, content_type”application/json”, bodyjson.dumps({“mock”: “data”}) ))视频与截图测试失败时自动截图或录制视频是定位问题的利器。可以在browser.new_context()中配置context browser.new_context(record_video_dir”videos/”, viewport{‘width’: 1920, ‘height’: 1080}) # 测试失败时在teardown中保存视频和截图 page.screenshot(path”failure.png”, full_pageTrue)第一个脚本跑通只是起点。接下来你可以尝试用Pytest组织更多的测试用例用pytest.mark.parametrize实现数据驱动测试用Allure或Pytest-html生成漂亮的测试报告甚至将其集成到GitHub Actions中实现持续集成。Playwright的生态非常丰富还有像playwright-stealth这样的插件用来绕过一些反爬检测。记住自动化测试是一个“编码-调试-优化-维护”的循环多动手多踩坑进步最快。当你成功用自己写的脚本替代了第一次重复的手工操作时那种成就感就是最好的回报。