在前端开发中，测试是一个不可或缺的环节。但是在带验证码的页面中，测试变得更加困难，因为验证码的识别需要人类的操作。在这篇文章中，我们将介绍使用 Cypress 测试带验证码页面的技巧。
前置知识
在开始本文之前，你需要对以下知识有一定的了解：
- 基本的 Cypress 使用
- 如何与
window对象进行交互 - 如何使用
cy.wait()和cy.clock()等 Cypress API
挑战：测试带验证码页面
在很多网站中，验证码是一个常见的安全措施。当用户登录或者执行其他敏感操作时，他们需要在表单中输入验证码。这意味着测试带验证码页面需要我们能够自动化输入验证码。
让我们以一个实际的示例为例。我们将测试一个登录页面，该页面需要输入用户名、密码和验证码才能登录。验证码是一个 4 位数字，随机生成并显示在页面上。
-- -------------------- ---- ------- -------------- - --- - -------------- - -- - -------------- - --- - - ---- - -------------- - - - ---- - --------------
测试的要求是：
- 输入正确的用户名和密码，以便让登录过程成功
- 在测试过程中，在验证码输入框中输入正确的验证码
- 测试应该避免在手动输入验证码的情况下手动进行测试
- 测试应该尽可能地自动化
解决方案
对于这个测试挑战，我们将提供以下解决方案：
- 确定验证码的值并自动输入
- 避免在测试过程中手动进行验证码操作
1. 确定验证码的值并自动输入
首先，我们需要确定生成验证码的代码，并在测试中使用它。在我们的示例中，生成验证码的代码如下所示：
const getRandomVerificationCode = () => {
const min = 1000;
const max = 9999;
return Math.floor(Math.random() * (max - min + 1)) + min;
};这是一个返回 4 位随机数字的函数。
在 Cypress 中，我们可以通过 cy.window() 访问全局的 window 对象，并调用生成验证码的函数。
// 确定验证码的值并自动输入
cy.window().then((win) => {
const code = win.getRandomVerificationCode(); // 获取验证码
cy.get('input[name="verification-code"]').type(code); // 输入验证码
});在这个代码片段中，我们首先获取验证码值，然后将其输入到验证码输入框中。这意味着我们需要知道验证码输入框的选择器，例如 input[name="verification-code"]。
2. 避免在测试过程中手动进行验证码操作
为了避免在测试过程中手动进行验证码操作，我们需要模拟验证码输入的等待时间。在一般情况下，验证码会在页面加载完成后随机生成，因此我们可以在 Cypress 中使用 cy.wait()。
// 等待验证码生成 cy.wait(5000);
但是，如果验证码的生成速度很快，等待时间太短，则可能无法捕获到验证码。
另一个解决方案是使用 cy.clock() 和 setTimeout()。这个方案需要指定一个等待时间，并将 setTimeout() 与 Date.now() 和 cy.tick() 一起使用。
cy.clock(); // 初始化计时器
// 在测试过程中等待验证码生成
const waitTime = 5000; // 五秒
setTimeout(() => {
cy.tick(waitTime);
}, waitTime);使用 Cypress 时，我们需要在测试代码开始之前初始化计时器（使用 cy.clock()），将当前的等待时间存储在一个变量中，并在 setTimeout() 中使用 cy.tick()。
当计时器到达等待时间时，Cypress 将执行 cy.tick()，该函数将更新从开始计时器设置的 Webpack 时间。
通过这种方式，我们可以在测试过程中等待验证码的生成，并自动输入。
示例代码
以下是完整的示例代码，包括生成验证码的代码、确定选择器的代码和等待验证码生成并自动输入的代码。
-- -------------------- ---- -------
--------------------- -- -- -
------------- -- -
-- ------ --------
-- -------------------------
-------------------
--------------------------------------------------
--------------------------------------------------
---
---------- -- -- -
-- -------
----------- -- ------
----- -------- - ----- -- ---
------------- -- -
------------------
---------------------- -- -
----- ---- - -------------------------------- -- -----
----------------------------------------------------- -- -----
---
---------------------------------------- -- ------
-- ----------
---
---结论
在带验证码的页面中，测试是一项具有挑战性的任务。在本文中，我们介绍了使用 Cypress 测试带验证码页面的技巧。我们解释了如何确定验证码的值并自动输入，以及如何避免在测试过程中手动输入验证码。我们的解决方案最终提供了一种自动化测试的方法，可以在避免人为干预的情况下测试带验证码页面的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771f5056d66e0f9aad32af9