企业官网建设流程全解析

1. Playwright 自动化测试框架深度解析

作为一名在测试自动化领域摸爬滚打多年的老手，我最近系统性地研究了Playwright这个新兴框架。与传统的Selenium相比，Playwright确实带来了不少令人惊喜的特性。这篇文章将分享我从零开始学习Playwright的完整历程，包含环境搭建、核心API使用、实战技巧等方方面面。

Playwright最吸引我的地方在于它的"现代化"设计理念。它原生支持异步操作，内置自动等待机制，还能轻松模拟移动设备。在实际项目中，我发现它特别适合用来测试SPA（单页应用）和PWA（渐进式Web应用）。下面我就把这些经验系统地整理出来。

2. 环境配置与项目搭建

2.1 安装与初始化

在Python环境下安装Playwright非常简单：

# 安装核心库 pip install playwright # 安装浏览器二进制文件 playwright install

这里有个小技巧：如果只需要测试Chromium，可以指定安装：

playwright install chromium

注意：首次安装会自动下载浏览器二进制文件，文件较大（Chromium约180MB），建议在网速好的环境下操作。

2.2 推荐项目结构

经过多个项目的实践，我总结出以下目录结构最为合理：

project/ ├── tests/ # 测试用例 │ ├── test_login.py │ ├── test_checkout.py │ └── conftest.py # pytest配置 ├── pages/ # 页面对象模型 │ ├── base_page.py │ └── login_page.py ├── utils/ # 工具函数 │ └── helpers.py └── playwright.config.py # 全局配置

2.3 配置详解

一个完整的配置示例：

# playwright.config.py from playwright.sync_api import PlaywrightTestConfig config = PlaywrightTestConfig( base_url="https://example.com", timeout=30000, # 全局超时30秒 headless=False, # 调试时可设为False screenshot="only-on-failure", # 失败截图 video="retain-on-failure", # 失败录像 trace="on-first-retry", # 追踪信息 )

经验分享：在CI环境中务必开启headless模式，本地调试时可以关闭以便观察浏览器行为。

3. 核心API深度解析

3.1 浏览器上下文管理

Playwright采用三层架构：

from playwright.sync_api import sync_playwright def test_basic_flow(): with sync_playwright() as p: # 1. 启动浏览器实例 browser = p.chromium.launch(headless=False) # 2. 创建隔离的上下文 context = browser.new_context( viewport={"width": 1920, "height": 1080}, locale="zh-CN" # 设置中文环境 ) # 3. 创建页面实例 page = context.new_page() page.goto("https://example.com") # 4. 资源清理 context.close() browser.close()

关键概念：

• Browser：对应物理浏览器进程，创建成本高
• Context：轻量级的隔离环境，可模拟不同会话
• Page：单个标签页，大部分操作在此进行

3.2 元素定位最佳实践

经过大量实践，我总结出以下定位优先级：

3.2.1 Role定位（首选）

page.get_by_role("button", name="登录").click() page.get_by_role("textbox", name="用户名").fill("admin")

优势：

• 基于ARIA语义，最接近用户视角
• 对DOM结构变化不敏感
• 可读性最高

3.2.2 Text定位

# 精确匹配 page.get_by_text("提交订单").click() # 模糊匹配 page.get_by_text("订单", exact=False).click()

3.2.3 Label定位（表单专用）

page.get_by_label("邮箱地址").fill("user@example.com")

3.2.4 Placeholder定位

page.get_by_placeholder("请输入手机号").fill("13800138000")

3.2.5 CSS/XPath定位（最后选择）

page.locator(".submit-btn").click() page.locator("//button[contains(@class, 'primary')]").click()

重要原则：优先使用语义化定位器，其次考虑文本定位，CSS/XPath应作为最后手段。

3.3 常用操作详解

输入操作

# 普通输入 page.get_by_label("用户名").fill("admin") # 模拟人工输入（带延迟） page.get_by_label("密码").type("mypassword", delay=100) # 清空后输入 search = page.get_by_label("搜索") search.clear() search.fill("Playwright")

点击操作

# 普通点击 page.get_by_role("button", name="提交").click() # 特殊点击 page.locator(".editable").dblclick() page.locator(".menu").click(button="right") page.get_by_text("确定").click(force=True) # 强制点击

下拉选择

# 单选下拉框 page.get_by_label("省份").select_option("广东省") # 多选下拉框 page.get_by_label("兴趣").select_option(["编程", "音乐"])

4. 高级特性与应用

4.1 网络请求拦截

Playwright强大的网络控制能力：

# 拦截请求 def handle_request(route, request): if "analytics" in request.url: route.abort() # 屏蔽统计请求 else: route.continue_() page.route("**/*", handle_request) # 模拟API响应 page.route("/api/user", lambda route: route.fulfill( status=200, content_type="application/json", body='{"name": "mock_user"}' ))

4.2 多页面/iframe处理

# 处理新标签页 with page.expect_popup() as popup_info: page.get_by_text("在新窗口打开").click() new_page = popup_info.value # 操作iframe frame = page.frame_locator("iframe[name='content']") frame.get_by_role("button", name="提交").click()

4.3 设备模拟

# 模拟iPhone iphone = playwright.devices["iPhone 12"] context = browser.new_context(**iphone) # 自定义设备 custom_device = { "viewport": {"width": 375, "height": 812}, "userAgent": "Mozilla/5.0...", "deviceScaleFactor": 3 } context = browser.new_context(**custom_device)

5. 实战经验与避坑指南

5.1 常见问题解决

问题1：元素定位失败

• 检查是否在iframe内
• 确认元素已加载完成（Playwright默认自动等待）
• 尝试使用更稳定的定位策略

问题2：测试不稳定

• 避免使用sleep，改用wait_for_selector
• 增加全局超时时间
• 启用retry机制

5.2 性能优化技巧

1. 复用浏览器实例：不要每个测试都启动新浏览器

# conftest.py @pytest.fixture(scope="session") def browser(): with sync_playwright() as p: browser = p.chromium.launch() yield browser browser.close()

2. 并行执行：使用多个browser context实现并行

def test_parallel(): with sync_playwright() as p: browser = p.chromium.launch() # 创建多个隔离的context context1 = browser.new_context() context2 = browser.new_context() # 并行执行测试...

3. 选择性截图：只在失败时保存截图和视频

# playwright.config.py config = PlaywrightTestConfig( screenshot="only-on-failure", video="retain-on-failure" )

5.3 最佳实践总结

1. 使用Page Object模式：将页面封装为类，提高可维护性

class LoginPage: def __init__(self, page): self.page = page self.username = page.get_by_label("用户名") self.password = page.get_by_label("密码") def login(self, username, password): self.username.fill(username) self.password.fill(password) self.page.get_by_role("button", name="登录").click()

2. 合理使用hook：利用pytest的fixture管理资源

@pytest.fixture def page(browser): context = browser.new_context() page = context.new_page() yield page context.close()

3. 集成CI/CD：在流水线中运行测试

# GitHub Actions示例 jobs: test: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-python@v2 - run: pip install playwright pytest - run: playwright install - run: pytest tests/

经过几个月的实践，我发现Playwright确实大幅提升了我们的测试效率和稳定性。特别是在处理复杂SPA应用时，它的自动等待机制和丰富的API让测试代码更加健壮。对于刚开始接触的同学，建议先从官方示例入手，逐步掌握各种定位策略和高级特性。