编辑“︁Cypress测试框架”︁

{{DISPLAYTITLE:Cypress测试框架}}

'''Cypress''' 是一个现代化的前端端到端（E2E）测试框架，专为现代Web应用程序设计，尤其适合[[Vue.js]]应用程序的自动化测试。它提供了直观的API、实时重载、自动等待和强大的调试工具，使开发者能够高效地编写可靠的测试用例。

== 概述 ==
Cypress不同于传统的Selenium-based测试工具，它直接在浏览器中运行，与应用程序共享相同的生命周期，从而提供更快的执行速度和更准确的测试结果。主要特点包括：
* '''实时反馈'''：测试运行时可以实时观察浏览器行为。
* '''自动等待'''：无需手动添加等待语句，Cypress自动等待元素加载完成。
* '''时间旅行'''：测试失败时可查看每一步的快照和状态。
* '''网络控制'''：轻松模拟API请求和响应。

== 安装与配置 ==
=== 安装 ===
通过npm安装Cypress：
<syntaxhighlight lang="bash">
npm install cypress --save-dev
</syntaxhighlight>

=== 初始化 ===
运行以下命令生成Cypress目录结构：
<syntaxhighlight lang="bash">
npx cypress open
</syntaxhighlight>
这会创建以下目录：
<pre>
cypress/
  ├── fixtures/    # 测试数据
  ├── integration/ # 测试用例
  ├── plugins/     # 插件配置
  └── support/     # 全局命令和配置
</pre>

== 基本用法 ==
=== 编写第一个测试 ===
以下是一个简单的测试用例，验证Vue.js应用的首页标题：
<syntaxhighlight lang="javascript">
// cypress/integration/homepage.spec.js
describe('Homepage Test', () => {
  it('Displays correct title', () => {
    cy.visit('/') // 访问根路径
    cy.get('h1').should('contain', 'Welcome to My Vue App')
  })
})
</syntaxhighlight>

=== 测试交互 ===
测试一个按钮点击事件：
<syntaxhighlight lang="javascript">
it('Increments counter on button click', () => {
  cy.visit('/counter')
  cy.get('[data-test="count"]').should('contain', '0')
  cy.get('[data-test="increment-btn"]').click()
  cy.get('[data-test="count"]').should('contain', '1')
})
</syntaxhighlight>

== 高级功能 ==
=== 模拟API请求 ===
使用<code>cy.intercept()</code>拦截API请求：
<syntaxhighlight lang="javascript">
it('Mocks API response', () => {
  cy.intercept('GET', '/api/users', {
    statusCode: 200,
    body: [{ id: 1, name: 'Test User' }]
  }).as('getUsers')

  cy.visit('/users')
  cy.wait('@getUsers')
  cy.get('.user-list li').should('have.length', 1)
})
</syntaxhighlight>

=== 组件测试 ===
Cypress支持直接测试Vue组件（需安装<code>@cypress/vue</code>）：
<syntaxhighlight lang="javascript">
import { mount } from '@cypress/vue'
import Counter from '../src/components/Counter.vue'

it('Component Test', () => {
  mount(Counter)
  cy.contains('button', 'Increment').click()
  cy.get('.count').should('contain', '1')
})
</syntaxhighlight>

== 实际案例 ==
=== 测试登录流程 ===
以下是一个完整的登录测试场景：
<syntaxhighlight lang="javascript">
describe('Login Flow', () => {
  beforeEach(() => {
    cy.intercept('POST', '/auth/login', {
      statusCode: 200,
      body: { token: 'fake-jwt-token' }
    })
  })

  it('Successful login redirects to dashboard', () => {
    cy.visit('/login')
    cy.get('[data-test="email"]').type('user@example.com')
    cy.get('[data-test="password"]').type('password123')
    cy.get('[data-test="submit"]').click()
    cy.url().should('include', '/dashboard')
    cy.getCookie('auth_token').should('exist')
  })
})
</syntaxhighlight>

== 最佳实践 ==
* 使用<code>data-test</code>属性而非CSS选择器定位元素
* 将常用操作封装为自定义命令（<code>cypress/support/commands.js</code>）
* 利用Hooks（<code>beforeEach</code>, <code>afterEach</code>）管理测试状态
* 结合Cypress Dashboard实现CI/CD集成

== 与其他工具对比 ==
{| class="wikitable"
|+ 测试框架对比
! 特性 !! Cypress !! Selenium !! Jest
|-
| 执行环境 || 浏览器内 || 浏览器驱动 || Node.js
|-
| 速度 || 快 || 慢 || 最快
|-
| 调试 || 优秀 || 一般 || 好
|-
| Vue支持 || 直接支持 || 需要适配 || 需要配置
|}

== 可视化测试流程 ==
<mermaid>
graph TD
    A[编写测试用例] --> B[运行测试]
    B --> C{测试通过?}
    C -->|是| D[部署应用]
    C -->|否| E[调试失败]
    E --> A
</mermaid>

== 数学表达 ==
在测试覆盖率计算中：
<math>
\text{覆盖率} = \frac{\text{已执行代码行数}}{\text{总代码行数}} \times 100\%
</math>

== 总结 ==
Cypress为Vue.js应用测试提供了完整的解决方案，从简单的DOM操作到复杂的API模拟和组件测试。其开发者友好的设计使得编写和维护测试用例变得简单高效，是现代化前端测试的首选工具之一。

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vue.js测试]]