Puppeteer自动化：处理动态密码键盘点击与XPath策略

const puppeteer = require('puppeteer');

// 辅助函数：等待元素出现并点击
async function waitClick(page, selector, isXPath = false) {
    let btn;
    if (isXPath) {
        // 使用page.waitForXPath等待XPath元素
        btn = await page.waitForXPath(selector, { visible: true, timeout: 5000 });
        // Puppeteer的XPath结果是ElementHandle数组，需要取第一个
        await btn.click();
    } else {
        // 使用page.waitForSelector等待CSS选择器元素
        btn = await page.waitForSelector(selector, { visible: true, timeout: 5000 });
        await btn.click();
    }
}

const puppeteer = require('puppeteer');

// 辅助函数：等待元素出现并点击
async function waitClick(page, selector, isXPath = false) {
    let elementHandle;
    try {
        if (isXPath) {
            // 使用page.waitForXPath等待XPath元素，并确保可见
            const elements = await page.waitForXPath(selector, { visible: true, timeout: 10000 });
            // 如果XPath返回多个元素，通常我们希望点击第一个匹配项
            if (Array.isArray(elements) && elements.length > 0) {
                elementHandle = elements[0];
            } else {
                throw new Error(`XPath selector "${selector}" did not find any visible elements.`);
            }
        } else {
            // 使用page.waitForSelector等待CSS选择器元素，并确保可见
            elementHandle = await page.waitForSelector(selector, { visible: true, timeout: 10000 });
        }
        await elementHandle.click();
    } catch (error) {
        console.error(`Error clicking element with selector "${selector}" (isXPath: ${isXPath}):`, error);
        throw error; // 重新抛出错误以便上层捕获
    }
}

async function login(user, password) {
    let browser;
    try {
        browser = await puppeteer.launch({ headless: false, defaultViewport: null }); // 设置headless: false便于观察，defaultViewport: null防止默认视口裁剪
        const page = await browser.newPage();

        const url = 'https://ebanking.cpa-bank.dz/customer/';
        await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 }); // 等待网络空闲，确保页面完全加载

        // 1. 输入用户名
        await page.waitForSelector('#form\:username', { visible: true }); // 等待用户名输入框出现
        await page.type('#form\:username', user, { delay: 50 }); // 模拟人类输入，增加延迟

        // 2. 点击“下一步”或提交按钮
        await waitClick(page, '#form\:submit');

        // 3. 等待密码键盘区域加载
        await page.waitForSelector('body', { visible: true }); // 等待页面体加载完毕
        await waitClick(page, '#inputPassId'); // 点击密码输入区域，激活键盘

        // 4. 处理密码输入
        const passArr = [...password]; // 将密码字符串拆分为字符数组
        for (const char of passArr) {
            if (/[A-Z]/.test(char)) { // 如果字符是大写字母
                // 模拟按下Shift键
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`, true);
                // 点击大写字母
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="${char}"]`, true);
                // 模拟释放Shift键
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`, true);
            } else {
                // 点击普通字符
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="${char}"]`, true);
            }
        }

        // 5. 点击登录按钮 (根据实际页面调整选择器)
        // 示例中有一个显示密码的按钮，可能不需要点击，直接点击登录
        // await waitClick(page, '#form\:showPasswordId a'); // 如果有显示密码按钮，可能需要点击或跳过

        await waitClick(page, '#form\:loginButton'); // 点击最终的登录按钮

        console.log('登录流程执行完毕。');

        // 可以在这里添加一些断言来验证登录是否成功
        // 例如：await page.waitForSelector('.dashboard-element');

    } catch (error) {
        console.error('登录过程中发生错误:', error);
        throw error; // 重新抛出错误，方便外部调用者处理
    } finally {
        if (browser) {
            // await browser.close(); // 登录成功或失败后关闭浏览器
        }
    }
}

// 执行登录函数
(async () => {
    try {
        await login("96391281", "AadBaiudhw");
    } catch (error) {
        console.error('主程序捕获到错误:', error);
    }
})();