如何在 Chrome devtool 控制台上触发点击事件？答案

【问题标题】：How to trigger a tap event on Chrome devtool console?如何在 Chrome devtool 控制台上触发点击事件？
【发布时间】：2013-09-16 19:42:20
【问题描述】：

如何使用 Chrome-devtool 的控制台来测试我的 javascript 是否有效？我找到了 xpath 并将其转换为 css 定位器。基本上它是一个将颜色从灰色变为蓝色的按钮。

这是我的 sn-p 代码： browser.execute_script("$('button.nominate').trigger('tap');")

在控制台上，我尝试了类似：

$('button.nominate').trigger('tap')

结果如下：

[]

我以为它会点击按钮

【问题讨论】：

如果你输入console.log($('button.nominate').length)，它会输出0。认为您的选择器（css 定位器:)）是错误的。
Null 和@Konrad Dzwinel 感谢您的帮助。显然，我确实使用了错误的 CSS 选择器。我还发现将 XPATH 转换为 CSS 可能不会产生好的结果。有人告诉我我的 CSS 太具体了，我应该依靠使用类名来完成它。我用cssify.appspot.com 来帮助我

标签： javascript debugging google-chrome-devtools

【解决方案1】：

我想您正在对您的移动应用进行某种功能测试。前段时间我也在做同样的事情（使用 CasperJS），在这个过程中，我创建了这个函数：

// I've commented out CasperJS specific stuff, don't use it if you don't need it
function triggerEventOnPage(selector, eventName, memo) {
    //casper.evaluate(function(selector, eventName, memo){
        var event;
        var element = document.querySelector(selector);

        event = document.createEvent("Event");
        event.initEvent(eventName, true, true);
        event.memo = memo || { };

        element.dispatchEvent(event);
    //}, selector, eventName, memo);
    //wait();
}

你可以通过调用在你的测试中使用它：

triggerEventOnPage(".edit-list-button", 'tap');

但是，请注意没有原生 tap 事件。只有touchstart、tachmove、touchend 事件和tap 的实现是基于这三个完成的。因此，您使用的tap 事件的实现可能与我使用的不同，并且上述功能可能不适合您。

编辑： 因为您使用的是 jQuery，$('button.nominate').trigger('tap') 应该可以正常工作。 @NULL 可能是正确的，您的选择器无效。

【讨论】：

太棒了！！对我来说很棒！