Playwright 极速入门:1 小时搞定环境搭建与首个测试脚本

简介: 本文带你1小时快速入门Playwright,完成环境搭建并编写首个测试脚本。Playwright是微软推出的现代化Web自动化测试工具,支持Chromium、Firefox和WebKit三大浏览器引擎,具备跨平台、多语言(Python/JS/Java/C#)特性。其核心优势包括:智能自动等待机制减少失败率、内置录制工具实时生成脚本、多语言灵活选择,以及真移动端设备模拟能力,显著提升测试效率和可靠性。

一、Playwright 简介与核心优势

Playwright 是微软开源的现代化 Web 自动化工具,支持 Chromium(Chrome/Edge)、Firefox、WebKit(Safari) 三大浏览器引擎,提供跨平台(Windows/macOS/Linux)和跨语言(Python/JS/Java/C#)的统一 API。
核心优势:
✅ 自动等待机制:智能等待元素加载,减少因网络延迟导致的失败
✅ 录制与调试工具:内置 codegen 实时生成操作脚本
✅ 多语言支持:Python/Node.js/Java/C# 灵活选择
✅ 真移动端模拟:内置设备描述符(如 iPhone 13/Pixel 5)

二、环境搭建(10分钟搞定!)

1. 安装 Python 环境(需 3.8+)

# 检查 Python 版本
python --version
# 安装 Playwright 库
pip install playwright
# 安装浏览器驱动(自动下载 Chromium/Firefox/WebKit)
playwright install

避坑提示:国内用户可通过设置镜像加速下载:

set PLAYWRIGHT_DOWNLOAD_HOST=https://npmmirror.com/mirrors/playwright
playwright install

2. 验证安装

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)  # 显示浏览器界面
    page = browser.new_page()
    page.goto("https://playwright.dev")
    print(page.title())  # 输出:Fast and reliable end-to-end testing
    browser.close()

运行成功即表示环境就绪

三、首个测试脚本:网页导航与截图(15分钟)

from playwright.sync_api import sync_playwright

def run():
    with sync_playwright() as p:
        # 启动 Chromium 并访问网页
        browser = p.chromium.launch(headless=False)
        page = browser.new_page()
        page.goto("https://example.com")

        # 保存截图(含完整页面)
        page.screenshot(path="example.png", full_page=True)

        # 打印页面标题
        print("页面标题:", page.title())

        browser.close()

if __name__ == "__main__":
    run()

效果说明:

  • 自动打开浏览器并访问 example.com
  • 生成全页截图 example.png
  • 控制台输出标题 "Example Domain"

四、进阶操作:元素定位与交互(20分钟)

1. 元素定位四大方式

# 文本定位(推荐!)
page.locator("text='登录'").click()

# CSS 选择器
page.locator("#submit-btn").click()

# XPath
page.locator("//button[@class='confirm']").click()

# 语义化定位(ARIA 角色)
page.get_by_role("button", name="提交").click()

最佳实践:优先使用 text 或 get_by_role() 提高可读性和稳定性。

2. 模拟用户登录流程

# 输入用户名密码
page.get_by_placeholder("请输入手机号/邮箱").fill("test@example.com")
page.get_by_placeholder("请输入密码").fill("mypassword")

# 点击登录按钮
page.get_by_role("button", name="登录").click()

# 等待导航完成
page.wait_for_url("**/dashboard")

注:wait_for_url() 确保页面跳转完成再继续操作。

五、调试神器:录制工具与 Trace Viewer

1. 脚本录制(codegen)

# 启动录制器(自动生成 Python 代码)
playwright codegen https://example.com

操作浏览器界面即可实时生成代码,适合快速原型设计:
!https://example.com/codegen-demo.png

提示:录制后需优化定位器逻辑。

2. 追踪测试过程(Trace Viewer)

context = browser.new_context()
context.tracing.start(screenshots=True, snapshots=True)  # 开启记录
# ...执行操作...
context.tracing.stop(path="trace.zip")                  # 保存日志

查看日志:

npx playwright show-trace trace.zip

可回放操作视频、查看 DOM 快照及网络请求。

六、同步 vs 异步模式选择

模式 适用场景 代码示例
同步模式 简单脚本/快速调试 from playwright.sync_api import ...
异步模式 高并发/复杂任务 await page.goto(...)

异步示例:


import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://example.com")
        await browser.close()

asyncio.run(main())

提示:爬虫或批量操作时异步效率提升 3 倍+。

七、实战案例:爬取商品数据

async def scrape_products():
    asyncwith async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page()
        await page.goto("https://shop.example.com")

        # 获取所有商品标题
        titles = await page.eval_on_selector_all(
            ".product-item", 
            "elements => elements.map(e => e.textContent)"
        )
        print(titles)  # 输出:['商品A', '商品B', ...]

        await browser.close()

关键点:eval_on_selector_all() 直接执行 JS 提取数据。

八、总结与学习路径

1 小时成果清单
✅ 环境搭建与浏览器驱动安装
✅ 首个导航+截图脚本
✅ 元素定位与表单操作
✅ 脚本录制与 Trace 调试
下一步学习
➡️ 框架集成:结合 Pytest 管理测试用例
➡️ 移动端测试:p.devices["iPhone 13"] 模拟真机
➡️ CI/CD 流水线:GitHub Actions 自动执行测试

官方资源
https://playwright.dev/python
https://github.com/microsoft/playwright-python

掌握基础操作后,你已具备用 Playwright 实现 自动化测试、数据采集、监控任务 的能力!

相关文章
|
2天前
|
测试技术 开发者 Python
Python单元测试入门:3个核心断言方法,帮你快速定位代码bug
本文介绍Python单元测试基础,详解`unittest`框架中的三大核心断言方法:`assertEqual`验证值相等,`assertTrue`和`assertFalse`判断条件真假。通过实例演示其用法,帮助开发者自动化检测代码逻辑,提升测试效率与可靠性。
28 1
|
20天前
|
测试技术 Linux
VPS一键测试脚本,无痕体验+自动导出,服务器测试更轻松
NodeQuality 是一款整合 Yabs、IPQuality、NetQuality 等主流 VPS 测试脚本的全能工具,支持一键测试硬件性能、IP属性、网络质量,并新增分享与导出功能。其“无痕测试”设计不安装依赖、不留残留,兼容性强;测试结果自动排版、截图并生成分享链接,极大提升效率。适合需要全面、快速、干净测试 VPS 的用户,是运维和测评的高效利器。
74 3
|
13天前
|
监控 测试技术 API
n8n自动化测试教程 (1):环境搭建与初识n8n
n8n是一款开源、可视化的工作流自动化工具,测试工程师可通过拖拽节点快速构建API测试流程,实现测试编排、数据管理、自动化监控与告警等功能,提升测试效率与覆盖率。
|
13天前
|
存储 测试技术 API
数据驱动开发软件测试脚本
今天刚提交了我的新作《带着ChatGPT玩转软件开发》给出版社,在写作期间跟着ChatGPT学到许多新知识。下面分享数据驱动开发软件测试脚本。
18 0
|
3月前
|
人工智能 自然语言处理 JavaScript
专为 Claude Code 设计的基于 YAML 的 Playwright MCP 自动化测试
YAML配置结合Claude Code与Playwright MCP,将自动化测试变得人人可用。通过简洁的YAML语法替代复杂的JavaScript代码,解决传统测试中冗长、硬编码和复用性差等问题。自然语言描述测试步骤,AI解析执行,支持多环境切换与智能报告生成,极大降低技术门槛,提升团队协作效率。无论是开发、QA还是产品经理,都能轻松参与测试流程,真正实现可读、易维护的自动化测试新范式。
|
3月前
|
Java 测试技术 容器
Jmeter工具使用:HTTP接口性能测试实战
希望这篇文章能够帮助你初步理解如何使用JMeter进行HTTP接口性能测试,有兴趣的话,你可以研究更多关于JMeter的内容。记住,只有理解并掌握了这些工具,你才能充分利用它们发挥其应有的价值。+
729 23
|
8月前
|
数据可视化 前端开发 测试技术
接口测试新选择:Postman替代方案全解析
在软件开发中,接口测试工具至关重要。Postman长期占据主导地位,但随着国产工具的崛起,越来越多开发者转向更适合中国市场的替代方案——Apifox。它不仅支持中英文切换、完全免费不限人数,还具备强大的可视化操作、自动生成文档和API调试功能,极大简化了开发流程。
|
5月前
|
SQL 安全 测试技术
2025接口测试全攻略:高并发、安全防护与六大工具实战指南
本文探讨高并发稳定性验证、安全防护实战及六大工具(Postman、RunnerGo、Apipost、JMeter、SoapUI、Fiddler)选型指南,助力构建未来接口测试体系。接口测试旨在验证数据传输、参数合法性、错误处理能力及性能安全性,其重要性体现在早期发现问题、保障系统稳定和支撑持续集成。常用方法包括功能、性能、安全性及兼容性测试,典型场景涵盖前后端分离开发、第三方服务集成与数据一致性检查。选择合适的工具需综合考虑需求与团队协作等因素。
667 24
|
5月前
|
SQL 测试技术
除了postman还有什么接口测试工具
最好还是使用国内的接口测试软件,其实国内替换postman的软件有很多,这里我推荐使用yunedit-post这款接口测试工具来代替postman,因为它除了接口测试功能外,在动态参数的支持、后置处理执行sql语句等支持方面做得比较好。而且还有接口分享功能,可以生成接口文档给团队在线浏览。
230 2
|
7月前
|
JSON 前端开发 测试技术
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
315 10
大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