JavaScript .click on DIV not working, why?

Question

I'm doing an app using JavaScript to collect contacts from Google Contacts. What I need to do is navigate to this site, click on a DIV and extract the HTML source.

Problem is, when I manually click on the DIV, the website has the expected behaviour. But when I call click on the same DIV programatically, nothing happens.

Here is the DIV in question :

<div id=":se" class="tk3N6e-LgbsSe VIpgJd-TzA9Ye-eEGnhe Ycq2Ve tk3N6e-LgbsSe-roVxwc tk3N6e-LgbsSe-n2to0e tk3N6e-LgbsSe-vhaaFf-LK5yu ipG21e" role="button" tabindex="0" data-tooltip="Next" aria-label="Next" style="user-select: none;">
<span class="Fj0vqf" aria-hidden="true">&nbsp;</span>
<img class="P1rG1b tk3N6e-LgbsSe-RJLb9c" src="images/cleardot.gif" alt="">
</div>

To achieve the task, I'm using this JS :

document.getElementsByClassName('tk3N6e-LgbsSe')[7].click();

Although the selector above return the correct node, when I call .click(), nothing happens. What am I missing here?

Below is the site image with the DIV in question highlighted:

Answer 1

The following worked for me, had to do a mouseup after a mousedown.

document.getElementsByClassName('tk3N6e-LgbsSe')[7].dispatchEvent(new MouseEvent('mousedown'))
document.getElementsByClassName('tk3N6e-LgbsSe')[7].dispatchEvent(new MouseEvent('mouseup'))

Answer 2

The click is bound to the TR element.

document.querySelectorAll("tr.K9ln3e")[4].click()

And than I saw that it is not the person you are clicking on, but the arrow. Funny thing is I do not have enough contacts in gmail to have the arrow so I can only assume this will work

var dv = document.getElementsByClassName('tk3N6e-LgbsSe')[7]
var clickEvent = new MouseEvent('mousedown', {
  view: window,
  bubbles: true,
  cancelable: true
});
dv.dispatchEvent(clickEvent);