Cypress 自动化测试：如何处理验证码
随着现代网络应用的发展，验证码已经成为了许多网站和应用程序中越来越普遍的验证机制。验证码有助于防止恶意攻击和自动化测试。但对于前端开发人员和测试人员来说，实现带有验证码的自动化测试也成为了一个挑战。
Cypress 是一种流行的自动化测试工具，可以轻松地测试现代 JavaScript 应用程序，并提供了对网络应用程序的 E2E 测试支持。在本文中，我们将详细介绍如何使用 Cypress 自动化测试处理验证码问题。
为什么处理验证码很困难？
验证码通常用来验证用户是否是人类，而不是自动化程序。验证码可以是图形验证码、语音验证码或短信验证码。无论哪种形式，盲目地自动化输入验证码是一种低效的方法，因为它需要人的干预。但是，人类的介入会降低测试的速度和精度，因此我们需要一种更好的解决方案。
如何处理验证码？
- 跳过验证码
第一种处理验证码的方法是跳过它。这种方法看起来很简单，但会导致一些测试问题，例如：
- 验证码可能是必填字段，因此跳过验证码可能会导致测试失败。
- 跳过验证码可能无法模拟用户实际的流程。
- 模拟验证码
第二种处理验证码的方法是模拟验证码，也就是通过代码构造和验证验证码。
例如，有一个网站在用户登录时使用图形验证码。我们可以使用 Cypress 自带的库 cy.task 来生成一个固定的验证码，并将它输入到登录页面中。
//commands.js
Cypress.Commands.add("login", ({ username, password }) => {
cy.task("generateCaptcha").then((captcha) => {
cy.visit("/login");
cy.get("#username").type(username);
cy.get("#password").type(password);
cy.get("#captcha").type(captcha);
cy.get("#login-btn").click();
});
});
//index.js
const captcha = "1234"; // 固定验证码
module.exports = (on, config) => {
on("task", {
generateCaptcha() {
return captcha;
},
});
};这段代码首先在 commands.js 中注册了一个 login 命令，然后使用 cy.task('generateCaptcha') 来调用 index.js 中的任务生成验证码。最后，我们使用 cy.get("#captcha").type(captcha) 将验证码输入到文本框中。
这种方法有其优点和缺点。由于我们使用的是固定验证码，因此测试可能不会涵盖验证过程的所有方面。如果我们想测试其他验证码，我们需要在 index.js 中添加更多的逻辑。此外，如果这种方法的实现不正确，它可能会导致测试不准确。
- 使用第三方库
第三种处理验证码的方法是使用第三方库。我们可以使用一些库来自动识别验证码。有些库的工作原理是模拟人眼观看文本，将图片中的文本转换为文本。这些库的优点是它们不会受到验证码更改的影响，并且它们通常比手动测试更准确。
例如，以下代码使用了一个叫做 tesseract.js 的库，它是一个 OCR 库，可以识别图像中的文本。
const Tesseract = require("tesseract.js");
const getCapchaText = async (path) => {
const imageData = await fs.promises.readFile(path);
const {
data: { text },
} = await Tesseract.recognize(imageData, "eng");
return text.replace(/[^0-9a-z]/gi, "");
};这里我们使用 Node.js 的 fs 模块读取输入的验证码图像，并使用 tesseract.js 库来识别文本。如果您的应用程序需要语音验证码或短信验证码，则需要使用其他库来处理它们。
结论
处理验证码是自动化测试中的一个重要问题。我们可以使用多种方法来处理验证码，包括跳过、模拟和使用第三方库。通过正确处理验证码，我们可以提高自动化测试的效率和准确性。使用 Cypress 自动化测试时，我们可以利用其强大的 API 和集成的第三方库来轻松处理验证码。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66fb6fc544713626015cddab