Mouse click event not working as expected

I’m trying to search for a contact in Whatsapp Web search bar, first I want to focus in search bar and then enter the contact to execute the search.

I’m selecting the div with:

const searchBox = document.querySelector("[data-testid=chat-list-search]") // returns div element

searchBox.dispatchEvent(new MouseEvent('click', { bubbles: true })) // returns true

Dispatch event returns true but has no effect in search box

Answer

You can just use element.focus() or element.select(), whichever better fits the goal (if you can target an <input> element rather than a div, then the focus method might be a better choice because it will pre-select the input’s text content).

If you only want to click the element, you can use element.click().

Note that, in any case, the app might be using event listener callbacks which choose not to respond to any event fired that doesn’t have its event.isTrusted property set to true (and in this case, there’s no way to programmatically interact with those targets by generating an event and dispatching it — or, in other words — without using native APIs in an environment like puppeteer).