testing-e2e

testing-e2e

用途

此技能支持使用 Playwright、Cypress 和 Selenium 等工具进行端到端（E2E）测试，适用于浏览器自动化、视觉回归测试以及与 CI/CD 流水线集成。重点在于为 Web 应用实现可靠的自动化测试。

适用场景

当需要对 Web 应用进行全栈测试时，可使用此技能，例如验证用户流程、UI 交互或视觉变更。在部署前进行回归测试、检查跨浏览器兼容性，或在类似生产环境中排查 UI 问题时，都可以使用此技能。

核心能力

• 使用 Playwright 自动化浏览器交互：支持无头模式、跟踪记录，以及通过 expect.toHaveScreenshot() 进行视觉比较。
• 运行 Cypress 测试：包含实时重新加载、自动等待和用于断言的自定义命令。
• 为旧版配置实现 Selenium：使用 WebDriver 控制浏览器并处理动态内容。
• 页面对象模型（POM）：使用可复用的页面类组织测试，例如在单独的文件中定义定位器。
• 视觉回归：使用 Playwright 的跟踪查看器或 Cypress 插件捕获并比较截图。
• CI 集成：为 GitHub Actions 或 Jenkins 等工具生成报告和构建产物。

使用模式

设置 E2E 测试时，使用所选工具初始化项目，并在专用目录中编写测试。敏感数据始终使用环境变量，例如使用 $PLAYWRIGHT_BROWSER 选择浏览器。

示例 1：用于登录流程的 Playwright 测试

• 创建测试文件：tests/login.spec.js
• 代码片段：

  const { test } = require('@playwright/test');
  test('login success', async ({ page }) => {
    await page.goto('https://app.example.com');
    await page.fill('#username', 'user');
    await page.click('#login');
  });
  

• 运行命令：npx playwright test --headed --project=chromium

示例 2：用于提交表单的 Cypress 测试

• 添加到 cypress/integration/form.spec.js
• 代码片段：

  describe('Form Submission', () => {
    it('submits correctly', () => {
      cy.visit('/form');
      cy.get('#name').type('Test User');
      cy.get('button[type=submit]').click();
      cy.url().should('include', '/success');
    });
  });
  

• 通过以下命令执行：npx cypress run --browser chrome --spec cypress/integration/form.spec.js

对于 Selenium，可将 WebDriver 与 POM 搭配使用：定义页面类，并在测试中调用方法。

常用命令/API

• Playwright CLI：使用 npx playwright install 设置浏览器；使用 npx playwright test --trace on 生成跟踪记录；API：使用 page.locator('selector').click() 进行交互。
• Cypress CLI：使用 npx cypress open 打开交互模式；使用 npx cypress run --config video=true 启用视频录制；API：使用 cy.get('selector').should('be.visible') 进行断言。
• Selenium 设置：使用 webdriverio 或类似工具；命令：使用类似 driver.get('https://example.com') 的脚本运行 node selenium-test.js；配置：用于设置 WebDriver 选项的 JSON 文件，例如 { "browserName": "chrome" }。
• 视觉回归：使用 Playwright 的 npx playwright show-trace trace.zip 查看跟踪记录；Cypress 可通过 cypress-image-snapshot 等插件实现。

集成说明

将此技能添加到 package.json 脚本中，以便集成到工作流，例如 "test:e2e": "npx playwright test"。对于 CI，可通过以下步骤在 GitHub Actions 中运行 Cypress：run: npx cypress run --reporter junit。如果需要 API 密钥（例如云服务的密钥），请设置 $SELENIUM_GRID_URL 或 $CYPRESS_API_KEY 等环境变量。使用 playwright install --with-deps 等工具确保已安装浏览器。对于多工具配置，可使用 playwright.config.ts 等配置文件导出各个项目。

错误处理

测试失败时，先检查日志：使用 Playwright 的 --trace 标记生成跟踪记录，并通过跟踪查看器进行调试。对于 Cypress，可启用 --config video=true 来录制视频。添加重试以处理常见错误，例如在 Playwright 中使用：test('retry', { retries: 2 }, async () => { ... })。对于 Selenium，可将代码放在 try-catch 代码块中：

try {
  await driver.findElement(By.id('element')).click();
} catch (error) {
  console.error('Element not found:', error);
}

明确断言条件以避免测试不稳定，并使用环境变量配置动态参数，防止设置错误。

图关系

• 集群：与“testing”集群关联，涵盖单元测试或集成测试等相关技能。
• 标签：关联带有“e2e”、“playwright”、“cypress”和“testing”标签的技能。
• 依赖项：关联 CI/CD 技能以集成流水线，并关联浏览器自动化工具以提供执行环境。