能否将Cypress的beforeEach与afterEach钩子逻辑封装为自定义命令？

解决方案 #

完全可以实现，有两种常用方案可以满足你的需求：

方案1：全局注册钩子（推荐，无需额外封装命令）

Cypress 的全局支持文件（E2E测试对应cypress/support/e2e.js，组件测试对应cypress/support/component.js）中的代码会在所有测试用例文件加载前自动执行，你只需要把你的钩子代码直接写到这个文件里即可，所有spec文件都会自动生效，不需要再重复编写：

// cypress/support/e2e.js 或者 cypress/support/component.js
import 'cypress-localstorage-commands' // 确保你已经引入了插件

beforeEach(() => {
  cy.restoreLocalStorage();
});

afterEach(() => {
  cy.saveLocalStorage();
});

方案2：封装为自定义命令（适合仅部分spec需要的场景）

如果你不需要所有spec都默认开启localStorage持久化，只想按需调用，可以封装为自定义命令：

1. 首先在cypress/support/commands.js中注册自定义命令：

import 'cypress-localstorage-commands'

Cypress.Commands.add('useLocalStoragePersistence', () => {
  beforeEach(() => {
    cy.restoreLocalStorage()
  })
  afterEach(() => {
    cy.saveLocalStorage()
  })
})

2. 在需要用到该功能的spec文件顶部调用一次即可，不需要重复编写两个钩子：

// 某spec文件顶部
cy.useLocalStoragePersistence()

// 后面写你的测试用例
it('测试xxx', () => {
  // ...
})

注意：封装为自定义命令时，在单个spec文件内仅需调用一次即可，重复调用会导致钩子重复注册，逻辑执行多次。

内容的提问来源于stack exchange，提问作者Manuel Abascal