Cypress 是一个功能强大的前端自动化测试框架，它的命令集可以非常方便地对页面进行模拟操作，并且提供了非常详细的日志输出和错误信息，方便开发人员进行调试。但是在实际的开发中，有些操作可能比较复杂，需要多次调用，在这种情况下，我们可以通过自定义 Cypress 命令来实现方便的调用并提高代码的可读性。
定义自定义命令
Cypress 中的自定义命令很容易就可以定义，只要使用 Cypress.Commands.add() 方法即可，并且可以根据需要传递参数和返回结果。例如，我们要定义一个自定义命令来模拟用户登录：
Cypress.Commands.add('login', (username, password) => {
cy.get('[data-cy=username]').type(username)
cy.get('[data-cy=password]').type(password)
cy.get('[data-cy=submit]').click()
})上面的代码中，我们用 Cypress.Commands.add() 来定义了一个名为 login 的自定义命令，该命令接受两个参数：用户名和密码。在该命令体内，我们使用了 Cypress 本身提供的命令，如 cy.get()、cy.type() 和 cy.click()，来执行模拟用户登录的操作。最后，我们可以在测试用例中像调用普通 Cypress 命令一样调用该自定义命令：
describe('Login', () => {
it('should login successfully', () => {
cy.visit('/login')
cy.login('test', 'password')
cy.url().should('eq', 'http://localhost:3000/home')
})
})上面的测试用例中，我们先使用普通的 Cypress 命令 cy.visit() 来访问登录页面，然后调用自定义命令 cy.login()，传递用户名和密码，执行登录操作。最后，我们使用 cy.url() 来检查是否成功登录到了首页。
传递参数
自定义命令与普通的 Cypress 命令一样，可以传递任意个数的参数，例如，我们可以来实现一个自定义命令，该命令接受任意个数的参数，并依次打印出来：
Cypress.Commands.add('print', (...args) => {
args.forEach(arg => {
console.log(arg)
})
})在该自定义命令的实现中，我们使用了 ES6 的扩展运算符 ...args 来接受任意个数的参数，并使用 forEach 循环来依次打印出来。这样，在测试用例中，我们就可以传递任意个数的参数：
describe('Print', () => {
it('should print parameters', () => {
cy.print('hello', 'world', '!')
})
})上面的测试用例中，我们调用了自定义命令 cy.print()，传递了三个参数，并在控制台中打印出来。
返回结果
自定义命令除了可以接受任意个数的参数外，还可以返回任意类型的结果，例如，我们要定义一个自定义命令，该命令接受一个 CSS 选择器，返回选中元素的坐标和尺寸：
Cypress.Commands.add('getBounds', selector => {
return cy.get(selector).then($element => {
const { left, top, width, height } = $element[0].getBoundingClientRect()
return { left, top, width, height }
})
})在该自定义命令的实现中，我们使用了 Cypress 命令 cy.get() 来选中指定的元素，并使用 Promise 来异步返回选中元素的坐标和尺寸，例如：
describe('Get Bounds', () => {
it('should get bounds of the element', () => {
cy.visit('/')
cy.getBounds('#logo').then(bounds => {
console.log(bounds)
})
})
})上面的测试用例中，我们首先通过 cy.visit() 命令访问了首页，然后调用了自定义命令 cy.getBounds()，传递了选择器 #logo，并在 Promise.then() 方法中得到了选中元素的坐标和尺寸，并打印出了来。
组合命令
自定义命令与 Cypress 命令之间可以组合使用，例如，我们要实现一个自定义命令，该命令接受两个 CSS 选择器，分别获取它们的位置和尺寸，并计算它们的中心点坐标：
-- -------------------- ---- -------
--------------------------------- ----------- ---------- -- -
------ ------------------------------------ -- -
------ ------------------------------------ -- -
----- ------- - ------------- - ------------- - ------------ - -------------- - -
----- ------- - ------------ - -------------- - ----------- - --------------- - -
------ - -- -------- -- ------- -
--
--
--在该自定义命令的实现中，我们使用了 cy.getBounds() 命令来获取两个选择器对应元素的位置和尺寸，并在 Promise.then() 方法中进行了中心点坐标的计算，并返回了结果。例如，在下面的测试用例中，我们将两个按钮的中心点坐标计算出来，并模拟了一次鼠标单击事件：
describe('Click', () => {
it('should click the center point of the two elements', () => {
cy.visit('/')
cy.getCenter('#button1', '#button2').then(center => {
cy.get('body').click(center.x, center.y)
})
})
})上面的测试用例中，我们首先通过 cy.visit() 命令访问了首页，然后调用了自定义命令 cy.getCenter()，传递了两个选择器 #button1 和 #button2，并在 Promise.then() 方法中将两者中心点坐标计算出来，并用 cy.get() 命令获取了整个页面的 body 元素，并使用了 body.click() 方法模拟了一次鼠标单击事件。
结论
通过自定义 Cypress 命令，可以将多次重复的操作抽象成一个可复用的命令，提高代码的可读性和可维护性。自定义命令可以接受任意个数的参数并返回任意类型的结果，可以与普通 Cypress 命令和其他自定义命令进行组合使用，方便进行复杂的操作。上面的例子只是冰山一角，实际运用起来还有更多的能力和技巧等待我们去挖掘和探索。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670f7fde5f5512810264e878