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

Question

页面 testkrok.org.ua 的参数 select 一致。因此，我需要在 5 个相互依赖的 select 框的每个选项上创建一系列 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

您不能点击（触发点击事件）select 框的选项。您需要更改 selected 选项，然后更改 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);
...

你懂的。如果 select 框的 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 单击选择框选项

How to click on selectbox options using PhantomJS

javascript

html-select

click

phantomjs