How can I programmatically click on elements using custom event listeners?

Question

I am looking to automate tasks on Chase Bank's website but I am facing challenges accessing elements prefixed by mds, like mds-button, using document.querySelector() and document.getElementById(). These methods return null for all such elements on the page.

I have observed event listener functions present, but they do not respond to my attempts like this:

const customEvent = new Event('click-brand_bar_hamburger_menu');
window.dispatchEvent(customEvent);

How can I, for example, programmatically trigger a click on the hamburger menu using Tampermonkey?

Answer 1

According to jcunews1, on websites that use complex UI frameworks, many event handlers are local functions and not directly accessible from a global context. Therefore, it may require significant effort to obtain a reference to the specific function if you intend to call it directly.

In cases like this where accessing the function directly proves challenging, an alternative approach involves automating the click event by instead invoking Tampermonkey's click() method on the relevant elements.

However, in this case, the element itself is also inaccessible, which means it is likely encapsulated in a shadow root. If the shadow root is open, it is possible to access the element.

To find the shadow root, open Chrome's devtools, hit F1, and enable the "Show user agent shadow DOM" option.