I’m trying to automate clicking a button on a webpage to load more content. I need to simulate mouse clicks to make all the results visible on a scrolling page. The button I want to click is labeled “Load More Results” and appears at the bottom of the page.
I’ve been working with AppleScript and JavaScript but can’t get it working properly. Here’s what I have so far:
on loadMoreContent(pageID)
tell application "Safari"
activate
open location "https://example-site.com/archive/document/" & pageID as string
delay 3.0
do JavaScript "var button = document.querySelector('#show-more').firstElementChild; button.dispatchEvent(new MouseEvent('click', {bubbles: true}));" in document 1
end tell
end loadMoreContent
The problem is that my JavaScript code doesn’t seem to trigger the button properly. I want it to keep clicking until all content loads automatically. Since I’m not very experienced with JavaScript, I’m wondering what I’m doing wrong. Any suggestions on how to fix this automation script?
your selector might be wrong there - try using just document.querySelector('#show-more').click() without the firstElementChild part. also check if the button is actually loaded when your script runs, sometimes you need a longer delay for dynamic content to appear. i usually add a waitfor function that checks if element exists before trying to click it
Have you checked the browser console for any errors when your script runs? Sometimes the button element isn’t fully loaded even after your 3 second delay, especially if it’s generated dynamically through AJAX calls. I ran into this exact problem last month when scraping product listings. What worked for me was adding a polling mechanism that waits for the element to be present before attempting the click. Try wrapping your click logic in a function that uses setInterval to check if the button exists and is visible, then execute the click. Also worth noting that some sites detect rapid automated clicks and will disable the load more functionality temporarily, so you might want to randomize your delays between clicks to make it appear more human-like.
The issue you’re encountering is likely due to the button requiring a proper user interaction event rather than a programmatically dispatched one. Many modern websites implement click handlers that check for trusted events to prevent automated clicking. Instead of using dispatchEvent, try directly calling the click method on the button element. Replace your JavaScript with document.querySelector('#show-more').firstElementChild.click(); which should work better. Also, you might need to add a loop with delays to handle multiple clicks until all content loads. Something like checking if the button still exists after each click, then waiting a few seconds before clicking again. I’ve had similar issues with automated clicking on dynamic content sites and found that simulating the actual click method rather than creating mouse events tends to be more reliable.