cypress 强制测试隔离，默认禁止跨测试用例共享状态；推荐通过 api 调用（而非 ui 操作）复用测试数据，确保测试独立、稳定、可维护。
cypress 强制测试隔离，默认禁止跨测试用例共享状态；推荐通过 api 调用（而非 ui 操作）复用测试数据，确保测试独立、稳定、可维护。
在 Cypress 中，每个 it() 测试用例默认运行在完全隔离的上下文中——浏览器会重置状态（包括 localStorage、sessionStorage、cookies 和页面 DOM），且上一个测试中创建的数据（如新增的员工）不会自动延续到下一个测试。这正是你遇到“必须重复 cy.visit() 并重新打开员工列表”的根本原因：Cypress 故意不让你“携带状态”，因为它将测试隔离视为核心最佳实践。
✅ 推荐方案：使用 API 辅助函数创建测试数据（非 UI 方式）
与其依赖 UI 流程（点击按钮 → 填表 → 提交 → 等待弹窗），不如封装一个轻量级、可靠的 API 调用函数，在任意测试中快速生成所需数据：
// cypress/support/commands.js
Cypress.Commands.add('createStaffMember', (staffData = {}) => {
const payload = {
name: staffData.name || 'Test Staff',
email: staffData.email || `test+${Date.now()}@example.com`,
role: staffData.role || 'editor'
};
cy.request('POST', '/api/staff', payload)
.then((response) => {
expect(response.status).to.eq(201);
cy.log(`✅ Staff created with ID: ${response.body.id}`);
return response.body;
});
});
随后在测试中直接调用：
describe('Staff Management', () => {
beforeEach(() => {
cy.visit('/staff/list'); // 统一入口，但不依赖前序测试状态
});
it('creates a staff member via UI', () => {
cy.get('[data-testid="add-staff-btn"]').click();
cy.get('[name="name"]').type('Jane Doe');
cy.get('[name="email"]').type('jane@example.com');
cy.get('form').submit();
cy.contains('.toast', 'Staff added successfully').should('be.visible');
});
it('displays newly created staff in list (via API setup)', () => {
// ✅ 独立创建：不依赖上一个测试的 UI 行为
cy.createStaffMember({ name: 'John Smith', email: 'john@example.com' });
// 刷新列表或触发重新加载（如需验证渲染）
cy.reload();
// 断言该员工出现在表格中
cy.contains('tbody tr', 'John Smith').should('exist');
});
});
⚠️ 注意事项与权衡
- 绝不推荐禁用测试隔离（如 testIsolation: false）：虽技术上可行，但会破坏失败定位能力，导致“雪崩式失败”——一个测试崩溃可能连锁导致后续全部失败，极大增加调试成本。
- 避免合并多个断言到单个 it()：例如把“创建 + 搜索 + 编辑 + 删除”全写在一个测试里，虽能规避状态问题，却违背原子性原则，降低可读性与可维护性。
- 清理测试数据（可选但推荐）：对关键场景（如数据库敏感环境），可在 afterEach 中调用 cy.request('DELETE', '/api/staff/{id}') 清理，确保环境纯净。
✅ 总结
真正健壮的 Cypress 测试不是“模拟用户走流程”，而是以开发者视角协同前端与后端契约：UI 测试聚焦交互逻辑与视觉反馈，而数据准备交给更稳定、更快捷的 API 层。这种分层设计不仅解决状态传递难题，更大幅提升执行速度、稳定性与团队协作效率。
