CasperJS点击不触发点击事件 [英] CasperJS click not firing click event

问题描述

我在使用CasperJS时遇到麻烦。我加载了我们网站的页面，然后尝试单击注册按钮。应该打开一个模式，但是什么也没发生。它可以在实际的浏览器中工作，非常相似的功能也可以在其他页面的其他测试中工作。

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.

我可能做错了什么？

casperjs --version：1.1.0-beta3

phantomjs --version：还有什么可以帮助您，更广泛的互联网对我有帮助？

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

Casper测试摘要：

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

});

通过带有点击处理程序的JS：

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] 

页面上的HTML：

<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>

推荐答案

我的问题是这行

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

casperjs Jquery注入覆盖了addEventListeners，因此它们无法正常工作。删除该行并测试它是否有效。修改您的代码以使用纯JavaScript而不是Jquery lib。

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.

这篇关于CasperJS点击不触发点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！