随着 web 前端的愈发普及，对于前端测试的需求也越来越大。Cypress 可以认为是当前最受欢迎的前端自动化测试框架之一。然而，在实际开发过程中，很多测试场景都不是简单的单一操作，而需要多个操作配合完成。因此，本篇文章将介绍 Cypress 在多配合场景下的用法，希望能够对大家有所帮助。

场景

在前端自动化测试中，我们经常会遇到需要多个操作配合完成的场景。例如：

• 在一个表单页面中，需要填写多个表单项后才能点击提交按钮；
• 在一个商品展示页面中，需要滚动页面，才能查看更多商品信息；
• 在一个使用分页器的页面中，需要多次点击“下一页”按钮才能查看所有的内容。

这种情况下我们该如何用 Cypress 进行测试呢？

解决方案

waitFor

Cypress 提供了一个 waitFor 命令，可以等待指定的元素出现或者消失、属性发生变化等事件的发生后再执行后续操作。用法如下：

// 等待 h1 元素出现
cy.get('h1').wait(1000)

上面的代码会等待 1 秒钟，直到页面中有 h1 元素后才会继续执行后续操作。

then

waitFor 命令返回的是一个 Promise，可以通过 then 方法链式调用后续操作。例如：

cy.get('#username').type('test')
  .get('#password').type('123456')
  .get('#login-button').wait(1000).then(() => {
    cy.get('#login-button').click()
  })

上面的代码会先输入用户名和密码，然后等待 1 秒钟，等到“登录”按钮出现后再进行点击操作。

expect

Cypress 还提供了 expect 断言，可以判断页面中的元素是否符合预期，以及元素的属性是否符合要求，等等。例如：

cy.get('.pagination').within(() => {
  cy.get('.next').click()
    .get('.current-page').then(($el) => {
      const currentPage = parseInt($el.text())
      expect(currentPage).to.eq(2)
    })
})

上面的代码会先找到一个带有分页器的元素，然后模拟点击 next 按钮，最后判断页面是否跳转到了第二页。

总结

通过上面的介绍，我们可以看到 Cypress 处理多配合场景的方式非常灵活，可以通过 waitFor 命令、then 方法和 expect 断言来解决各种测试场景。在实际开发中，我们需要结合具体的业务需求，选择相应的测试方式，并保证测试代码的可维护性和可读性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6533c48c7d4982a6eb75b3aa