Playwright验证码处理的自动化策略与解决方案-程序员充电站

验证码（CAPTCHA）一直是自动化测试中最让人头疼的环节之一。每次碰到那些扭曲的文字、点选图片的挑战，自动化脚本就像撞上了一堵墙。我负责的电商项目最近就卡在了登录自动化这个环节——那个该死的滑动验证码让我们的回归测试屡屡失败。

经过几周的实战踩坑和方案对比，我总结出几种用Playwright处理验证码的可行方案。这些方案各有适用场景，没有绝对的“银弹”，但足够帮你绕过大多数验证码障碍。

方案一：最直接的方式——测试环境关闭验证码

如果你们公司有测试环境的管理权限，这是最干净利落的解决方案。

// 在测试环境中，通过修改配置或调用管理接口禁用验证码 asyncfunction disableCaptchaInTestEnv(page) { // 方式1：如果有管理后台接口 await page.goto('http://test-admin.example.com/features'); await page.click('#toggle-captcha'); // 方式2：通过设置测试用户白名单 await page.evaluate(() => { localStorage.setItem('bypass_captcha', 'true'); }); // 方式3：修改hosts或使用mock服务（需运维配合） console.log('验证码已在测试环境关闭'); }

优点：零成本，100%稳定，执行速度快。
缺点：仅限测试环境，生产环境模拟不了完整流程。

方案二：半自动方案——人工介入一次，重复使用凭证

对于无法关闭验证码但又不频繁变更的场景，这个方案很实用。

