在前端开发中，e2e 测试是必不可少的一环。Cypress 是一个非常好用的 e2e 测试框架，它提供了丰富的 API 和友好的命令行界面，可以轻松地进行测试用例的编写和执行。但是，在实际测试过程中，我们经常会遇到列表数据动态变化的情况，这时就需要特殊的处理方法。
问题描述
假设我们有一个页面，其中有一个列表，列表中的数据是通过 AJAX 请求获取的。我们要进行 e2e 测试，验证列表中的数据是否正确。但是，由于数据是异步加载的，我们无法预知加载完成的时间，也无法预知数据的具体内容。这就给测试带来了一定的困难。
解决方法
针对上述问题，我们可以采用以下两种方法进行解决。
方法一：使用 cy.wait 命令
cy.wait 命令可以让测试等待一段时间，直到指定的条件满足为止。我们可以使用它来等待数据加载完成，然后再进行断言。
cy.visit('/list')
cy.wait(1000) // 等待 1 秒钟，让列表数据加载完成
cy.get('.list-item').should('have.length', 10) // 断言列表中有 10 个项这种方法的缺点是，等待时间是固定的，如果数据加载时间超过了设定的时间，测试就会失败。而且，如果列表数据的数量不确定，我们就无法准确地指定等待时间。
方法二：使用 cy.intercept 命令
cy.intercept 命令可以拦截 AJAX 请求，并对其进行处理。我们可以使用它来获取列表数据，然后再进行断言。
-- -------------------- ---- -------
-----------------
------------------------- ----- -- -
-----------
----- -
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- -- ----- ----- -- --
- --- --- ----- ----- --- -
-
--
--
------------------------------------------ --- -- ------ -- --这种方法的优点是，我们可以完全控制列表数据的内容，并且不需要等待时间，测试的速度更快。缺点是，需要手动编写 AJAX 请求的拦截器，比较繁琐。
总结
在 e2e 测试中，遇到列表数据动态变化的情况，我们可以使用 cy.wait 或 cy.intercept 命令进行处理。其中，cy.wait 命令简单易用，但是等待时间不确定，容易出错；cy.intercept 命令可以完全控制列表数据的内容，但是需要手动编写拦截器，比较繁琐。在实际测试中，我们应该根据具体情况选择合适的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660f989fd10417a22202c833