javascript - PhantomJS 无法点击现有元素

Question

我在 Windows 8.1 上使用 PhantomJS 1.9.7，我将在输入用户名和密码后单击“登录”按钮。我可以写用户名和密码，但是，当我想让 PhantomJS 单击按钮时，它可以找到该元素，但无法单击该元素。我在以前的帖子中发现我需要创建事件并使用“dispatchEvent”。我这样做了，但出现如下错误:

TypeError: 'undefined' is not a function (evaluating 'elm.dispatchEvent(event)')

我也尝试从 EventListener 获得帮助，但我得到了同样的错误。

我怎样才能点击一个元素？

var page = require('webpage').create();

page.open('URL', function() {
    var submitButton = enterUserAndPassAndLogin();      
    click(submitButton);
    phantom.exit();
});

function enterUserAndPassAndLogin() {
    var element = page.evaluate(function()  {
        document.querySelector('input[name="username"]').value = "*******";
        document.querySelector('input[name="password"]').value = "*******";
        return document.getElementsByTagName("Button");
    });
    return element;
}

function click(elm) {
    var event = document.createEvent("MouseEvent");
    event.initMouseEvent("click", true, true, window,
        0, 0, 0, 0, 0, false, false, false, false, 0, null);
    elm.dispatchEvent(event);
}

Answer 1

代码有两个问题。首先 DOM 元素不能从页面上下文 (page.evaluate) 传递到外部。来自 docs 的对应行:

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

Closures, functions, DOM nodes, etc. will not work!

所以 submitButton 是 [null]。因为返回了一个数组，所以错误消息没有显示实际问题。由于无法将 DOM 元素传递到外部，因此点击必须发生在 page.evaluate 内部。

由于 page.evaluate 是沙箱化的，因此必须在页面上下文中定义 click 函数。无法直接访问来自外部的变量和函数。

一个可能的脚本是这样的:

var page = require('webpage').create();

page.open('URL', function() {
    enterUserAndPassAndLogin();
    setTimeout(function(){
        // wait a little to maybe see the click result
        phantom.exit();
    }, 1000);
});

function enterUserAndPassAndLogin() {
    page.evaluate(function()  {
        function click(elm) {
            var event = document.createEvent("MouseEvent");
            event.initMouseEvent("click", true, true, window,
                0, 0, 0, 0, 0, false, false, false, false, 0, null);
            elm.dispatchEvent(event);
        }
        document.querySelector('input[name="username"]').value = "*******";
        document.querySelector('input[name="password"]').value = "*******";
        click(document.getElementsByTagName("Button")[0]);
    });
}