The element is clicked, but Page is not reloaded a

问题:

Using phantom JS, I am trying to click a <li> element(target_element) and render the page which loads after it. The element is clicked successfully. But, on rendering, the refreshed page is not seen in the output. I have given enough wait item. The code is:

page.open(address, function (status) {
    if (status !== 'success') {
        console.log('Unable to load the address!');
        phantom.exit();
    } else {
        window.setTimeout(function () {
            page.evaluate(function() {
                document.getElementById('custom_filters').style.visibility = "hidden";
                var a = document.getElementById('target_element');
                var e = document.createEvent('MouseEvents');
                e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                console.log(a.dispatchEvent(e));
                waitforload = true;
            });
            page.render(output);
            phantom.exit();
        }, waitTime);
    }
});

Does this mean The event has not triggered the JS function or am I doing anything wrong here?

回答1:

No, you didn't have any wait time between click and render. The setTimeout needs to be only around the calls that need to be delayed.

page.evaluate(function() {
    document.getElementById('custom_filters').style.visibility = "hidden";
    var a = document.getElementById('target_element');
    var e = document.createEvent('MouseEvents');
    e.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    console.log(a.dispatchEvent(e));
    waitforload = true;
});
window.setTimeout(function () {
    page.render(output);
    phantom.exit();
}, waitTime);