在前端开发中，自动化测试已经成为了不可或缺的一部分。而 E2E 测试则是自动化测试中的重要环节之一。Cypress 是一个流行的 E2E 测试工具，它可以帮助我们快速地进行端到端的测试。但是，在进行 E2E 测试时，经常会遇到验证码输入的问题。本文将介绍如何使用 Cypress 解决验证码输入问题。
常见验证码类型
在 E2E 测试中，常见的验证码类型有以下几种：
- 图片验证码：需要用户输入图片中的文字或数字，通常用于防止机器人攻击。
- 短信验证码：需要用户输入手机收到的短信中的数字，通常用于验证用户身份。
- 邮箱验证码：需要用户输入邮箱收到的邮件中的数字，通常用于验证用户身份。
解决方案
对于图片验证码，我们可以使用第三方库 tesseract.js 进行文字识别。而对于短信验证码和邮箱验证码，我们则需要使用一些特殊的方法来解决。
短信验证码
对于短信验证码，我们可以使用 faker.js 库来生成随机的验证码。faker.js 是一个用于生成假数据的库，它可以生成各种类型的假数据，包括姓名、地址、电话号码、电子邮件等。而对于短信验证码，我们可以使用以下代码来生成一个随机的 4 位数字：
const faker = require('faker');
const code = faker.random.number({ min: 1000, max: 9999 });然后，我们可以将生成的验证码填入输入框中：
cy.get('#sms-code-input').type(code);邮箱验证码
对于邮箱验证码，我们可以使用 mailosaur 这样的服务来解决。mailosaur 是一个提供邮件测试服务的网站，它可以让我们创建一个临时的邮箱地址，并在该邮箱地址中接收邮件。我们可以使用以下代码来创建一个临时邮箱地址：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----------- - ----- -- -- -
----- ------- - -
------- -------
---- ---------------------------------------
-------- -
--------------- -------------------
--------- -------------------
---------------- ------ - - ------------------ --- --------------------------
-
--
------ --- ----------------- ------- -- -
---------------- ------- --------- ----- -- -
-- ------- -
--------------
- ---- -
----- ---- - -----------------
----------------------
-
---
---
--
----- ----- - ----- --------------然后，我们可以在测试过程中等待一段时间，以确保邮件已经发送到该邮箱地址：
cy.wait(5000);
最后，我们可以通过 mailosaur 的 API 来获取该邮箱地址中的邮件，并从中提取出验证码：
-- -------------------- ---- -------
----- --------- - ----- -- -- -
----- ------- - -
------- ------
---- ------------------------------------------------ ------ ---------------------
-------- -
--------- -------------------
---------------- ------ - - ------------------ --- --------------------------
-
--
------ --- ----------------- ------- -- -
---------------- ------- --------- ----- -- -
-- ------- -
--------------
- ---- -
----- ---- - -----------------
--------------------
-
---
---
--
----- ------ - ----- ------------
----- ---- - ---------------------------------最后，我们可以将提取出的验证码填入输入框中：
cy.get('#email-code-input').type(code);总结
在 E2E 测试中，验证码输入是一个常见的问题。对于图片验证码，我们可以使用文字识别库来解决；对于短信验证码，我们可以使用 faker.js 来生成随机的验证码；对于邮箱验证码，我们可以使用 mailosaur 这样的服务来解决。通过这些方法，我们可以轻松地解决验证码输入问题，从而更加高效地进行 E2E 测试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65607467d2f5e1655daa6ccb