SuperAPI AI 工具集

playwright

测试与质量

查看项目

更新于 10-13 21:33

技能介绍

用途

Playwright 是一个现代化的端到端(E2E)测试框架,用于对 Web 应用进行端到端测试。当需要跨浏览器测试、验证用户流程与交互,或需要截图/视频录制时,可使用该框架。

主要能力

  • 自动等待(Auto-wait):自动等待元素就绪。
  • 跨浏览器支持:Chromium、Firefox、WebKit。
  • 内置测试运行器:支持并行执行、失败重试、多种报告器。
  • 网络控制:可 mock 和拦截网络请求。
  • 调试:提供 UI 模式、trace 查看器、检查器(inspector)。

使用方式

安装:

# 初始化新的 Playwright 项目
npm init playwright@latest

# 或添加到现有项目
npm install -D @playwright/test

# 安装浏览器
npx playwright install

快速开始步骤:npm init playwright@latest,选择 TypeScript 和测试位置,然后运行 npx playwright test,用 npx playwright show-report 查看报告。

配置在 playwright.config.ts 中通过 defineConfig 定义,可设置 testDir、fullyParallel、forbidOnly、retries、workers、reporter、use(baseURL、trace、screenshot)、projects(chromium、firefox、webkit、Mobile Chrome 等设备)以及 webServer。

测试基础:使用 @playwright/test 的 test 与 expect 编写测试,可用 test.describe 分组,并通过 test.beforeEach、test.afterEach、test.beforeAll、test.afterAll 等钩子管理测试生命周期。

定位器(Locator)策略:推荐基于角色的定位器,如 page.getByRole、getByLabel、getByPlaceholder、getByText、getByTestId、getByTitle、getByAltText;也支持 CSS 选择器、XPath、链式定位与过滤定位。

代码组织:支持页面对象模型(Page Object Model)与组件模式(Component Pattern),把页面与组件封装为类。

用户交互:支持表单交互(文本输入、复选框、单选按钮、下拉选择、多选、文件上传)、鼠标与键盘操作(多种点击、悬停、拖放、快捷键、焦点)。

等待策略:waitForSelector、waitForLoadState、waitForURL、waitForFunction、waitForTimeout、waitForEvent。

断言:覆盖可见性、文本内容、属性、CSS、数量、URL 与标题、截图比较;另有软断言(expect.soft)、多元素断言与轮询断言(toPass)。

认证模式:存储状态模式(storageState 保存与复用登录状态),以及多用户角色 fixture 模式。

网络控制:通过 page.route mock API 响应等。

适用场景

  • 测试 Web 应用的端到端流程。
  • 需要跨浏览器测试。
  • 测试用户流程与交互。
  • 需要截图或视频录制。

限制

关于该技能的具体收费、价格、平台限制、效果承诺等信息,资料中暂未提供。