解决 Puppeteer 模拟点击虚拟键盘按钮的挑战-js教程-PHP中文网

解决 puppeteer 模拟点击虚拟键盘按钮的挑战

本文旨在解决使用 Puppeteer 自动化操作时，点击网页虚拟键盘按钮可能遇到的“Node is either not clickable or not an HTMLElement”错误。文章将深入探讨传统点击方式的局限性，并提供一种基于 XPath 精确选择和字符级处理的鲁棒解决方案，尤其适用于处理区分大小写的密码输入场景，确保自动化流程的稳定性和可靠性。

1. 理解 Puppeteer 点击操作的常见挑战

在使用 Puppeteer 自动化网页交互时，模拟点击是核心操作之一。然而，在处理一些复杂的动态用户界面（UI），尤其是虚拟键盘或密码输入面板时，开发者可能会遇到“Node is either not clickable or not an HTMLElement”的错误。这个错误通常发生在尝试对一个通过 page.$ 或 page.$$ 获取到的元素句柄（ElementHandle）直接调用 click() 方法时。

导致此问题的原因可能包括：

元素未完全加载或渲染： 尽管元素可能已存在于 DOM 中，但其可能尚未完全可见、可交互，或者被其他元素遮挡。
元素句柄的上下文问题： ElementHandle.click() 方法的执行环境可能与 page.click(selector) 有所不同，后者通常会包含隐式的等待和可点击性检查。
动态内容更新： 虚拟键盘的布局或元素属性可能在页面加载后动态变化，导致通过初始选择器获取的句柄失效或指向错误。
非标准可点击元素： 某些自定义的 UI 组件可能不是标准的 HTML 按钮或链接，其点击事件处理方式较为特殊。

在虚拟键盘场景中，尤其常见的问题是，通过遍历获取所有按钮并尝试根据其 textContent 来点击时，容易因为元素状态、异步渲染或不准确的元素句柄而失败。

2. 解决方案：XPath 精准定位与字符级处理

针对上述挑战，一种更为健壮的策略是结合使用 XPath 进行精准元素定位，并采用字符级处理方式来模拟密码输入。

2.1 为什么选择 XPath？

CSS 选择器在大多数情况下非常高效，但当我们需要根据元素的文本内容来定位时，XPath 展现出其独特的优势。对于虚拟键盘，每个按键上的字符（如数字、字母、Shift 键）是其最直接的标识。XPath 允许我们构建选择器，同时考虑元素的类名和其内部文本，例如：//button[contains(@class,"keypad-key") and text()="a"] 可以精确选择一个同时具有 keypad-key 类且文本内容为 "a" 的按钮。

2.2 字符级密码输入策略

传统的密码输入方式是直接 page.type() 到输入框，但这不适用于虚拟键盘。我们需要模拟用户逐个点击键盘上的字符。

百度虚拟主播

百度智能云平台的一站式、灵活化的虚拟主播直播解决方案

查看详情

分解密码： 将密码字符串分解为单个字符的数组。
遍历字符： 针对密码中的每个字符进行迭代。
动态 XPath 定位： 根据当前字符动态生成 XPath，定位到对应的虚拟键盘按钮。
处理大小写： 对于包含大写字母的密码，需要模拟用户按下“Shift”键的行为。这通常意味着在点击大写字母之前点击一次“Shift”键，并在点击完大写字母之后再点击一次“Shift”键（以释放 Shift 状态，使其恢复到小写模式）。

3. 示例代码与详细解析

以下是一个基于 Puppeteer 实现虚拟键盘密码输入的完整示例，解决了上述问题：

const puppeteer = require('puppeteer');

(async () => {
    let browser; // 声明 browser 变量以便在 finally 块中关闭

    /**
     * 辅助函数：等待元素出现并点击
     * 增强点击操作的鲁棒性
     * @param {puppeteer.Page} page - Puppeteer 页面实例
     * @param {string} selector - CSS 选择器或 XPath 选择器 (以 "xpath/" 开头)
     */
    async function waitClick(page, selector) {
        // 判断选择器类型，如果是 XPath 则使用 page.waitForXPath
        const element = selector.startsWith('xpath/')
            ? await page.waitForXPath(selector.substring(6)) // 移除 "xpath/" 前缀
            : await page.waitForSelector(selector);

        // 如果是 XPath 找到的元素，page.waitForXPath 返回的是 ElementHandle 数组
        // 这里假设只有一个匹配元素，取第一个
        if (Array.isArray(element)) {
            await element[0].click();
        } else {
            await element.click();
        }
    }

    /**
     * 模拟登录函数
     * @param {string} user - 用户名
     * @param {string} password - 密码
     */
    async function login(user, password) {
        browser = await puppeteer.launch({ headless: false, defaultViewport: null }); // 设置 headless: false 可视化操作
        const page = await browser.newPage();

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

        // 导航到登录页面，等待网络空闲
        await page.goto(url, { waitUntil: 'networkidle2', timeout: 30000 });

        // 等待用户名输入框出现
        await page.waitForSelector('#form\:username'); 

        // 输入用户名
        await page.keyboard.type(user, { delay: 10 });

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

        // 等待页面加载，确保虚拟键盘可见
        await page.waitForSelector('body'); 

        // 点击密码输入区域，确保虚拟键盘激活（如果需要）
        await waitClick(page, '#inputPassId'); 

        // 将密码分解为字符数组
        const passArr = [...password]; 

        // 遍历密码字符，模拟点击虚拟键盘
        for (const el of passArr) {             
            if (/[A-Z]/.test(el)) { // 如果是大写字母
                // 点击 Shift 键 (按下)
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`);
                // 点击当前大写字母
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="${el}"]`);
                // 再次点击 Shift 键 (释放)
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`);
            } else {
                // 点击普通字符
                await waitClick(page, "xpath/" + `//button[contains(@class,"keypad-key") and text()="${el}"]`);
            }            
        }

        // 点击显示密码按钮 (如果不需要，可以移除)
        // await waitClick(page, '#form\:showPasswordId a'); 

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

        // 可以在此处添加等待登录成功的逻辑，例如等待某个元素出现
        // await page.waitForNavigation({ waitUntil: 'networkidle2' });
        // console.log("登录成功！");

        // 保持浏览器打开以便观察结果，如需自动关闭，请取消注释下一行
        // await browser.close();
    }

    // 调用登录函数进行测试
    await login("96391281", "AadBaiudhw");

})().catch(err => console.error("发生错误:", err)).finally(() => {
    // 确保浏览器在脚本结束或出错时关闭
    if (browser) {
        browser.close();
    }
});

