性能优化策略 - 元素码农

发布时间: 2025-03-27 19:20

↑

# 性能优化策略

本文将详细介绍Playwright测试的性能优化策略，帮助你提高测试执行效率，减少资源消耗，实现更快速和可靠的自动化测试。

## 基础优化

### 1. 测试配置优化

```typescript
// playwright.config.ts
import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  // 并行执行测试
  workers: 4,
  
  // 失败重试
  retries: 2,
  
  // 超时设置
  timeout: 30000,
  expect: {
    timeout: 5000
  },
  
  // 浏览器选项
  use: {
    viewport: { width: 1280, height: 720 },
    deviceScaleFactor: 1,
    isMobile: false,
    hasTouch: false
  }
};

export default config;
```

### 2. 资源管理

```typescript
// 优化浏览器实例
const browser = await chromium.launch({
  args: [
    '--disable-dev-shm-usage',
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-gpu'
  ]
});

// 优化上下文配置
const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  deviceScaleFactor: 1,
  isMobile: false,
  hasTouch: false,
  javaScriptEnabled: true,
  bypassCSP: false
});
```

## 执行优化

### 1. 并行执行

```typescript
// 配置并行执行
test.describe.configure({ mode: 'parallel' });

test.describe('并行测试组', () => {
  test('测试1', async ({ page }) => {
    // 测试代码
  });

test('测试2', async ({ page }) => {
    // 测试代码
  });
});

// 使用worker分片
// npx playwright test --shard=1/3
```

### 2. 测试隔离

```typescript
// 优化测试隔离
test.describe('隔离测试', () => {
  test.beforeEach(async ({ context }) => {
    // 清理状态
    await context.clearCookies();
    await context.clearPermissions();
    await context.clearLocalStorage();
  });

test('独立测试', async ({ page }) => {
    // 测试代码
  });
});
```

## 网络优化

### 1. 请求拦截

```typescript
// 拦截不必要的请求
await page.route('**/*.{png,jpg,jpeg,gif,css}', route => route.abort());

// 缓存API响应
const responseCache = new Map();

await page.route('**/api/**', async route => {
  const url = route.request().url();
  if (responseCache.has(url)) {
    await route.fulfill({
      status: 200,
      body: responseCache.get(url)
    });
    return;
  }
  
  const response = await route.fetch();
  const body = await response.text();
  responseCache.set(url, body);
  await route.fulfill({ body });
});
```

### 2. 资源优化

```typescript
// 禁用图片加载
await page.route('**/*.{png,jpg,jpeg,gif}', route => {
  route.fulfill({
    status: 200,
    body: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'
  });
});

// 优化网络请求
await context.setExtraHTTPHeaders({
  'Accept-Language': 'zh-CN,zh;q=0.9',
  'Cache-Control': 'no-cache'
});
```

## 代码优化

### 1. 选择器优化

```typescript
// 使用高效的选择器
// 好的做法
await page.getByRole('button', { name: '提交' }).click();
await page.getByTestId('submit-button').click();

// 避免的做法
await page.locator('div > div > button').click();
await page.locator('button:nth-child(2)').click();

// 缓存选择器
const submitButton = page.getByRole('button', { name: '提交' });
await submitButton.click();
await submitButton.isEnabled();
```

### 2. 等待策略

```typescript
// 优化等待策略
// 使用自动等待
await page.getByRole('button').click();

// 避免固定延时
// 不推荐
await page.waitForTimeout(2000);

// 推荐
await page.waitForSelector('.loading', { state: 'hidden' });
await page.waitForResponse('**/api/data');
```

## 内存优化

### 1. 内存管理

```typescript
// 定期清理内存
test.afterEach(async ({ context }) => {
  const pages = context.pages();
  await Promise.all(pages.map(page => page.close()));
});

// 限制页面数量
const maxPages = 3;
const pages = context.pages();
if (pages.length > maxPages) {
  await pages[0].close();
}
```

### 2. 资源释放

```typescript
// 及时释放资源
let browser;
try {
  browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  // 测试代码
} finally {
  await browser?.close();
}
```

## 监控与分析

### 1. 性能监控

```typescript
// 监控页面性能
const performanceMetrics = await page.evaluate(() => {
  const timing = performance.timing;
  return {
    loadTime: timing.loadEventEnd - timing.navigationStart,
    domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
    firstPaint: performance.getEntriesByType('paint')[0].startTime
  };
});

// 监控内存使用
const metrics = await page.metrics();
console.log('JS堆大小:', metrics.JSHeapUsedSize / 1024 / 1024, 'MB');
```

### 2. 性能报告

```typescript
// 生成性能报告
class PerformanceReporter {
  private metrics = [];

addMetric(name: string, value: number) {
    this.metrics.push({ name, value, timestamp: Date.now() });
  }

generateReport() {
    return {
      summary: {
        total: this.metrics.length,
        averages: this.calculateAverages()
      },
      details: this.metrics
    };
  }

private calculateAverages() {
    // 计算平均值
  }
}
```

## 最佳实践

### 1. 测试优化

```typescript
// 优化测试结构
test.describe('优化测试', () => {
  // 共享设置
  let context;
  
  test.beforeAll(async ({ browser }) => {
    context = await browser.newContext();
    await context.route('**/*.{png,jpg,jpeg,gif}', route => route.abort());
  });

test.afterAll(async () => {
    await context.close();
  });

// 复用页面
  test.beforeEach(async ({ context }) => {
    const page = await context.newPage();
    await page.goto('https://example.com');
  });
});
```

### 2. 缓存策略

```typescript
// 实现缓存管理器
class CacheManager {
  private static instance: CacheManager;
  private cache = new Map();

static getInstance() {
    if (!CacheManager.instance) {
      CacheManager.instance = new CacheManager();
    }
    return CacheManager.instance;
  }

set(key: string, value: any, ttl = 3600000) {
    this.cache.set(key, {
      value,
      expiry: Date.now() + ttl
    });
  }

get(key: string) {
    const item = this.cache.get(key);
    if (!item) return null;
    if (Date.now() > item.expiry) {
      this.cache.delete(key);
      return null;
    }
    return item.value;
  }
}
```

## 下一步

1. 了解[跨浏览器测试方案](/article/playwright/best-practices/cross-browser)
2. 探索[常见错误代码解析](/article/playwright/troubleshooting/error-codes)
3. 学习[元素定位失败分析](/article/playwright/troubleshooting/locator-failures)

## 参考资料

- [Playwright性能指南](https://playwright.dev/docs/test-parallel)
- [浏览器性能优化](https://playwright.dev/docs/browsers)
- [测试执行策略](https://playwright.dev/docs/test-retries)