借助Greasemonkey实现访客自助终端登录流程多按钮点击自动化

问题背景 #

为公司访客自助终端搭建自动化流程，每周重启后自动打开登录页、填充账号并启动终端程序。目前填充用户名字段正常，但模拟点击"Next"按钮无法跳转到下一个输入字段，已尝试三段相同逻辑的填充+点击函数均无效。

现有代码与目标按钮结构 #

尝试的点击函数 #

function UserEnter(username) {
    // Find the input fields for username
    const usernameInput = document.querySelector('input[name="username"]');

    // Check if the input fields exist
    if (!usernameInput) {
        console.error("Username input field not found.");
        return;
    }

    // Enter the username
    usernameInput.value = username;

    // Find the button to click
    const button = document.querySelector(buttonSelector);

    // Check if the button exists
    if (!button) {
        console.error("Button not found.");
        return;
    }

    // Click the button
    button.click();
}

目标按钮HTML结构 #

<div class="col-sm-12 btn-next-container">
 <button class="btn btn-default btn-auth btn-next" onclick="onUsernameEntered()" type="button">Next<i class="icon-next"></i></button> </div>

可能的原因 #

1. 输入框未触发必要事件：直接通过value赋值不会触发前端表单依赖的input/change事件，可能导致按钮处于逻辑不可用状态（视觉上可能显示正常）。
2. DOM click()方法不兼容框架事件绑定：如果登录页使用Vue、React等前端框架，直接调用DOM元素的click()可能无法触发框架绑定的事件处理逻辑。
3. onclick函数依赖上下文：按钮的onclick="onUsernameEntered()"可能需要特定的this上下文，直接调用button.click()可能导致函数执行异常。

解决方法 #

1. 先触发输入框的表单事件 #

在设置usernameInput.value后，手动触发input和change事件，确保前端表单识别到输入内容：

usernameInput.value = username;
// 触发input事件（实时校验常用）
usernameInput.dispatchEvent(new Event('input', { bubbles: true }));
// 触发change事件（失焦校验常用）
usernameInput.dispatchEvent(new Event('change', { bubbles: true }));

2. 直接调用按钮绑定的onclick函数 #

既然按钮明确绑定了onUsernameEntered()函数，可直接调用该全局函数跳过DOM点击：

// 先确认函数存在
if (typeof window.onUsernameEntered === 'function') {
    window.onUsernameEntered();
}

3. 模拟完整的鼠标点击事件序列 #

模拟真实用户的点击流程（mousedown → mouseup → click），触发所有关联事件：

const simulateRealClick = (element) => {
    // 触发mousedown
    element.dispatchEvent(new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true,
        view: window
    }));
    // 触发mouseup
    element.dispatchEvent(new MouseEvent('mouseup', {
        bubbles: true,
        cancelable: true,
        view: window
    }));
    // 触发click
    element.dispatchEvent(new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        view: window
    }));
};

// 替换原button.click()为这个函数
simulateRealClick(button);

4. 排查按钮的可点击状态 #

先通过控制台确认按钮是否真的可交互：

console.log('按钮是否禁用:', button.disabled);
console.log('按钮是否隐藏:', button.hidden);
console.log('按钮是否可被点击（CSS）:', window.getComputedStyle(button).pointerEvents);

如果输出显示按钮禁用或不可点击，需要先解决前置条件（比如输入内容不符合校验规则）。

内容的提问来源于stack exchange，提问作者Kliessen