登录后复制

代码解析：

waitClick(page, selector) 辅助函数：
- 这是一个关键的封装，它使用 page.waitForSelector 或 page.waitForXPath 来确保目标元素在点击前是可见且可交互的。这极大地提高了点击操作的稳定性。
- 它支持两种选择器类型：普通的 CSS 选择器和以 xpath/ 开头的 XPath 选择器。
- page.waitForXPath 返回的是一个 ElementHandle 数组，因此需要取 element[0] 来进行点击。
login(user, password) 函数：
- 浏览器启动与页面导航： 启动 headless: false 的浏览器以便观察自动化过程。
- 输入用户名： 使用 page.keyboard.type() 模拟键盘输入用户名。
- 点击“下一步”： 调用 waitClick 函数点击进入密码输入界面。
- 激活虚拟键盘： await waitClick(page, '#inputPassId'); 这一步非常重要，它模拟用户点击密码输入框，通常会激活虚拟键盘的显示。
- 密码字符迭代：
  - [...password] 将密码字符串转换为字符数组。
  - for (const el of passArr) 循环遍历每个字符。
  - /[A-Z]/.test(el) 正则表达式用于判断当前字符是否为大写字母。
  - 处理大写字母： 如果是大写字母，则按顺序执行：点击 Shift 键 -> 点击大写字母本身 -> 再次点击 Shift 键。这种模式模拟了用户按下 Shift 键后输入大写字母，然后释放 Shift 键的操作。
  - 处理普通字符： 如果是小写字母、数字或符号，则直接点击对应的虚拟键盘按钮。
  - XPath 构造： xpath/" + //button[contains(@class,"keypad-key") and text()="${el}"]`` 动态构造 XPath，确保能精确匹配到带有特定文本内容的按钮。
错误处理与资源释放：
- .catch(err => console.error("发生错误:", err)) 用于捕获异步操作中的错误。
- .finally(() => { if (browser) { browser.close(); } }) 确保无论成功与否，浏览器实例最终都会被关闭，防止资源泄露。

4. 注意事项与最佳实践

选择器精度： 确保你的 XPath 或 CSS 选择器足够精确，避免选中错误的元素。在调试时，可以使用浏览器开发者工具验证选择器。
等待机制： 始终使用 page.waitForSelector、page.waitForXPath 或 page.waitForFunction 等方法，确保元素在操作前已加载并可见。
延迟操作： 对于用户输入或点击操作，适当增加 delay (例如 page.keyboard.type(user, { delay: 10 })) 可以更好地模拟人类行为，减少被网站反爬虫机制检测的风险。
页面加载状态： 使用 waitUntil: 'networkidle2' 或 waitUntil: 'domcontentloaded' 等选项，确保页面在进行操作前处于稳定状态。
错误处理： 使用 try...catch 块来捕获潜在的自动化错误，并进行适当的日志记录或重试机制。
Headless 模式： 在开发和调试阶段，将 headless 设置为 false 可以直观地观察自动化流程，有助于发现问题。在生产环境中，通常会设置为 true 以提高性能。
动态网站的适应性： 虚拟键盘的实现方式可能因网站而异。在应用于其他网站时，可能需要调整 XPath 或点击逻辑。

总结

通过结合 XPath 的精准定位能力和字符级的处理策略，我们可以有效地解决 Puppeteer 在模拟点击虚拟键盘按钮时遇到的“Node is either not clickable or not an HTMLElement”错误。这种方法不仅提高了自动化脚本的鲁棒性，也使其能够更好地适应复杂的动态网页交互场景，特别是涉及区分大小写密码输入的银行或金融类网站。遵循上述最佳实践，将有助于构建更加稳定和高效的 Puppeteer 自动化解决方案。

以上就是解决 Puppeteer 模拟点击虚拟键盘按钮的挑战的详细内容，更多请关注php中文网其它相关文章！