javascript - How to click on selectbox options using PhantomJS - Stack Overflow

admin管理员组

文章数量:1417405

There is the page testkrok.ua with a consistent selection of parameters. So, I need to create a series of 5 clicks on each of the options of 5 select boxes that depend on each other.

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]

to redirect to the page with tests.

But on snapshot taken after the first click the second panel does not appear? Maybe I don't hit the the element?

var page = require('webpage').create();
page.open('', 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);
});

There is the page testkrok.ua with a consistent selection of parameters. So, I need to create a series of 5 clicks on each of the options of 5 select boxes that depend on each other.

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]

to redirect to the page with tests.

But on snapshot taken after the first click the second panel does not appear? Maybe I don't hit the the element?

var page = require('webpage').create();
page.open('https://testkrok.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);
});

• javascript
• click
• phantomjs
• html-select

Share Improve this question Follow edited Mar 30, 2016 at 6:40 Artjom B. 62k2626 gold badges135135 silver badges230230 bronze badges asked Sep 24, 2015 at 21:57 khexkhex 2,82877 gold badges3535 silver badges5757 bronze badges 2

• 1 If I understand you correctly, you want to click on select box options. I don't think those aren't actually clickable. Also, you may need to wait a little after the click. – Artjom B. Commented Sep 24, 2015 at 22:01
• @ArtjomB. Add setTimeout for 5 sec., but also nothing – khex Commented Sep 24, 2015 at 22:04

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can't click (trigger a click event) on options of a select box. You need to change the selected option and then trigger a change event. For example:

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

You can package that in a function

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);
}

Then you can call it one after the other

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

You get the idea. In case the onChange event of the select box needs remote data for example through AJAX, then you will need to wait between the calls. Either use a static wait time (see following example) or use waitFor().

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

本文标签： javascriptHow to click on selectbox options using PhantomJSStack Overflow