无法使用Phantomjs点击元素。

5

来自文章:如何在PhantomJS测试中ng-click A指令,我了解到需要创建自己的函数来单击元素,但是我该如何使用它?

以下代码给我错误TypeError:'undefined'不是函数(评估'click(obj)')

var page = require('webpage').create();
var url = 'http://somesite.com/document.html';

page.open(url, function(status) {
    page.evaluate(function() {
        var obj = document.querySelectorAll('button')[0];
        click(obj);
    });
    console.log(page.content);
    phantom.exit();
});


function click(el){
    var ev = document.createEvent('MouseEvent');
    ev.initMouseEvent(
        'click',
        true /* bubble */, true /* cancelable */,
        window, null,
        0, 0, 0, 0, /* coordinates */
        false, false, false, false, /* modifier keys */
        0 /*left*/, null
    );
    el.dispatchEvent(ev);
}
3个回答

5
PhantomJS有两个上下文环境,只有通过page.evaluate()访问的页面上下文环境才能访问DOM并触发合成事件。由于您的click()函数使用document,因此需要在页面上下文中运行。 page.evaluate()是沙盒化的,这就是为什么您不能简单地使用在外部定义的变量。您需要在页面上下文中定义它们,或者以复杂的方式传递它们(因为只有原始对象可以传入和传出页面上下文环境,而函数不是原始对象)。
page.open(url, function(status) {
    page.evaluate(function() {
        if (typeof window.click !== "function") {
            window.click = function(el){
                var ev = document.createEvent('MouseEvent');
                ev.initMouseEvent(
                    'click',
                    true /* bubble */, true /* cancelable */,
                    window, null,
                    0, 0, 0, 0, /* coordinates */
                    false, false, false, false, /* modifier keys */
                    0 /*left*/, null
                );
                el.dispatchEvent(ev);
            }
        }
        var obj = document.querySelectorAll('button')[0];
        click(obj);
    });
    console.log(page.content);
    phantom.exit();
});

参考文献:


这很有用,我不再收到TypeError消息,但它并没有解决问题,即它并没有导致按钮被点击。我想知道页面上是否存在某种JavaScript点击预防措施,这是可能的吗? - zoltar
1
@zoltar 在PhantomJS中点击操作总是很棘手。你有没有看过我链接的问题中的解决方案?特别是这个答案,几乎总是有效的。 - Artjom B.
谢谢Artjom,这是适合我的解决方案。 - zoltar

1
我找到了问题所在。点击事件被网站的 JavaScript 绕过了。幸运的是,PhantomJS 有一个 sendEvent 函数可以像真正的用户一样发送事件:
var rect = page.evaluate(function() {
    return $('a.whatever')[0].getBoundingClientRect();
});
page.sendEvent('click', rect.left + rect.width / 2, rect.top + rect.height / 2);

我通过PhantomJS; 单击一个元素找到了上述解决方案。


最好不要重复内容。如果解决方案对您有效,请最好确认是否有重复。 - Artjom B.

0
    page.evaluate(function () {
        document.getElementById("login").click();
    });

有作用...不是你的意思吗?


".click() 和 click(obj) 有什么区别?" - zoltar
我所提到的是 js 函数 click - 而不是你的自定义函数。你说 “......我了解我需要创建自己的函数来点击一个元素......”,但据我了解这并不正确。 - user1515791
3
element.click() 并非总是有效。 - Artjom B.

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接