Puppeteer自动化中处理动态虚拟键盘点击：XPath与字符级输入策略

const puppeteer = require('puppeteer');

async function login(user, password) {
    let browser;
    try {
        // 1. 启动浏览器实例
        browser = await puppeteer.launch({ headless: false }); // 设置headless: false以便观察自动化过程
        const page = await browser.newPage();

        // 辅助函数：等待元素出现并点击
        // 这个函数封装了等待和点击的逻辑，提高了代码的可读性和复用性
        async function waitClick(selector, options = {}) {
            let btn;
            if (selector.startsWith('xpath/')) {
                // 如果选择器以'xpath/'开头，则使用XPath选择器
                const xpath = selector.substring(6); // 移除'xpath/'前缀
                await page.waitForXPath(xpath, options);
                const elements = await page.$x(xpath);
                if (elements.length === 0) {
                    throw new Error(`XPath selector "${xpath}" did not find any elements.`);
                }
                btn = elements[0]; // 获取第一个匹配的元素
            } else {
                // 否则使用CSS选择器
                btn = await page.waitForSelector(selector, options);
            }
            await btn.click();
        }

        const url = 'https://ebanking.cpa-bank.dz/customer/';

        // 2. 导航到登录页面并等待页面加载完成
        // waitUntil: 'networkidle2' 等待网络连接空闲，确保所有资源加载完毕
        await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });
        await page.waitForSelector('#form\:username'); // 等待用户名输入框出现

        // 3. 输入用户名
        await page.keyboard.type(user, { delay: 10 }); // 模拟键盘输入，增加delay更像人工操作

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

        // 5. 等待页面加载，并点击密码输入区域（如果需要）
        // 某些虚拟键盘需要先点击一个输入框才能激活
        await page.waitForSelector('body'); // 等待页面体加载
        await waitClick('#inputPassId'); // 点击密码输入区域

        // 6. 处理密码输入：字符级模拟点击虚拟键盘
        const passArr = [...password]; // 将密码字符串拆分为字符数组
        for (const char of passArr) {
            if (/[A-Z]/.test(char)) {
                // 如果是大写字母，需要先点击“Shift”键
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`);
                // 然后点击大写字母本身
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="${char}"]`);
                // 再次点击“Shift”键以解除大写状态（如果虚拟键盘有此逻辑）
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`);
            } else {
                // 对于小写字母、数字或特殊符号，直接点击对应的按键
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="${char}"]`);
            }
        }

        // 7. 点击显示密码按钮（如果存在且需要）
        // 示例中可能不需要，但如果页面有此功能，可以保留
        // await waitClick('#form\:showPasswordId a');

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

        // 登录成功后，可以添加进一步的验证逻辑
        console.log(`用户 ${user} 登录成功！`);

    } catch (error) {
        console.error('登录过程中发生错误:', error);
    } finally {
        // 9. 关闭浏览器实例
        if (browser) {
            await browser.close();
        }
    }
}

// 调用登录函数进行测试
(async () => {
    await login("96391281", "AadBaiudhw"); // 请替换为实际的用户名和密码
})();