Chrome console click() not working on Chat List in web.whatsapp

问题

I'm try to built a chat bot for whatsapp web. I need to click on each chat present in the chat window in the left side panel.

The click is not working on the chat list only. I did some research and came across below link.

Chome console .click() working on one website, but not on another website. Why and how?

I was able to trigger other click, like click on the title of chat when using below script.

$('#main ._3V5x5').click()

I have fetch the div of the first element in the chat list using below code.

document.querySelectorAll('._3La1s > .X7YrQ')[0]

Below is the html code for the chat list

    <div tabindex="-1" data-tab="3">
<div class="">
    <div class="_3La1s" style="height: 144px;">
        <div class="X7YrQ" style="z-index: 1; height: 72px; transform: translateY(72px); transition: none 0s ease 0s;">
            <div class="_3WtUH">
                <div tabindex="-1">
                    <div class="_2UaNq _3mMX1">
                        <div class="_3vpWv">
                            <div class="_3RWII" style="height: 49px; width: 49px;">
                                <img src="https://web.whatsapp.com/pp?e=https%3A%2F%2Fpps.whatsapp.net%2Fv%2Ft61.24694-24%2F70476463_2488309491438311_2008596453030625280_n.jpg%3Foe%3D5D9090FA%26oh%3D1a16e2ec8cbc2668afe54393f8d5e796&amp;t=s&amp;u=918390087973%40c.us&amp;i=1569317438" draggable="false" class="jZhyM _13Xdg" style="visibility: visible;">
                                <div class="B9BIa"><span data-icon="default-user" class=""><svg ></path></g></svg></span>
                                </div>
                            </div>
                        </div>
                        <div class="_2WP9Q">
                            <div class="KgevS">
                                <div class="_3H4MS"><span class="_3NWy8"><span dir="auto" title="Fubuki" class="_19RFN">Fubuki</span>
                                    <div class="_2Ol0p"></div>
                                    </span>
                                </div>
                                <div class="_0LqQ">4:39 PM</div>
                            </div>
                            <div class="xD91K">
                                <div class="_2Bw3Q"><span class="_1Wn_k" title="&#8234;Sorry cannot recognize your query!&#8236;"><div class="_3VIru"><span data-icon="status-dblcheck" class=""><svg ></path></svg></span>
                                </div><span dir="ltr" class="_19RFN _1ovWX">Sorry cannot recognize your query!</span></span>
                            </div>
                            <div class="_0LqQ"><span></span><span></span><span></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="X7YrQ" style="z-index: 0; height: 72px; transform: translateY(0px); transition: none 0s ease 0s;">
        <div class="_3WtUH">
            <div tabindex="-1">
                <div class="_2UaNq">
                    <div class="_3vpWv">
                        <div class="_3RWII" style="height: 49px; width: 49px;">
                            <img src="https://web.whatsapp.com/pp?e=https%3A%2F%2Fpps.whatsapp.net%2Fv%2Ft61.24694-24%2F68116369_2286192595027073_7894703794800295936_n.jpg%3Foe%3D5D90933A%26oh%3D2849b6528f72a913b0b7e286fdb9e4cf&amp;t=s&amp;u=918097251715%40c.us&amp;i=1568968065" draggable="false" class="jZhyM _13Xdg" style="visibility: visible;">
                            <div class="B9BIa"><span data-icon="default-user" class=""><svg ></path></g></svg></span>
                            </div>
                        </div>
                    </div>
                    <div class="_2WP9Q">
                        <div class="KgevS">
                            <div class="_3H4MS"><span class="_3NWy8"><span dir="auto" title="AXXX" class="_19RFN">AXXX</span>
                                <div class="_2Ol0p"></div>
                                </span>
                            </div>
                            <div class="_0LqQ">4:49 PM</div>
                        </div>
                        <div class="xD91K">
                            <div class="_2Bw3Q"><span class="_1Wn_k" title="&#8234;Hi&#8236;"><div class="_3VIru"><span data-icon="status-dblcheck-ack" class=""><svg ></path></svg></span>
                            </div><span dir="ltr" class="_19RFN _1ovWX">Hi</span></span>
                        </div>
                        <div class="_0LqQ"><span></span><span></span><span></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
</div>
</div>

I would really appreciate your help. Thanks in advance

回答1:

Whatsapp don't allow the click event fire directly

create an eventfiring function to stimulate the human action

//create an eventfiring function to stimulate the human action
function eventFire(el, etype){
		var evt = document.createEvent("MouseEvents");
		evt.initMouseEvent(etype, true, true, window,0, 0, 0, 0, 0, false, false, false, false, 0, null);
		el.dispatchEvent(evt);
}

// Get the List of unread messages
var unreadMSgLIst = document.querySelectorAll('._1ZMSM .P6z4j');
var i =0;
//trigger  the mousedown event
setInterval(function(){ 
	eventFire(unreadMSgLIst[i], 'mousedown');
  i++;
}, 3000);

来源：https://stackoverflow.com/questions/58115835/chrome-console-click-not-working-on-chat-list-in-web-whatsapp