I’ve been tasked with making some manual updates in a UI that was built with Next.js. There is an element in the UI that repeats about 1 million times (not really but you get the idea) and I need to click the element to toggle the state.
The selector for the element is easy. I wrote const el = document.querySelector('some-selector')
in the console and was able to log out the correct element. Only problem is that when I execute el.click()
the element state is not toggled. I also tried el.dispatchEvent(new MouseEvent("click", { bubbles: true, cancelable: false }));
with no luck.
For example, I believe Nike’s website uses Next.js. If you go to the home page and open the console, you can select the swoosh icon with this: const swoosh = document.querySelector('.swoosh')
. What I need to is to simulate a click on that element from the console.
I assume the problem here is that under the hood, the next.js component has a custom click handler and for whatever reason it is not being triggered unless I physically click the element. Anyone know how I can call the actual next.js click handler with code?