5

There is the page testkrok.org.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.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);
});
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
khex
  • 2,778
  • 6
  • 32
  • 56
  • 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. Sep 24 '15 at 22:01
  • @ArtjomB. Add `setTimeout` for 5 sec., but also nothing – khex Sep 24 '15 at 22:04

1 Answers1

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);
...
Community
  • 1
  • 1
Artjom B.
  • 61,146
  • 24
  • 125
  • 222
  • After this change there is selected field on the snapshot but the second select tag does not appear and it returns me an error `TypeError: 'undefined' is not an object (evaluating 'document.getElementsByTagName('option')[2].parentElement')` – khex Sep 24 '15 at 22:27
  • and it does not work even in Firefox console, that is some JS magic – khex Sep 24 '15 at 22:29
  • 1
    Yes, triggering a change event is necessary. I updated my answer. – Artjom B. Sep 24 '15 at 22:45
  • Thanks, thats work. Maybe you even know how to push the `document.querySelector('p.start_button')` ? – khex Sep 24 '15 at 22:51
  • 1
    If you mean triggering a click, then you already tried that in your question using the MouseEvent. – Artjom B. Sep 24 '15 at 22:53