在进行 Web 端自动化测试时，验证码的问题往往给我们带来很大的麻烦。因为验证码是一种防止机器恶意行为的机制，如果我们想要自动化测试通过，我们需要找到一种解决验证码问题的方法。在本文中，我们将学习如何使用 Cypress 处理验证码问题。
编写测试用例
在使用 Cypress 进行自动化测试之前，我们需要先编写一些测试用例。例如，我们有一个登录页面，这个页面有一个验证码：
-- -------------------- ---- ------- ------ ------ ------------------------------- ------ ----------- ------------- ---------------- ------ ------------------------------- ------ --------------- ------------- ---------------- ------ ----------------------------- ------ ----------- ------------ --------------- ---- ------------------ -------------- ------- ----------------------------- -------
这个登录页面有一个输入用户名和密码的表单，还有一个验证码输入框和一个验证码图片。我们使用 Cypress 来测试这个页面的表单提交功能：
-- -------------------- ---- -------
----------------- -- -- -
----------- --- ------ -- -- -
------------------
------------------------------------
------------------------------------
--------------------------------
-----------
---------------- ---------------------
---------------------------------------
-------------------------------------------------------- ----
--
--在这个测试用例中，我们使用了 Cypress 的 cy.get() 和 cy.type() 方法来输入用户名、密码和验证码。然后使用 cy.route() 方法来监听登录请求，确保它会被成功发送。最后，我们使用 cy.wait() 方法来等待对登录请求的响应，并验证响应的状态码。
但是，如果我们测试这个页面几次，我们很快就会发现，每次测试都会因为验证码而失败。因此，我们需要找到一种方法来解决验证码过程。
处理验证码
手动输入
最容易想到的解决方法是手动输入验证码。虽然这个方法的效率不高，但是它是最基本的方法。
假设我们在代码中添加了以下代码来手动输入验证码：
cy.get('#captcha').clear().then((captcha) => {
cy.task('typeCaptcha', '12345').then((captcha) => {
cy.get('#captcha').type(captcha)
})
})这个代码片段使用 cy.get() 方法来获取验证码输入框，并清空输入框。然后，它调用了 Cypress 的 cy.task() 方法来调用名为 typeCaptcha 的任务。这个任务会返回一个字符串，我们将它传递给 cy.get('#captcha') 的 type() 方法，从而实现自动填充验证码输入框的功能。
但是，我们需要在 Cypress 的配置文件中定义 typeCaptcha 任务。有两种方法可以完成这个任务。
方法 1: 使用 Node.js 脚本
第一种方法是使用一个 Node.js 脚本来解决这个问题。我们可以编写一个脚本来手动打开页面、查找验证码、输入验证码并返回验证码的值。然后，我们可以通过 cy.task() 方法来调用这个脚本。
下面是一个示例脚本：
-- -------------------- ---- -------
----- --------- - --------------------
-------------- - ----- ------------- -- -
----- ------- - ----- ------------------
----- -
---------------
--------------------------
-
--
----- ---- - ----- -----------------
----- -------------------
----- -------------- - ----- --------------------------------
----- --------------------------------
----- ------------ - ----- -----------------------------------
----- ---------------
------ ------------------------
-在这个脚本中，我们使用了 Puppeteer 库来自动打开页面、输入验证码并返回验证码的值。在测试用例中，我们可以通过以下方式来调用这个任务：
cy.task('typeCaptcha', '12345').then((captcha) => {
cy.get('#captcha').type(captcha)
})方法 2: 使用 Cypress 命令
第二种方法是使用 Cypress 命令来解决这个问题。我们可以通过 Cypress 命令来打开页面、输入验证码并返回验证码的值。在测试用例中，我们可以通过以下方式来调用这个命令：
-- -------------------- ---- -------
----------------------------------- ------------- -- -
--------------------------
---------------- -- -
-- -- --- -------
------ ---------------------------------- -
----- -----
--
--
--------------- -- -
----------------------------------------
--
--在这个代码中，我们使用了一个名为 typeCaptcha 的自定义 Cypress 命令。这个命令通过 Cypress 的 cy.request() 方法来获取验证码图片。然后，它使用一个名为 tesseract 的 OCR 库来识别验证码。最后，它将识别出的验证码输入到验证码输入框中。
绕过验证码
另一种处理验证码的方法是绕过验证码。这个方法可能会对网站的安全造成影响，因此我们需要慎重考虑。
使用 cookie
我们可以使用 cookie 来模拟登录，绕过验证码。假设我们在代码中添加了以下代码来获取登录的 cookie：
-- -------------------- ---- -------
----------------------------------------- -- -
-- -------- -
------------- -
-------- -
------- -----------------------------
-
--
- ---- -
------------------
------------------------------------
------------------------------------
---------------------------------------
--------------------------- --------
-------------
-
--在这个代码中，我们使用 cy.getCookie() 方法来查找名为 loginCookie 的 cookie。如果 cookie 存在，我们就用这个 cookie 来访问页面。否则，我们就登录网站，设置 cookie 并重新访问页面。
使用开发人员工具
我们可以使用开发人员工具来绕过验证码。在 Cypress 中，我们可以使用以下代码来打开 Chrome 开发人员工具：
cy.window().then((win) => {
const captchaElement = win.document.querySelector('#captcha')
captchaElement.setAttribute('autocomplete', 'off')
captchaElement.removeAttribute('data-validate')
})在这个代码中，我们使用 cy.window() 方法来获取 window 对象，并在开发人员工具中查找验证码输入框。然后，我们使用 setAttribute() 方法来添加 autocomplete 属性并将其设置为 off，这样自动填写工具就不会自动填充验证码输入框了。我们还使用 removeAttribute() 方法删除 data-validate 属性，这样表单就不会再验证验证码是否正确了。
结论
在本文中，我们学习了如何使用 Cypress 处理验证码问题。我们学习了手动输入验证码和绕过验证码的两种解决方法，并编写了示例代码来演示如何实现这些解决方法。我们还讨论了解决验证码问题时需要注意的安全问题，并提供了一些解决方案。我希望这篇文章对你的自动化测试工作有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6735993c0bc820c5824f5b8f