CAPTCHA Login Assistant

Overview

This skill automates the login process for web systems requiring CAPTCHA verification. It uses Chrome DevTools MCP to capture login page screenshots, employs AI vision to recognize CAPTCHA codes, automatically fills in account credentials and CAPTCHA, and completes the login operation.

Applicable Scenarios

- Web system logins requiring CAPTCHA verification
Login scenarios with short CAPTCHA validity periods
Situations requiring rapid consecutive login operations

Core Workflow

1. Preparation

Ensure the following tools are available:

- Chrome DevTools MCP service
Target login page URL
Valid account credentials (username and password)

2. Login Steps

Step 1: Refresh Page to Get New CAPTCHA

CODEBLOCK0

Step 2: Capture Login Page Screenshot

CODEBLOCK1

Step 3: Recognize CAPTCHA

- View the CAPTCHA image in the screenshot
CAPTCHA is usually located to the right of the "Enter CAPTCHA" input field
Carefully identify CAPTCHA characters (note case sensitivity)

Step 4: Quickly Fill Form

CODEBLOCK2

Step 5: Click Login Button

CODEBLOCK3

Step 6: Verify Login Result

CODEBLOCK4

Key Insights

CAPTCHA Recognition Tips

1. Clear Screenshot - Ensure CAPTCHA image is clearly visible within screenshot bounds
Time Sensitivity - CAPTCHA typically has short validity (1-3 seconds), fill immediately after recognition
Careful Identification - Distinguish similar characters (e.g., 0 vs O, 1 vs l, 5 vs S)
Case Sensitivity - CAPTCHA is usually case-sensitive

Common Issues

CAPTCHA Verification Failed

- Cause: CAPTCHA has expired
Solution: Immediately recapture screenshot, recognize new CAPTCHA, and resubmit

Page Element Not Found

- Cause: Page not fully loaded or element ID changed
Solution: Get page snapshot first to confirm element existence

Redirected Back to Login After Login

- Cause: Session expired or token invalid
Solution: Re-execute complete login workflow

Best Practices

1. Parallel Processing - Screenshot capture and form preparation can be done in parallel
Quick Response - Fill form immediately after CAPTCHA recognition to minimize expiration risk
Use JavaScript - Direct DOM manipulation is faster than fill tools
Verify Results - Check page content after login to confirm success

Examples

Example 1: Standard Login Workflow

CODEBLOCK5

Example 2: CAPTCHA Expiration Retry

CODEBLOCK6

Important Notes

1. Security - Do not log passwords in logs
Privacy - Handle screenshots containing sensitive information appropriately
Rate Limiting - Be aware of system login rate limits to avoid triggering security mechanisms
CAPTCHA Complexity - For complex CAPTCHAs (distorted, with interference lines), multiple attempts may be needed

Troubleshooting

Issue	Possible Cause	Solution
Empty CAPTCHA recognition	Screenshot doesn't include CAPTCHA	Adjust screenshot bounds
Login button not found

验证码登录助手

概述

该技能可自动完成需要验证码验证的Web系统登录流程。它利用Chrome DevTools MCP捕获登录页面截图，借助AI视觉识别验证码，自动填写账号凭证和验证码，并完成登录操作。

适用场景

- 需要验证码验证的Web系统登录
验证码有效期较短的登录场景
需要快速连续执行登录操作的情况

核心工作流程

1. 准备工作

确保以下工具可用：

- Chrome DevTools MCP服务
目标登录页面URL
有效的账号凭证（用户名和密码）

2. 登录步骤

步骤1：刷新页面获取新验证码

javascript // 导航至登录页面并刷新 mcpchrome-devtools-mcpnavigate_page({ type: reload })

步骤2：捕获登录页面截图

javascript // 捕获当前页面视口 mcpchrome-devtools-mcptake_screenshot({ filePath: path/to/login_screenshot.png })

步骤3：识别验证码

- 查看截图中的验证码图片
验证码通常位于请输入验证码输入框右侧
仔细识别验证码字符（注意大小写）

步骤4：快速填写表单

javascript // 使用JavaScript同时填写所有字段 mcpchrome-devtools-mcpevaluate_script({ function: () => {\n const username = document.querySelector(input[name=\username\]);\n const password = document.querySelector(input[name=\password\]);\n const verifyCode = document.querySelector(input[name=\verifyCode\]);\n \n if (username) {\n username.value = yourusername;\n username.dispatchEvent(new Event(input, { bubbles: true }));\n }\n if (password) {\n password.value = yourpassword;\n password.dispatchEvent(new Event(input, { bubbles: true }));\n }\n if (verifyCode) {\n verifyCode.value = recognized_captcha;\n verifyCode.dispatchEvent(new Event(input, { bubbles: true }));\n }\n return filled;\n } })

步骤5：点击登录按钮

javascript // 点击登录按钮 mcpchrome-devtools-mcpevaluate_script({ function: () => {\n const loginBtn = document.querySelector(button[type=\submit\]) || document.querySelector(button);\n if (loginBtn) {\n loginBtn.click();\n return loginclicked;\n }\n return buttonnot_found;\n } })

步骤6：验证登录结果

javascript // 等待登录后页面元素 mcpchrome-devtools-mcpwait_for({ text: [首页, 仪表盘, 系统, 退出], timeout: 5000 })

关键要点

验证码识别技巧

1. 清晰截图 - 确保验证码图片在截图范围内清晰可见
时效性 - 验证码通常有效期较短（1-3秒），识别后立即填写
仔细辨别 - 区分相似字符（如0与O、1与l、5与S）
大小写敏感 - 验证码通常区分大小写

常见问题

验证码验证失败

- 原因：验证码已过期
解决方案：立即重新截图，识别新验证码并重新提交

页面元素未找到

- 原因：页面未完全加载或元素ID已更改
解决方案：先获取页面快照确认元素是否存在

登录后跳转回登录页

- 原因：会话过期或令牌无效
解决方案：重新执行完整登录流程

最佳实践

1. 并行处理 - 截图捕获和表单准备可并行进行
快速响应 - 验证码识别后立即填写表单，降低过期风险
使用JavaScript - 直接操作DOM比使用填充工具更快
验证结果 - 登录后检查页面内容确认成功

示例

示例1：标准登录流程

用户：帮我登录系统 http://example.com/login，用户名admin，密码123456

执行步骤：

1. 导航至登录页面
截图获取验证码
识别验证码为Ab3d
使用JavaScript填写用户名、密码和验证码
点击登录按钮
验证登录成功

示例2：验证码过期重试

如果登录失败显示验证码验证失败：

1. 立即重新截图
识别新验证码
重新填写并提交
必要时多次重试

重要提示

1. 安全性 - 不要在日志中记录密码
隐私性 - 妥善处理包含敏感信息的截图
频率限制 - 注意系统登录频率限制，避免触发安全机制
验证码复杂度 - 对于复杂验证码（扭曲、有干扰线），可能需要多次尝试

故障排除

问题	可能原因	解决方案
验证码识别为空	截图未包含验证码	调整截图范围
登录按钮未找到

captcha-login-assistant" 验证码登录助手