端到端测试

端到端测试是一种验证整个应用程序从用户界面到后端服务的完整流程的测试方法。它模拟真实用户操作，确保各个组件协同工作。在Node.js生态中，工具如Cypress、Playwright和TestCafe常被用于实现这类测试。

端到端测试的核心概念

端到端测试（E2E Testing）关注的是系统作为一个整体的行为，而非单个模块的功能。它通常覆盖以下场景：

1. 用户注册和登录流程
2. 关键业务路径（如电商的购物车结算）
3. 跨微服务的集成
4. 第三方API交互

与单元测试不同，E2E测试需要：

• 真实或接近真实的测试环境
• 完整的数据库状态
• 网络请求的实际发送

Node.js中的端到端测试工具比较

Cypress

Cypress提供了完整的测试运行器，支持实时重载和时光旅行调试：

describe('登录测试', () => {
  it('成功登录后跳转到仪表盘', () => {
    cy.visit('/login')
    cy.get('#username').type('testuser')
    cy.get('#password').type('password123')
    cy.get('form').submit()
    cy.url().should('include', '/dashboard')
  })
})

特点：

• 内置断言库
• 自动等待机制
• 不支持多标签页测试

Playwright

微软开发的跨浏览器测试工具：

const { test } = require('@playwright/test');

test('购物车结算流程', async ({ page }) => {
  await page.goto('https://shop.example.com');
  await page.click('#product-1 .add-to-cart');
  await page.click('#checkout-button');
  await expect(page).toHaveURL(/payment/);
});

优势：

• 支持Chromium、WebKit和Firefox
• 可模拟移动设备
• 并行测试能力强

TestCafe

无需额外驱动程序的解决方案：

fixture`文件上传测试`
  .page`https://example.com/upload`;

test('应成功上传文件', async t => {
  await t
    .setFilesToUpload('#file-input', ['/path/to/file.pdf'])
    .click('#submit-button')
    .expect(Selector('#status').innerText).eql('上传完成');
});

独特功能：

• 自动处理iframe
• 内置代理服务器
• 支持远程设备测试

测试数据管理策略

有效的E2E测试需要可靠的数据准备机制：

工厂模式创建测试数据

// factories/user.js
const faker = require('faker');

module.exports = {
  createUser(overrides = {}) {
    return {
      username: faker.internet.userName(),
      email: faker.internet.email(),
      password: 'Test123!',
      ...overrides
    };
  }
};

// 测试用例中使用
const user = factories.createUser({
  email: 'specific@test.com'
});

数据库种子

使用knex.js实现：

exports.seed = async function(knex) {
  await knex('users').insert([
    { id: 1, name: '测试用户1', role: 'admin' },
    { id: 2, name: '测试用户2', role: 'user' }
  ]);
  
  await knex('products').insert({
    sku: 'TEST-001',
    price: 99.99,
    inventory: 100
  });
};

常见测试模式实现

页面对象模型(POM)

将UI元素封装为可重用对象：

// pages/LoginPage.js
class LoginPage {
  constructor(page) {
    this.page = page;
    this.usernameField = '#username';
    this.passwordField = '#password';
    this.submitButton = 'button[type="submit"]';
  }

  async navigate() {
    await this.page.goto('/login');
  }

  async login(username, password) {
    await this.page.fill(this.usernameField, username);
    await this.page.fill(this.passwordField, password);
    await this.page.click(this.submitButton);
  }
}

module.exports = LoginPage;

// 测试用例
const loginPage = new LoginPage(page);
await loginPage.login('admin', 'password');

API拦截与Mock

使用Playwright实现网络请求拦截：

await page.route('**/api/products', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify([{
      id: 1,
      name: '模拟商品',
      price: 19.99
    }])
  });
});

持续集成中的实践

GitHub Actions配置示例：

name: E2E Tests
on: [push]

jobs:
  test:
    runs-on: ubuntu-latest
    services:
      postgres:
        image: postgres:13
        env:
          POSTGRES_PASSWORD: test
        ports:
          - 5432:5432
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run test:e2e
        env:
          DB_URL: postgres://postgres:test@localhost:5432/testdb

关键配置项：

• 数据库服务容器化
• 并行测试执行
• 失败截图和视频归档

性能优化技巧

1. 测试并行化：

// playwright.config.js
module.exports = {
  workers: process.env.CI ? 4 : 2
};

2. 智能等待策略：

// 替代sleep(5000)
await page.waitForFunction(() => {
  return document.querySelector('#loading').style.display === 'none';
});

3. 选择性截图：

test('关键路径验证', async ({ page }) => {
  // ...测试步骤
  await page.screenshot({ path: 'checkout-flow.png', fullPage: true });
});

错误诊断与调试

当测试失败时，可以收集以下信息：

1. 控制台日志：

page.on('console', msg => console.log('BROWSER LOG:', msg.text()));

2. 网络请求记录：

await page.route('**', route => {
  console.log(route.request().url());
  route.continue();
});

3. 元素状态快照：

const html = await page.evaluate(() => document.documentElement.outerHTML);
fs.writeFileSync('debug.html', html);

移动端测试适配

使用设备描述符模拟移动环境：

// playwright.config.js
const devices = require('@playwright/test').devices;

module.exports = {
  projects: [
    {
      name: 'iPhone 12',
      use: { ...devices['iPhone 12'] }
    }
  ]
};

触屏操作模拟：

await page.touchscreen.tap(100, 200);
await page.touchscreen.swipe(0, 0, 0, 100);

无障碍测试集成

将axe-core与测试工具结合：

const { injectAxe, checkA11y } = require('axe-playwright');

test('应通过无障碍检测', async ({ page }) => {
  await page.goto('/');
  await injectAxe(page);
  await checkA11y(page, null, {
    detailedReport: true,
    detailedReportOptions: {
      html: true
    }
  });
});