如何使用Cypress处理动态captcha取值并填入对应复选框

动态生成的DOM类验证码不需要写死固定值，直接在运行时从展示元素提取文本再传入目标输入框即可，具体实现如下：

基础实现代码 #

先定位验证码展示的DOM元素，调用Cypress的invoke方法取元素内的文本，处理掉多余字符后填入目标输入框：

// 替换成你页面中验证码展示区域的实际选择器
cy.get('.captcha-show-area')
  // 等待验证码加载完成，确保元素内有有效文本
  .should('not.be.empty')
  .invoke('text')
  .then(originText => {
    // 文本清洗：去除首尾空格、换行，过滤无关提示内容
    // 示例中正则匹配4-6位字母数字组合的验证码，可根据你的验证码规则调整
    const captchaVal = originText.trim().match(/[A-Za-z0-9]{4,6}/)?.[0]
    // 替换成你页面中验证码输入框的实际选择器
    cy.get('.captcha-input').type(captchaVal)
  })

常见场景适配注意事项 #

• 如果验证码是Canvas渲染的图形（不是直接写在DOM里的文本），不要尝试硬识别，优先找开发配合加测试专用钩子：比如测试环境下把验证码值挂到window全局变量上，直接通过cy.window()取值即可，用例稳定性最高。
• 如果提取的文本混有提示文案（比如“验证码：aB3d 请输入右侧内容”），一定要用正则或者字符串截取把真正的验证码值筛出来，不要把整段文本输入进去。
• 生产环境带干扰线、扭曲变形的验证码不建议做UI自动化校验，这类场景要么在测试环境关闭验证码功能，要么配置测试账号白名单直接绕过验证码校验，避免OCR识别误差导致用例随机失败。

内容的提问来源于stack exchange，提问作者Lucky Yadav