Question

我在CasperJS遇到麻烦。我加载了我们网站的页面，然后尝试单击注册按钮。它应该打开一个模态，但没有任何反应。它适用于实际的浏览器，非常相似的功能适用于其他页面上的其他测试。

我可能做错了什么？还有什么可以帮助你，更广泛的互联网，帮助我？

casperjs --version：1.1.0-beta3
phantomjs --version：1.9.7

Casper测试片段：

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：

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>

Answer 1

在我的情况下，问题是这一行

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

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

CasperJS点击不触发点击事件

1 个答案: