javascript - 如何在此特定网站上以编程方式模拟用户点击？

Question

我正在尝试在类似日期选择器的元素上使用 javascript 触发点击。这是为 puppeter headless 浏览器集成而设计的，但首先我需要我的代码在 devtools 控制台中工作。

但是它不起作用...不像正常的手动点击。几个小时以来我一直在努力解决这个问题

特定网站在这里(使用 react )

https://www.homeaway.co.uk/p4787689

您必须单击“check in stay”才能显示模态日期选择器，然后我的意图是对其中一个日期数字执行 javascript 单击。 “1”、“2”、“3”……可见下方

This is how date picker looks like

单个日期条目(我们要单击)的 html 结构如下:每个日期(01.08.2019、02.08.2019 等)都是“td”行。它的类甚至有“可点击”的名字。所以它应该是我们想要点击的元素。

<td class="day no-gridlines selectable clickable" data-column="4" data-row="1" tabindex="-1" aria-label="August 9, 2019" aria-hidden="false">

    <div class="calendar-template calendar-template--show-availability calendar-template--show-selectability">
        <div class="day-template day-template--available-stay day-template--available-checkin-checkout">
            <div class="day-template__border">
            </div>
            <div class="day-template__content">
                <div class="day-template__day">9</div>
            </div>
        </div>
    </div>
</td>

我已经尝试获取这些 TD 元素中的每一个:

document.querySelectorAll('.day.no-gridlines.selectable.clickable')

然后点击其中一个

document.querySelectorAll('.day.no-gridlines.selectable.clickable')[4].click()

但是它不起作用？

我尝试检查事件点击处理程序，但是该网站正在使用一些框架..所以这对像我这样的初学者来说非常困难。

也许更有经验的人可以建议，为什么我不能在该网站上执行点击？

Answer 1

如果你显示一个页面会更好，那里有这些可点击的元素(因为在你的链接上我什至找不到一个具有可点击类的元素)......无论如何，在控制台中试试这个:

javascript:function AutoClickOnThese()
{
    var targets = document.querySelectorAll(".clickable");
    Array.prototype.forEach.call(targets, function(target,index){
        //If the clicks start some ajax request, these sure will be restricted
        //if too much running in an unrealistic time
        //... if there are no ajax, just delete the timeout stuff
        setTimeout(function()
        {
            target.onclick();
            //target.click(); //if not working the onclick
        }, index*600);
    });
};
AutoClickOnThese();