Cypress - 钩子

Cypress - Hooks

Cypress 借鉴了 Mocha 的结构，提供了 hook（钩子函数），允许您在测试套件和测试用例执行期间的特定时间点运行代码。它们对于设置前置条件或在测试后进行清理非常有用。

主要的可用 hook 包括：

• before(callback)：在 describe 块内的任何测试开始执行前运行一次。
• after(callback)：在 describe 块内的所有测试完成后运行一次。
• beforeEach(callback)：在 describe 块内的每个独立的测试（it 块）运行前执行。
• afterEach(callback)：在 describe 块内的每个独立的测试（it 块）完成后执行。

实现示例

以下是您如何在测试文件中使用这些 hook 的示例：

describe('Hooks Example Suite', function() {
  before(function() {
    // Runs once before all tests in this block
    cy.log('Before All Hook: Executing once before all tests');
    // Example: Seed database, start a server
  });

  after(function() {
    // Runs once after all tests in this block
    cy.log('After All Hook: Executing once after all tests');
    // Example: Clean up database, stop a server
  });

  beforeEach(function() {
    // Runs before each test in this block
    cy.log('Before Each Hook: Executing before each test');
    // Example: Visit a page, log in a user
    cy.visit('https://example.cypress.io/commands/actions');
  });

  afterEach(function() {
    // Runs after each test in this block
    cy.log('After Each Hook: Executing after each test');
    // Example: Log out user, clear cookies/localStorage
  });

  it('First Test Case', function() {
    cy.log('Executing First Test Case');
    cy.get('.action-email').type('test1@example.com');
  });

  it('Second Test Case', function() {
    cy.log('Executing Second Test Case');
    cy.get('.action-disabled').should('be.disabled');
  });
});

执行结果：

运行此测试时，Cypress Command Log（命令日志）将按以下顺序显示 cy.log 消息（穿插其他命令日志）：

1. ‘Before All Hook: Executing once before all tests’ (运行一次)

2. ‘Before Each Hook: Executing before each test’ (在 First Test Case 之前)

3. ‘Executing First Test Case’

4. ‘After Each Hook: Executing after each test’ (在 First Test Case 之后)

5. ‘Before Each Hook: Executing before each test’ (在 Second Test Case 之前)

6. ‘Executing Second Test Case’

7. ‘After Each Hook: Executing after each test’ (在 Second Test Case 之后)

8. ‘After All Hook: Executing once after all tests’ (在最后运行一次)

这表明 before 和 after 在每个 describe 块中各运行一次，而 beforeEach 和 afterEach 在该 describe 块内的每个 it 块运行前/后都会执行。

测试隔离：.only 和 .skip

Mocha（以及 Cypress）还提供了使用 .only 和 .skip 修饰符控制运行哪些测试或套件的方式。这些可以附加到 describe() 或 it() 函数后面。

使用 .only

将 .only 附加到 describe 或 it 块将确保在该 spec 文件中只执行该块（以及其他也标记了 .only 的块）。所有其他测试都将被跳过。

describe('Focusing Tests with .only', function() {
  it('This test will be skipped', function() {
    cy.log('First Test - Skipped');
  });

  it.only('This test will run', function() {
    cy.log('Second Test - I will run!');
    // Useful for focusing on a specific test during development
  });

  it('This test will also be skipped', function() {
    cy.log('Third Test - Skipped');
  });
});

// If multiple .only are used, all of them will run:
describe.only('Another focused suite', function() {
  it('This test inside a focused suite will run', function(){
    cy.log('Test in describe.only');
  });
});

使用 .only 的执行结果：

Command Log 将仅显示 ‘Second Test - I will run!’ 和 ‘Test in describe.only’ 的执行信息。其他测试将被标记为 pending/skipped（待定/跳过）。

常见陷阱：提交代码前，记得移除 .only，因为这可能导致在您的测试套件或 CI 中意外跳过其他重要的测试。

使用 .skip

将 .skip 附加到 describe 或 it 块将导致该块在测试运行时被跳过。

describe('Skipping Tests with .skip', function() {
  it('This test will run', function() {
    cy.log('First Test - Will run');
  });

  it.skip('This test will be skipped', function() {
    cy.log('Second Test - I am skipped!');
    // Useful for temporarily disabling a flaky or work-in-progress test
  });

  it('This test will also run', function() {
    cy.log('Third Test - Will run');
  });
});

使用 .skip 的执行结果：

Command Log 将显示 ‘First Test - Will run’ 和 ‘Third Test - Will run’ 的执行信息。‘Second Test - I am skipped!’ 将被标记为 pending/skipped（待定/跳过）。

实际应用：beforeEach 常用于在每个测试用例前导航到特定页面或确保用户已登录。afterEach 可用于清理，如用户登出或重置应用程序状态。.skip 对于临时禁用已知会失败或正在开发中的测试非常有用。