Question

页面testkrok.org.ua具有一致的参数选择。因此，我需要在5个相互依赖的选择框的每个选项上创建一系列5次点击。

document.querySelector('select.se1')[3]
document.querySelector('select.se2')[1]
document.querySelector('select.se3')[1]
document.querySelector('select.se4')[1]
document.querySelector('select.se5')[3]

重定向到包含测试的页面。

但是在第一次点击后拍摄的快照上没有出现第二个面板？也许我没有击中元素？

var page = require('webpage').create();
page.open('https://testkrok.org.ua', function(status) {
    console.log("Status: " + status);
    if(status === "success") {
        page.evaluate(function() {
            var theEvent = document.createEvent("MouseEvent");
            theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            var element = document.querySelector('select.se1')[3];
            element.dispatchEvent(theEvent);
        });
    }
    setTimeout( function() {
        page.render('snapshot.png');
        phantom.exit()
    }, 5000);
});

Answer 1

您无法在选择框的选项上点击（触发点击事件）。您需要更改所选选项，然后trigger a change event。例如：

var sel = document.querySelector('select.se1');
sel.selectedIndex = 2;
var event = new UIEvent("change", {
    "view": window,
    "bubbles": true,
    "cancelable": true
});
sel.dispatchEvent(event);

您可以将其打包到函数

中

function selectOption(selector, optionIndex) {
    page.evaluate(function(selector, optionIndex){
        var sel = document.querySelector(selector);
        sel.selectedIndex = optionIndex;
        var event = new UIEvent("change", {
            "view": window,
            "bubbles": true,
            "cancelable": true
        });
        sel.dispatchEvent(event);
    }, selector, optionIndex);
}

然后你可以一个接一个地调用它

selectOption("select.se1", 2);
selectOption("select.se2", 0);
selectOption("select.se3", 0);
...

你明白了。如果选择框的onChange事件需要远程数据，例如通过AJAX，那么您将需要在两次调用之间等待。使用静态等待时间（参见下面的示例）或使用waitFor()。

setTimeout(function(){
    selectOption("select.se1", 2);
}, 1000);
setTimeout(function(){
    selectOption("select.se2", 0);
}, 2000);
setTimeout(function(){
    selectOption("select.se3", 0);
}, 3000);
...

如何使用PhantomJS单击选择框选项

1 个答案: