Trying to create multiple button clicks to automate a login process using Greasemonkey

Question

I am trying to setup an automated process for a visitor kiosk at my company. The idea is to schedule automatic weekly restarts followed by the browser launching to the network page, logging in under the kiosk account and then launching the kiosk program. The problem is with the login page. The login fields are staggered and I cannot for the life of me figure out how to simulate the mouse click to progress to the next field.

any help is hugely appreciated.

The format I've been trying. There's three copies of the same function for filling out a field, clicking the next button and progressing to the next field. field entry works fine but I have had no luck getting the button click to work.

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();
}

This is the container for the button I'm trying to use,

<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>

Is there a specific constraint I have to use for the click function to succeed? or is there an alternative way to click the button. after successfully clicking this button it will transition to the next entry field with another button.

Answer 1

Your button click calls onUsernameEntered(). Maybe simply calling onUsernameEntered() solves your issue. If not, then:

document.querySelector(".btn-auth.btn-next").click();

but, if your button is not yet operational, then you can create a load handler for it:

document.addEventListener("load", function() {
    document.querySelector(".btn-auth.btn-next").click();
});