在进行前端自动化测试过程中，验证码是一个常见的问题。由于验证码的生成是随机的，代码给出的验证码无法预测，因此传统的 UI 测试可能会失效。Cypress 测试框架提供了一个解决方案来处理验证码问题。在本文中，我们将介绍如何在 Cypress 测试中处理验证码问题。
什么是 Cypress
Cypress 是一个 JavaScript 编写的、基于 Electron 的端到端测试框架。它提供了友好的 API，让我们可以轻松地编写端到端测试。
Cypress 测试框架的主要特点：
- 它运行于同一个环境中，避免了执行测试用例时发生的问题。
- 拥有自己的测试运行器，能够让我们快速的发现问题。
- 拥有强大的调试工具，让我们可以轻松的调试我们的测试用例。
- 支持实时重载。如果我们改变了代码，它会自动更新测试。
- 支持自动重新启动浏览器，避免各种常见的无法调试的问题。
如何处理验证码问题
对于验证码问题，Cypress 提供了两种方式来处理：
方式一：手动输入验证码
Cypress 允许我们在测试中手动输入验证码。首先，我们需要在测试代码中使用 cy.pause() 命令暂停测试用例的执行，然后在页面上手动输入验证码，最后继续执行测试。
下面是一个示例测试用例：
-- -------------------- ---- ------- -------- ---- ---- --------- -- -- - -------------------------------------- ------------------------------------------------ ------------------------------------------- ----------------------------------- -- - ----------- -- ---- ----- ------------ - -------------- ----- --- ------- ------- ---- -- -- ------ ------ -------------------------------- -- ----- --- -------------------------------------- ---展开代码
我们可以在 Cypress 控制台中定义验证码，并将其输入到页面中。注意，在此使用 cy.pause() 命令会暂停所有测试用例的执行，并且当我们手动输入验证码并继续执行测试用例时，该执行将继续从最后一个命令后继续执行。
方式二：使用 cypress-plugin-snapshots 插件
Cypress 还提供了一个名为 cypress-plugin-snapshots 的插件，该插件创建了一个可重用的 DOM 快照，我们可以在测试中使用这个快照作为验证码。
首先，我们需要安装 cypress-plugin-snapshots 插件：
npm install -D cypress-plugin-snapshots
然后，在我们的测试用例中，我们可以使用 cy.getSnapshot() 命令生成验证码快照，再手动输入测试用例的其他字段。
-- -------------------- ---- ------- ------ - ---------------------------- - ---- --------------------------------- -------- ---- ---- --------- -- -- - -------------------------------------- ------------------------------------------------ ------------------------------------------- ----------------------------------- -- - -- ----------- ----------------------- ------- ----- --- -------------------------------------- ---展开代码
cy.getSnapshot() 命令中的 "Captcha Image" 是快照标识符，你可以使用任何你想要的标识符。
总结
以上是两种在 Cypress 测试中处理验证码问题的方法。使用 Cypress 进行自动化测试时，我们不必担心验证码问题。这些方法既保证了测试的可靠性，又减少了手动测试的工作量。希望本篇文章能帮助到需要处理验证码问题的开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645b5d67968c7c53b0db4f23
