CasperJS click not firing click event

问题

I am having trouble with CasperJS. I load the page for our site, then try to click on the signup button. It's supposed to open a modal, but nothing happens. It works in actual browsers, and very similar functionality works in other tests on other pages.

What could I be doing wrong? What else would help you, the wider internet, help me?

casperjs --version: 1.1.0-beta3
phantomjs --version: 1.9.7

Casper test snippet:

casper.then(function() {
    casper.open(DOMAIN);

});

// wait added for debugging. 
casper.then(function() {
        casper.wait(2500);
});

// many different ways of trying to click and debug:
casper.then(function() {
    casper.click('[data-js="company-search-view-jobs-button-reg"]');
    var x = casper.evaluate(function() {
        var f = $("[data-js='company-search-view-jobs-button-reg']");
        f.click();
        var q = document.getElementById("foo");
        q.click();
        $('#foo').click();
        return $("[data-js='company-search-view-jobs-button-reg']")[0].innerHTML;

    });

// this prints the expected text, so it is definitely on the right page.
    casper.echo(x);
});

//waiting in case it was slow for some reason
casper.then(function() {
    casper.wait(2500);
});

// takes a screenshot. uses casper.capture under the hood.
casper.then(function() {
    util.screenshot("fff", SCREENSHOT_OPTIONS);

});

From the JS with the click handler:

var $companySearchViewJobsBtnNeedReg = $("[data-js=company-search-view-jobs-button-reg]");
[...] 
$companySearchViewJobsBtnNeedReg.on("click", function(e) {
    e.preventDefault();
[library code for opening the modal]

The HTML on the page:

<div class="columns xlarge-8">
    <div class="company-basic-info__logo left">
        <img class="company-basic-info__logo-img" src="/images/logo_placeholder.png" alt="[Standard Values] logo">
    </div>
    <div class="header-container">
        <h1>Standard Values</h1>

        <button class="company-basic-info__view-jobs-button" data-cta="viewOpenJobsForCompany" data-js="company-search-view-jobs-button-reg" href="https://[internal url not really important for the question]">Sign Up</button>
    </div>
    <div class="company-basic-info__description">
        <div class="company-basic-info__description-text" data-attr="expandable">Lorem ipsum dolor sit amet, inani labores eligendi ex cum, labitur equidem recteque eam eu. Ignota semper mentitum ad vim, aperiam volumus iracundia ne mea, eu eros movet mel. Sed ea natum elaboraret. Mel modus aliquid reformidans ei, postea putent splendide an eum.
       Sanctus indoctum mea id, feugiat placerat mei ea. An scripta epicurei theophrastus has, vis eu illud principes moderatius. Facer velit sed ei, atqui dicta ornatus ea vix, nec soluta populo ei. Quis laudem nec cu, sed viderer theophrastus id.
       </div>
        <div class="company-basic-info__description-expander" data-attr="expander" style="display: block;">
        </div>
    </div>
</div>

回答1:

In my case the problem was this line

casper.options.remoteScripts.push 'http://code.jquery.com/jquery-2.1.4.min.js'

The casperjs Jquery injection overwrited the addEventListeners so they were not working. Remove that line and test if it works. Modify your code to use plain javascript instead of Jquery lib.

来源：https://stackoverflow.com/questions/29616350/casperjs-click-not-firing-click-event

标签

javascript

casperjs