Headless Browser Struggles to Activate Wordpress Plugin Upload Form

Other Questions Headless Browser
1

I’m trying to automate plugin uploads on my Wordpress site using a headless browser. Everything seems to work fine, except the ‘Install Now’ button stays grayed out. Here’s what I’m seeing:

Browser output

The button won’t budge. I’ve tried a few things:

// Attempt 1: Click by ID
document.getElementById('install-button').click();

// Attempt 2: Submit the form
document.querySelector('form#plugin-upload').submit();

// Attempt 3: Enable and click
var button = document.querySelector('#install-button');
button.disabled = false;
button.click();

None of these worked. When I check the button’s HTML, it looks normal:

<input type="submit" id="install-button" class="button" value="Install Now">

Any ideas why the button won’t activate in a headless browser? I’m stumped!

2

I’ve faced similar issues with headless browsers and WordPress before. In my experience, the problem often lies in how WordPress handles JavaScript events for form validation.

Try injecting a script that simulates user interaction more closely. This approach worked for me:

await page.evaluate(() => {
    const event = new Event('change', { bubbles: true });
    document.querySelector('#pluginzip').dispatchEvent(event);
    document.querySelector('#install-plugin-submit').click();
});

This method triggers the ‘change’ event on the file input, which should activate the ‘Install Now’ button. Then it directly clicks the submit button.

If that doesn’t work, you might need to wait for network idle or add a small delay before clicking. WordPress sometimes has delayed AJAX calls that affect button states.

Lastly, ensure your headless browser has JavaScript enabled and is waiting for the page to fully load before attempting interactions. Good luck with your automation project!

3

Have you considered the possibility that WordPress might be using some client-side validation or event listeners that aren’t firing properly in the headless environment? In my experience, this can often be the culprit when dealing with form submissions in headless browsers.

One approach that’s worked for me is to bypass the button entirely and directly submit the form using JavaScript. Try something like this:

await page.evaluate(() => {
    const form = document.querySelector('form#plugin-upload');
    const formData = new FormData(form);
    fetch(form.action, {
        method: 'POST',
        body: formData
    });
});

This method simulates a form submission without relying on button clicks or event listeners. It might just do the trick for your WordPress plugin upload automation. Let me know if it helps!

4

hey spinninggalaxy, i had a similar headache. try this:

await page.evaluate(() => {
  document.querySelector('#pluginzip').value = 'dummy.zip';
  document.querySelector('#install-plugin-submit').removeAttribute('disabled');
  document.querySelector('#install-plugin-submit').click();
});

this trick fools wp into thinking there’s a file & enables the button. works like a charm for me. lemme know if it helps!