快速入门Playwright框架：Web自动化测试利器

📝 面试求职： 「面试试题小程序」 ，内容涵盖 测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

---

一、Playwright核心优势

1.1 多浏览器支持

1.2 多语言支持

• JavaScript/TypeScript：原生支持

• Python：语法简洁，易上手

• Java：企业级应用

• .NET：C#生态系统

1.3 关键特性

• ✅ 自动等待：无需手动添加sleep

• ✅ 网络拦截：模拟API响应、监控请求

• ✅ 设备模拟：移动端测试、地理位置模拟

• ✅ 截图录屏：自动生成测试证据

---

二、环境搭建：5分钟搞定

2.1 Python环境安装

# 安装Playwright
pip install playwright

# 安装浏览器（Chromium、Firefox、WebKit）
playwright install

2.2 验证安装​​​​​​​

import playwright
print(playwright.__version__)
# 输出：1.40.0 表示安装成功

---

三、第一个Playwright脚本

3.1 基础示例：百度搜索​​​​​​​

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # 启动浏览器
    browser = p.chromium.launch(headless=False)  # headless=True 无头模式
    page = browser.new_page()

    # 访问百度
    page.goto("https://www.baidu.com")

    # 输入搜索词
    page.fill("#kw", "Playwright自动化测试")

    # 点击搜索按钮
    page.click("#su")

    # 等待结果加载
    page.wait_for_selector(".result")

    # 截图保存
    page.screenshot(path="search_result.png")

    # 关闭浏览器
    browser.close()

3.2 脚本解析

方法	说明	优势
launch()	启动浏览器	支持多种参数配置
new_page()	创建新页面	隔离测试环境
goto()	页面跳转	自动等待页面加载
fill()	输入文本	自动等待元素可见
click()	点击元素	智能点击，避免元素遮挡
wait_for_selector()	等待元素	替代sleep的智能等待

---

四、核心API快速掌握

4.1 元素定位大全​​​​​​​

# 多种定位方式
page.click("text=登录")                    # 文本定位
page.fill("#username", "testuser")        # CSS选择器
page.click("button:has-text('提交')")     # 组合定位
page.fill("input[name='email']", "test@example.com")  # 属性定位

# 最佳实践：使用locator对象
search_box = page.locator("#kw")
search_box.fill("搜索内容")
search_box.click()

4.2 等待策略​​​​​​​

# 自动等待（推荐）
page.click("button")  # 自动等待元素可点击

# 显式等待
page.wait_for_selector(".result", state="visible", timeout=10000)

# 自定义等待条件
page.wait_for_function("() => document.title.includes('结果')")

4.3 网络拦截​​​​​​​

# 监控请求
page.route("**/api/*", lambda route: print(route.request.url))

# 模拟响应
page.route("**/api/user", lambda route: route.fulfill(
    status=200,
    body='{"name": "mock用户"}'
))

# 阻止加载
page.route("**/*.{png,jpg,jpeg}", lambda route: route.abort())

---

五、实战案例：电商网站测试

5.1 测试场景

用户登录 → 搜索商品 → 添加购物车 → 下单

5.2 完整脚本​​​​​​​

from playwright.sync_api import sync_playwright

def test_e2e_flow():
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)
        context = browser.new_context()
        page = context.new_page()

        try:
            # 1. 登录
            page.goto("https://demo-shop.com/login")
            page.fill("#username", "testuser")
            page.fill("#password", "testpass")
            page.click("#login-btn")

            # 2. 搜索商品
            page.fill(".search-box", "Playwright书籍")
            page.click(".search-button")
            page.wait_for_selector(".product-item")

            # 3. 添加购物车
            first_product = page.locator(".product-item:first-child")
            first_product.locator(".add-cart").click()

            # 4. 去结算
            page.click("#cart-icon")
            page.click(".checkout-btn")

            # 5. 断言验证
            assert page.is_visible("text=订单创建成功")
            print("测试通过！")

        finally:
            # 清理工作
            context.close()
            browser.close()

if __name__ == "__main__":
    test_e2e_flow()

---

六、高级技巧提升效率

6.1 录制功能：代码生成器

# 启动录制模式
playwright codegen https://demo-shop.com

优势：边操作边生成代码，学习API的最佳方式

6.2 并行测试​​​​​​​

# 同时测试多浏览器
browsers = [p.chromium, p.firefox, p.webkit]
for browser_type in browsers:
    browser = browser_type.launch()
    page = browser.new_page()
    # 执行测试
    browser.close()

6.3 设备模拟​​​​​​​

# 模拟iPhone测试
iphone = p.devices["iPhone 12"]
browser = p.chromium.launch()
context = browser.new_context(**iphone)
page = context.new_page()

---

七、调试与问题排查

7.1 常用调试方法​​​​​​​

# 1. 慢动作模式（观察执行过程）
browser = p.chromium.launch(headless=False, slow_mo=500)

# 2. 打印页面内容
print(page.content())

# 3. 调试模式
PLAYWRIGHT_DEBUG=1 python your_script.py

# 4. 录制视频
context = browser.new_context(record_video_dir="videos/")

7.2 常见问题解决

• 元素找不到：增加等待时间、检查选择器

• 点击无效：使用force=True参数

• 跨域问题：使用--disable-web-security启动参数

---

八、与现有测试框架集成

8.1 搭配Pytest​​​​​​​

import pytest
from playwright.sync_api import Page

@pytest.fixture(scope="function")
def page():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        context = browser.new_context()
        page = context.new_page()
        yield page
        browser.close()

def test_login(page: Page):
    page.goto("https://example.com/login")
    # 测试逻辑

8.2 生成测试报告

# 运行测试并生成HTML报告
pytest --html=report.html

---

九、学习路径建议

9.1 初学者路线

1. 安装环境、运行第一个脚本

2. 掌握元素定位和基本操作

3. 学习等待策略和网络拦截

4. 实战完整业务场景

5. 集成到测试框架

9.2 进阶学习

• 自定义选择器引擎

• 浏览器上下文隔离

• 分布式测试

• 持续集成（CI/CD）

最后： 下方这份完整的软件测试视频教程已经整理上传完成，需要的朋友们可以自行领取【保证100%免费】

​

​​​