使用JavaScript和Selenium WebDriver实现验证码识别登录详解

一、准备工作
安装Node.js。
安装Selenium WebDriver和Tesseract.js的依赖包。
使用npm安装所需依赖：

sh

npm install selenium-webdriver
npm install tesseract.js
npm install fs-extra
二、打开网站并设置浏览器窗口
首先，打开浏览器并将窗口最大化，以确保每次截取的图片都是相同的大小：

javascript

const {Builder} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

(async function openBrowser() {
    let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options().headless()).build();
    await driver.get('https://www.example.com');
    await driver.manage().window().maximize();
})();
三、截取带有验证码的网页内容
截取当前屏幕内容，并保存到本地：

javascript

const {Builder, By} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs-extra');

(async function captureScreenshot() {
    let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options().headless()).build();
    await driver.get('https://www.example.com');
    await driver.manage().window().maximize();

    let screenshot = await driver.takeScreenshot();
    await fs.writeFile('H:/test/01.png', screenshot, 'base64');
})();
四、识别图片验证码
使用 Tesseract.js 识别图片验证码
定位验证码在图片中的位置并截取：
javascript

const {Builder, By} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs-extra');
const Jimp = require('jimp');
const Tesseract = require('tesseract.js');

(async function recognizeCaptcha() {
    let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options().headless()).build();
    await driver.get('https://www.example.com');
    await driver.manage().window().maximize();

    let screenshot = await driver.takeScreenshot();
    await fs.writeFile('H:/test/01.png', screenshot, 'base64');

    // 读取完整截图并裁剪验证码区域
    const fullImg = await Jimp.read('H:/test/01.png');
    const captchaImg = fullImg.crop(564, 395, 79, 28); // 验证码位置
    await captchaImg.write('H:/test/02.png');

    // 使用Tesseract.js识别验证码
    Tesseract.recognize('H:/test/02.png', 'eng', {
        logger: m => console.log(m)
    }).then(({data: {text}}) => {
        console.log('Captcha:', text.trim());
    });
})();
五、输入账号、密码和验证码
定位账号、密码和验证码输入框，并输入相关内容：

javascript
const {Builder, By} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs-extra');
const Jimp = require('jimp');
const Tesseract = require('tesseract.js');

(async function fillForm() {
    let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options().headless()).build();
    await driver.get('https://www.example.com');
    await driver.manage().window().maximize();

    let screenshot = await driver.takeScreenshot();
    await fs.writeFile('H:/test/01.png', screenshot, 'base64');

    const fullImg = await Jimp.read('H:/test/01.png');
    const captchaImg = fullImg.crop(564, 395, 79, 28); // 验证码位置
    await captchaImg.write('H:/test/02.png');

    Tesseract.recognize('H:/test/02.png', 'eng', {
        logger: m => console.log(m)
    }).then(async ({data: {text}}) => {
        console.log('Captcha:', text.trim());

        let username = await driver.findElement(By.id('username'));
        let password = await driver.findElement(By.id('password_1'));
        let captcha = await driver.findElement(By.id('user_ck'));

        await username.sendKeys('your_username');
        await password.sendKeys('your_password');
        await captcha.sendKeys(text.trim());
    });
})();
六、点击登录按钮
定位并点击登录按钮：

javascript

const {Builder, By} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs-extra');
const Jimp = require('jimp');
const Tesseract = require('tesseract.js');

(async function login() {
    let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options().headless()).build();
    await driver.get('https://www.example.com');
    await driver.manage().window().maximize();

    let screenshot = await driver.takeScreenshot();
    await fs.writeFile('H:/test/01.png', screenshot, 'base64');

    const fullImg = await Jimp.read('H:/test/01.png');
    const captchaImg = fullImg.crop(564, 395, 79, 28); // 验证码位置
    await captchaImg.write('H:/test/02.png');

    Tesseract.recognize('H:/test/02.png', 'eng', {
        logger: m => console.log(m)
    }).then(async ({data: {text}}) => {
        console.log('Captcha:', text.trim());

        let username = await driver.findElement(By.id('username'));
        let password = await driver.findElement(By.id('password_1'));
        let captcha = await driver.findElement(By.id('user_ck'));

        await username.sendKeys('your_username');
        await password.sendKeys('your_password');
        await captcha.sendKeys(text.trim());

        let loginButton = await driver.findElement(By.name('yt0'));
        await loginButton.click();

        await driver.quit();
    });
})();
七、关闭浏览器
最后，关闭浏览器：

javascript

const {Builder, By} = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');
const fs = require('fs-extra');
const Jimp = require('jimp');
const Tesseract = require('tesseract.js');

(async function loginAndClose() {
    let driver = await new Builder().forBrowser('chrome').setChromeOptions(new chrome.Options().headless()).build();
    await driver.get('https://www.example.com');
    await driver.manage().window().maximize();

    let screenshot = await driver.takeScreenshot();
    await fs.writeFile('H:/test/01.png', screenshot, 'base64');

    const fullImg = await Jimp.read('H:/test/01.png');
    const captchaImg = fullImg.crop(564, 395, 79, 28); // 验证码位置
    await captchaImg.write('H:/test/02.png');

    Tesseract.recognize('H:/test/02.png', 'eng', {
        logger: m => console.log(m)
    }).then(async ({data: {text}}) => {
        console.log('Captcha:', text.trim());

        let username = await driver.findElement(By.id('username'));
        let password = await driver.findElement(By.id('password_1'));
        let captcha = await driver.findElement(By.id('user_ck'));

        await username.sendKeys('your_username');
        await password.sendKeys('your_password');
        await captcha.sendKeys(text.trim());

        let loginButton = await driver.findElement(By.name('yt0'));
        await loginButton.click();

        await driver.quit();
    });
})();