Playwright进阶指南 (6) | 自动化测试实战

最新推荐文章于 2025-11-25 06:38:30 发布

原创

最新推荐文章于 2025-11-25 06:38:30 发布 · 492 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#自动化 #playwright #测试工具

2025企业级测试解决方案：从单测到千级并发，打造高可用测试体系

一、为什么传统自动化测试难以落地？

根据2025年最新行业调研，测试项目失败的三大核心原因：

失败原因	占比	典型表现
维护成本过高	45%	选择器频繁失效，用例难以更新
环境依赖性	30%	"在我机器上能跑"综合征
执行效率低下	25%	单机运行2小时，无法快速反馈

Playwright通过智能选择器、容器化环境和分布式执行，将测试成功率提升至92%！

二、企业级测试架构设计

测试金字塔实践配比

UI测试（10%）      - 关键业务流程
集成测试（20%）     - 模块间交互
单元测试（70%）     - 核心业务逻辑

三、实战：电商系统测试框架搭建

1. 项目结构设计

tests/
├── pages/           # 页面对象模型
│   ├── login-page.ts
│   ├── product-page.ts
│   └── cart-page.ts
├── fixtures/        # 测试夹具
│   ├── test-data.ts
│   └── mock-api.ts
├── specs/           # 测试用例
│   ├── checkout-flow.spec.ts
│   └── search-functionality.spec.ts
├── utils/           # 工具函数
│   ├── assertions.ts
│   └── reporters.ts
└── config/          # 配置文件
    ├── base.config.ts
    └── ci.config.ts

2. 高级Page Object模式

// pages/base-page.ts - 基础页面类
exportabstractclass BasePage {
constructor(protected page: Page) {}

// 通用等待方法
protectedasync waitForState(
    selector: string, 
    state: 'visible' | 'hidden' = 'visible',
    timeout = 15000
  ) {
    const locator = this.page.locator(selector);
    await locator.waitFor({ state, timeout });
    return locator;
  }

// 截图方法
async takeScreenshot(name: string) {
    const path = `screenshots/${name}-${new Date().getTime()}.png`;
    awaitthis.page.screenshot({ path, fullPage: true });
    return path;
  }
}

// pages/login-page.ts - 登录页面
exportclass LoginPage extends BasePage {
// 元素定位器
private readonly usernameInput = this.page.getByLabel('用户名');
private readonly passwordInput = this.page.getByPlaceholder('密码');
private readonly submitButton = this.page.getByRole('button', { name: '登录' });

// 操作封装
async login(username: string, password: string) {
    awaitthis.usernameInput.fill(username);
    awaitthis.passwordInput.fill(password);
    awaitthis.submitButton.click();
    
    // 等待登录完成
    awaitthis.page.waitForURL(/dashboard/);
  }

// 业务方法
async loginAsAdmin() {
    returnthis.login(
      process.env.ADMIN_USERNAME!, 
      process.env.ADMIN_PASSWORD!
    );
  }
}

3. 测试数据工厂

// fixtures/test-data.ts
exportclass TestDataFactory {
static createUser(role: 'admin' | 'customer' | 'vip' = 'customer') {
    const baseUser = {
      email: `testuser+${D