const fs = require('fs'); const path = require('path'); class CaptchaHandler { constructor() { this.tokenFile = path.join(__dirname, '.auth_token'); } async handleCaptcha(page) { // 检查是否有缓存的登录凭证 if (fs.existsSync(this.tokenFile)) { const token = fs.readFileSync(this.tokenFile, 'utf8'); awaitthis.useCachedToken(page, token); returntrue; } // 首次需要人工处理 console.log('请手动完成验证码验证...'); // Playwright会暂停，等待人工操作 await page.pause(); // 这是关键！手动完成后按回车继续 // 保存获取到的凭证（如cookie、token） const cookies = await page.context().cookies(); const authToken = cookies.find(c => c.name === 'auth_token'); if (authToken) { fs.writeFileSync(this.tokenFile, authToken.value); console.log('凭证已保存，后续测试将自动使用'); } returntrue; } async useCachedToken(page, token) { // 使用缓存的token设置cookie await page.context().addCookies([{ name: 'auth_token', value: token, domain: 'your-domain.com', path: '/' }]); // 刷新页面使cookie生效 await page.reload(); } } // 使用示例 const handler = new CaptchaHandler(); await handler.handleCaptcha(page); await page.goto('https://your-app.com/dashboard');

优点：平衡了自动化与可靠性，只需人工介入一次。
缺点：凭证过期后需要重新人工处理。

方案三：全自动方案——第三方OCR服务

当需要完全自动化且验证码不算太复杂时，可以考虑OCR方案。

const axios = require('axios'); const fs = require('fs'); asyncfunction solveCaptchaWithOCR(page) { // 1. 定位并截图验证码元素 const captchaElement = await page.$('.captcha-image'); const screenshotPath = 'captcha.png'; await captchaElement.screenshot({ path: screenshotPath }); // 2. 读取图片并编码为base64 const imageBuffer = fs.readFileSync(screenshotPath); const base64Image = imageBuffer.toString('base64'); try { // 3. 调用OCR API（这里以2Captcha为例，需注册获取API key） const apiKey = process.env.CAPTCHA_API_KEY; const response = await axios.post('https://2captcha.com/in.php', { key: apiKey, method: 'base64', body: base64Image, json: 1 }); const requestId = response.data.request; // 4. 轮询获取结果 let result = null; for (let i = 0; i < 30; i++) { await page.waitForTimeout(2000); const checkResponse = await axios.get( `https://2captcha.com/res.php?key=${apiKey}&action=get&id=${requestId}&json=1` ); if (checkResponse.data.status === 1) { result = checkResponse.data.request; break; } } if (!result) thrownewError('OCR识别超时'); // 5. 输入识别结果 await page.fill('#captcha-input', result); await page.click('#submit-btn'); returntrue; } catch (error) { console.error('OCR识别失败:', error.message); // 失败时保存截图供后续分析 fs.renameSync(screenshotPath, `failed_${Date.now()}.png`); returnfalse; } }

费用提示：2Captcha每1000次识别约$1-3，具体看复杂度。对于大型测试套件，这是笔不小的开销。

方案四：智能等待与重试机制

有时候验证码的出现是有条件的，可以通过优化测试逻辑来减少触发。

async function smartLogin(page, username, password) { const MAX_RETRIES = 3; for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) { try { await page.goto('https://example.com/login'); // 填写登录表单 await page.fill('#username', username); await page.fill('#password', password); // 检测验证码是否出现 const captchaVisible = await page.isVisible('.captcha-container'); if (captchaVisible) { console.log(`第${attempt}次尝试出现验证码，尝试绕过...`); // 尝试刷新验证码（有时新的验证码更简单） await page.click('.refresh-captcha'); await page.waitForTimeout(1000); // 这里可以集成上述的任一解决方案 // await solveCaptchaWithOCR(page); // 或者使用备用账号 if (attempt > 1) { await page.fill('#username', `${username}_backup`); } } // 提交登录 await page.click('#login-btn'); // 等待登录成功标志 await page.waitForSelector('.user-dashboard', { timeout: 5000 }); console.log('登录成功！'); returntrue; } catch (error) { console.log(`第${attempt}次登录尝试失败: ${error.message}`); if (attempt === MAX_RETRIES) { thrownewError(`登录失败，已重试${MAX_RETRIES}次`); } // 等待一段时间后重试 await page.waitForTimeout(2000); } } }

方案五：针对特定类型验证码的专项处理

滑动验证码处理

async function handleSlideCaptcha(page) { const slider = await page.$('.slider'); const sliderBox = await slider.boundingBox(); const target = await page.$('.slider-target'); const targetBox = await target.boundingBox(); // 计算需要滑动的距离 const slideDistance = targetBox.x - sliderBox.x; // 模拟人类滑动（先快后慢） await slider.hover(); await page.mouse.down(); // 分段滑动，模拟真实轨迹 const steps = 10; const stepDistance = slideDistance / steps; for (let i = 0; i < steps; i++) { // 越靠近目标越慢 const speed = 50 + Math.random() * 100 - i * 10; await page.mouse.move( sliderBox.x + stepDistance * (i + 1), sliderBox.y + (Math.random() * 10 - 5), // 加入微小垂直抖动 { steps: 1 } ); await page.waitForTimeout(speed); } await page.mouse.up(); }

点选文字验证码（简单版）

async function handleClickCaptcha(page) { // 获取需要点击的文字 const promptText = await page.$eval('.captcha-prompt', el => el.textContent); const wordsToClick = promptText.match(/点击【(.*?)】/)[1].split(''); // 获取所有可点击的文字元素 const charElements = await page.$$('.captcha-char'); for (const char of wordsToClick) { for (const element of charElements) { const text = await element.textContent(); if (text === char) { // 随机延迟后点击，模拟人类反应时间 await page.waitForTimeout(300 + Math.random() * 500); await element.click(); break; } } } }

最佳实践建议

根据我们项目的经验，我推荐以下策略：

分层处理策略：

// 策略优先级：禁用 > 缓存 > OCR > 重试 class CaptchaStrategy { async solve(page) { if (awaitthis.tryDisableCaptcha(page)) return; if (awaitthis.tryCachedToken(page)) return; if (awaitthis.tryOCR(page)) return; if (awaitthis.tryAlternativeAccount(page)) return; // 最后手段：标记测试失败并保存截图 awaitthis.saveDebugInfo(page); thrownewError('无法处理验证码'); } }

验证码监控：

// 记录验证码出现频率，用于优化测试策略 const captchaStats = { totalAttempts: 0, captchaShown: 0, successRate: 0, lastCaptchaTime: null };

环境感知配置：

// 根据环境选择不同策略 const CAPTCHA_CONFIG = { development: { strategy: 'disable' }, staging: { strategy: 'cached_token' }, production: { strategy: 'mixed', fallback: 'ocr' } };