Cypress/Playwright 跨浏览器测试

以下是关于 Cypress 和 Playwright 跨浏览器测试的基本知识总结：

一、工具核心差异

二、跨浏览器基础配置

1. Playwright 多浏览器配置

// playwright.config.ts
import {
             defineConfig, devices } from '@playwright/test';

export default defineConfig({
            
  projects: [
    {
            
      name: 'chromium',
      use: {
             ...devices['Desktop Chrome'] },
    },
    {
            
      name: 'firefox',
      use: {
             ...devices['Desktop Firefox'] },
    },
    {
            
      name: 'webkit',
      use: {
             ...devices['Desktop Safari'] },
    }
  ],
});

2. Cypress 跨浏览器方案

// cypress.config.js
module.exports = {
            
  e2e: {
            
    browsers: [
      {
             name: 'chrome', family: 'chromium', channel: 'stable' },
      {
             name: 'firefox', family: 'firefox' },
      {
             name: 'edge', family: 'chromium', channel: 'edge' }
    ]
  }
}

三、浏览器特性处理策略

1. CSS 差异处理

// 统一重置浏览器默认样式
beforeEach(async () => {
            
  await page.addStyleTag({
            
    content: `* { margin: 0 !important; padding: 0 !important; }`
  });
});

2. JavaScript 兼容方案

// 检测浏览器类型执行不同逻辑
test('执行浏览器特定操作', async ({
              browserName }) => {
            
  if (browserName === 'firefox') {
            
    await page.evaluate(() => {
            
      // Firefox 特殊处理
    });
  }
});

3. 浏览器扩展处理

// Playwright 加载扩展
const context = await browser.newContext({
            
  ignoreHTTPSErrors: true,
  extraHTTPHeaders: {
             'x-test': 'value' },
  // 加载广告拦截扩展
  args: ['--disable-extensions-except=./my-extension', '--load-extension=./my-extension']
});

四、高级测试策略

1. 条件化测试执行

// 仅特定浏览器运行测试
test.describe('@firefox-only', () => {
            
  test('Firefox 特殊功能测试', async ({
              browserName }) => {
            
    test.skip(browserName !== 'firefox', '仅限 Firefox 执行');
    // 测试逻辑
  });
});

2. 视觉回归测试

// Playwright 视觉对比
await expect(page).toHaveScreenshot({
            
  fullPage: true,
  threshold: 0.2, // 允许20%差异
  maxDiffPixels: 100, // 最多100像素差异
});

3. 网络环境模拟

// 模拟 3G 网络
const slow3G = {
            
  downloadThroughput: 500 * 1024, // 500 KB/s
  uploadThroughput: 250 * 1024,   // 250 KB/s
  latency: 200                    // 200ms
};

test.use({
             
  contextOptions: {
             
    serviceWorkers: 'block',
    offline: false,
    ...slow3G
  } 
});

五、企业级最佳实践

1. 浏览器矩阵配置

# 云测试平台浏览器矩阵
browser_matrix:
  - browser: chrome
    versions: [98, 100, 102]
    os: [Windows 11, macOS Monterey]
  - browser: firefox
    versions: [97, 100]
    os: [Ubuntu 22.04]
  - browser: safari
    versions: [15.4]
    os: [macOS Ventura]

2. 智能失败重试

// Playwright 重试策略
export default defineConfig({
            
  retries: process.env.CI ? 2 : 0, // CI环境自动重试
  workers: process.env.CI ? 4 : undefined // 并行执行
});

3. 安全测试集成

// CSP 策略验证
test('验证内容安全策略', async ({
              page }) => {
            
  const cspViolations = [];
  page.on('securityviolation', violation => {
            
    cspViolations.push(violation);
  });
  await page.goto('/');
  expect(cspViolations).toHaveLength(0);
});

六、性能优化技巧

1. 并行执行加速

# Playwright 并行执行
npx playwright test --workers 4

# Cypress 并行（需付费版）
npx cypress run --parallel --record --key=xxx

2. 缓存复用策略

// 复用登录状态
const storageState = JSON.parse(fs.readFileSync('auth.json'));
const context = await browser.newContext({
             storageState });

3. 智能等待优化

// Playwright 自动等待元素稳定
await page.locator('#submit').click({
            
  timeout: 15000, // 15秒超时
  trial: true     // 检查元素可操作性
});

七、调试技巧

1. 浏览器控制台集成

// Playwright 控制台监听
page.on('console', msg => {
            
  if (msg.type() === 'error') 
    console.log('浏览器错误:', msg.text());
});

// Cypress 实时调试
cy.get('button').then($btn => {
            
  debugger; // 自动暂停测试
});

2. 网络请求分析

// 捕获所有请求
const requests = [];
page.on('request', req => requests.push(req));
await page.goto('/');
console.log('总请求数:', requests.length);

八、未来演进方向

1. 智能测试分配

// 基于历史数据的智能分发
const browserPriority = calculatePriority(testCase);
test.use({
             browser: browserPriority });

2. 元宇宙浏览器测试

// 扩展 XR 测试能力
await page.emulateXR({
            
  orientation: [0, 0, 0],
  position: [0, 0, 0],
});

3. 量子安全测试

// 量子加密算法验证
test('抗量子签名验证', async () => {
            
  await page.evaluate(() => {
            
    verifyQuantumSignature();
  });
});

九、典型问题解决方案