CasperJS点击不触发点击事件答案

【问题标题】：CasperJS click not firing click eventCasperJS点击不触发点击事件
【发布时间】：2015-04-13 22:48:34
【问题描述】：

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

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

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

Casper 测试 sn-p：

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>

【问题讨论】：

请注册resource.error、page.error、remote.message 和casper.page.onResourceTimeout 活动。可能有错误。
要明确：这些点击方法都不起作用，并且截图没有显示模态？ casper.exists('[data-js="company-search-view-jobs-button-reg"]') 是否返回 true？请注意，Casper（可能）没有使用与 jQuery 相同的 DOM 选择器机制，因此 jQuery 为您提供正确的元素并不能保证 Casper 可以使用相同的选择器找到它。
感谢 cmets。意外提交..编辑..
casper.exists('[data-js="company-search-view-jobs-button-reg"]') 返回 true。
添加这些事件侦听器后，我看到“错误：TypeError：'undefined' 不是函数（评估 'this.hideOnClickAway.bind(this)'）”，看起来很有希望。我在 chrome 控制台中没有看到这样的错误，我不确定为什么在页面加载时会发生这种情况。
进一步调查，我认为错误是关键。看起来该错误正在阻止点击处理程序工作。如果我将按钮更改为仅标记，则单击有效。不过，我不知道为什么在 Casper 而不是 chrome 中会发生该错误。
您是否尝试在页面的浏览器控制台中运行casper.evaluate 中的代码，然后它可以工作吗？程序化点击可能与“现实生活中的”鼠标点击不同，因为在浏览器中，您使用正确的事件属性（事件位置可能很重要）执行 mousedown->mouseup->click，而不是由测试触发的简单“点击”。如果您有一个棘手的事件处理程序，这可能会有所作为

标签： javascript casperjs

【解决方案1】：

就我而言，问题是这一行

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

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

【讨论】：