# 使用 Playwright 进行 Web 应用程序测试 ## 概述 Playwright 是一个强大的 Web 测试和自动化框架，支持所有现代浏览器（Chromium、Firefox、WebKit）。它提供可靠、快速、强大的自动化，具有自动等待、网络控制和全面的测试功能。当您需要执行以下操作时，请使用此技能： * 为Web应用程序创建端到端测试 * 自动化浏览器交互和工作流程 * 跨多个浏览器和设备进行测试 * 验证 UI/UX 功能和可访问性 * 模拟API并拦截网络请求 * 捕获屏幕截图和视频以进行调试 ## 核心能力 ### 多浏览器测试 * 铬（Chrome、Edge、Brave） * 火狐浏览器（Mozilla Firefox） * WebKit（Safari引擎） * 跨浏览器兼容性测试 * 跨浏览器并行执行 ### 元素交互 * 单击、双击、右键单击 * 使用真实的键盘模拟输入文本 * 选择下拉菜单和复选框 * 悬停和焦点交互 * 拖放操作 * 文件上传和下载 ### 断言和验证 * 元素可见性和状态检查 * 文字内容验证 * 属性验证 * URL 和导航断言 * 自定义期望匹配器 * 多次检查的软断言 ### 屏幕截图和视频捕捉 * 整页截图 * 特定于元素的捕获 * 测试过程的视频录制 * 视觉对比测试 * 用于调试的跟踪文件 ### 网络拦截 * 模拟 API 响应 * 拦截并修改请求 * 监控网络流量 * 测试离线场景 * 性能监控 ### 移动设备模拟 * 100 多个设备预设（iPhone、Pixel、iPad 等） * 自定义视口配置 * 触摸事件模拟 * 地理定位测试 * 方向改变 ## 核心测试工作流程 ### 1\.基本测试设置使用 Playwright 的自动等待创建一个简单的测试：导入pytest from playwright.sync_api import Page，期望 def test_homepage_loads（页面：页面）： """测试主页加载是否成功。""" page.goto("https://example.com") Expect(page).to_have_title("示例域") Expect(page.locator("h1")).to_contain_text("示例域") def test_navigation（页面：页面）： """测试页面之间的导航。""" page.goto("https://example.com") page.click("text=更多信息") 期望（页面）.to_have_url（“https://www.iana.org/domains/reserved”） ### 2\.表单交互测试表格填写、验证和提交： def test_login_form（页面：页面）： """测试登录表单提交。""" page.goto("https://example.com/login") # 填写表单字段 page.fill("#username", "testuser@example.com") page.fill("#password", "SecurePassword123") page.check("#remember-me") # 提交并验证 page.click("按钮[type='提交']") 期望（页面）。to_have_url（“https://example.com/dashboard”） Expect(page.locator(".welcome-message")).to_be_visible() ### 3\. API模拟用于受控测试的模拟 API 响应： def test_with_mocked_api(页面：页面): """使用模拟 API 响应进行测试。""" # 模拟 API 响应 page.route("**/api/user", lambda 路由：route.fulfill( 状态=200， content_type =“应用程序/json”， body='{"name": "测试用户", "premium": true}' ）） page.goto("https://example.com/profile") Expect(page.locator(".user-name")).to_contain_text("测试用户") ### 4\.移动仿真在移动设备上测试响应式设计： @pytest.fixture def mobile_page(剧作家): """创建移动浏览器上下文。""" iphone = playwright.devices['iPhone 12'] 浏览器= playwright.chromium.launch() 上下文 = browser.new_context(**iphone) 页面 = context.new_page() 产量页上下文.close() browser.close() def test_mobile_menu(mobile_page: 页面): """测试移动导航。""" mobile_page.goto("https://example.com") Expect(mobile_page.locator(".hamburger-menu")).to_be_visible() mobile_page.click(".汉堡菜单") 期望（mobile_page.locator（“。mobile-menu”））。to_be_visible（） ### 5\.视觉回归捕获屏幕截图进行视觉比较： def test_homepage_screenshot（页面：页面）： """抓取主页截图。""" page.goto("https://example.com") # 全页截图 page.screenshot(path="screenshots/homepage.png", full_page=True) # 元素截图 page.locator("header").screenshot(path="screenshots/header.png") # 带有动态内容蒙版的屏幕截图页面.截图( 路径=“屏幕截图/dashboard.png”， mask=[page.locator(".timestamp"), page.locator(".session-id")] ） ## 关键测试原则 ### 使用可靠的选择器 # ✅ 好：测试 ID 和语义选择器 page.click("[data-testid='提交按钮']") page.click("按钮:文本('提交')") page.click("角色=按钮[名称='提交']") # ❌ 不好：脆弱的结构选择器 page.click("div > div > 按钮:nth-child(3)") ### 利用自动等待 # ✅ 好：剧作家自动等待页面.点击(“按钮”) Expect(page.locator(".result")).to_be_visible() # ⚠️避免：手动等待 time.sleep(2) # 仅在绝对必要时 ### 确保测试隔离 # ✅ 好：测试之间的清洁状态 @pytest.fixture(autouse=True) defclear_state(页：页): 产量 page.context.clear_cookies() page.evaluate("localStorage.clear()") ### 处理不稳定的测试 # ✅ 好：等待特定条件页面.点击(“按钮”) page.wait_for_selector(".result") 结果 = page.locator(".result").text_content() # ✅ 好：使用软断言 Expect.soft(page.locator(".title")).to_be_visible() Expect.soft(page.locator(".price")).to_contain_text("$") ## 页面对象模型使用页面对象模式组织测试以提高可维护性：类登录页面： """登录页面对象。""" def __init__(self, 页: 页): self.page = 页 self.username_input = page.locator("#username") self.password_input = page.locator("#password") self.submit_button = page.locator("button[type='提交']") def 登录（自我，用户名：str，密码：str）： """执行登录。""" self.username_input.fill(用户名) self.password_input.fill(密码) self.submit_button.click() # 在测试中使用 def test_login(页：页): 登录页面 = 登录页面（页面） login_page.login("test@example.com", "password123") 期望（页面）.to_have_url（“/仪表板”） ## 常见测试模式 ### 身份验证 @pytest.fixture defauthentiated_page（页面：页面）： """提供经过身份验证的会话。""" page.goto("https://example.com/login") page.fill("#用户名", "test@example.com") page.fill("#password", "密码") page.click("按钮[type='提交']") page.wait_for_url("**/仪表板") 产量页 ### 文件操作 # 上传 page.set_input_files("#file-input", "path/to/file.pdf") # 下载使用 page.expect_download() 作为 download_info： page.click("a:text('下载')") 下载 = download_info.value download.save_as("下载/文件.pdf") ### 网络监控请求=[] page.on("请求", lambda req: requests.append(req)) page.goto("https://example.com") # 验证 API 调用是否已进行 api_requests = [r for r in requests if "/api/" in r.url] 断言 len(api_requests) > 0 ## 运行测试 ### 基本命令 # 安装剧作家 pip 安装剧作家 pytest-playwright 剧作家安装 # 运行所有测试 pytest 测试/ # 运行特定浏览器 pytest --浏览器 chromium --浏览器 firefox # 以 head 模式运行（参见浏览器） pytest --headed # 调试模式 PWDEBUG=1 pytest 测试/test_login.py # 并行执行 pytest -n 自动 # 生成测试代码剧作家代码生成器 https://example.com ### 配置请参阅“references/setup-configuration.md”了解： * 完整的安装说明 * 项目结构设置 * pytest.ini配置 * 用于 TypeScript 的 playwright.config.ts * CI/CD 集成示例 ## 质量标准确保测试符合以下标准： * 测试是独立的并且可以按任何顺序运行 * 选择器是可靠的（测试 ID、语义选择器） * 正确的错误处理和断言 * 失败时捕获的屏幕截图/视频 * 无硬编码等待（使用自动等待） * 测试之间的干净状态管理 ## 其他资源 ### 详细文档 * [安装和配置]() \- 安装、项目结构和配置 * [最佳实践]() \- 选择器策略、等待模式、片状测试预防 * [常见陷阱]() \- 竞态条件、选择器脆性、清理问题 * [CI/CD 集成]() \- GitHub Actions、Docker、部署管道 ### 代码示例 * [登录测试]() \- 身份验证流程和会话管理 * [表单测试]() \- 表单验证、文件上传、下拉菜单 * [电子商务测试]() \- 购物车、结账流程、优惠券 * [API Mocking]() \- 网络拦截、模拟、监控 * [移动测试]() \- 设备模拟、触摸事件、响应式设计 * [页面对象模型]() \- POM 模式实现 ### 帮助脚本 * [Playwright Helper]() \- 常见 Playwright 操作的实用函数 * [测试示例]() \- 完整的测试套件示例 ### 外部资源 * 官方文档： * Python API： * TypeScript API： * 最佳实践： * 社区不和谐： ## 故障排除 **测试不稳定：** * 使用 Playwright 的自动等待代替手动睡眠 * 确保适当的等待条件（`wait_for_selector`、`wait_for_url`） * 使用自动重试的“expect()”断言 **选择器找不到元素：** * 使用浏览器开发工具验证元素是否存在 * 使用剧作家检查器：`PWDEBUG=1 pytest test.py` * 尝试多种选择器策略（文本、角色、测试 ID） **CI 中的测试速度缓慢：** * 启用并行执行：`pytest -n auto` * 仅使用 head 模式进行调试 * 考虑重用浏览器上下文进行相关测试有关更多故障排除提示，请参阅[常见陷阱]()。

网络应用程序测试

包含技能