Question

我正在加载jquery的网页上工作，并且网页上有一个支持自动完成的输入字段，因此在输入多个字符后，会显示一些建议框。通过使用开发工具＆＃39;控制台，我可以通过执行以下jquery函数（浏览器控制台中的）强制生成建议列表并按需显示：

$('input#PrincipalPolicyHolder_EmploymentOccupationDescription').val("soft");

setTimeout(function() { $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').focus(); }, 5000);

setTimeout(function() { $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').keyup(); }, 6000);

我需要延迟才能将焦点从控制台更改为窗口。只要我不点击其他地方，这些jQuery命令就足以让$('#PrincipalPolicyHolder_EmploymentOccupationDescription').is('focus')生成建议列表所需的真实值。

但是，相同的步骤在casperjs环境中不起作用。这就是我执行的方式;

casper.then(function () {
    this.evaluate(function () {
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').val("soft");
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').focus();
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').keyup();
    });
});

我还尝试将sendKeys与keepFocus: true一起使用，但从未让is(':focus')检查为正。有没有办法实现这个目标？

编辑：我将问题缩小到一个非常简单的网页上，以下是捕获问题的代码段：

var casper = require('casper').create({
    verbose: true,
    loglevel: "debug"
});

casper.start('http://jsfiddle.net/vhermL99/embedded/result/');

casper.on('remote.message', function(msg) {
    this.echo('remote message caught: ' + msg);
});

casper.withFrame(0, function () {
    casper.thenEvaluate( function () {
    var input = $('#input1');
    input.val("value set by jquery");
    input.focus();
    console.log("is input focussed: " + input.is(':focus'));
    });
    casper.then(function () {
    this.capture('before-sendkey.png');
    });
    casper.then(function () {
    casper.sendKeys('#input1', 'value set by sendKeys', {'reset': true, 'keepFocus': true});
    });
    casper.thenEvaluate(function () {
    console.log("is input focussed: " + $('#input1').is(':focus'));
    });
    casper.then(function () {
    this.capture('before-sendkey.png');
    });

});

casper.run();

期望在两种方法之一中.is(':focus')为真。

Answer 1

您可以在CasperJS中执行与浏览器控制台中相同的操作。您只需要知道在页面上下文中启动异步进程时就会脱离CasperJS的控制流。所以你需要在casper上下文中等待结果，因为现在你实际上有两个控制流。

casper.thenEvaluate(function () {
    $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').val("soft");

    setTimeout(function() { 
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').focus(); 
    }, 5000);

    setTimeout(function() { 
        $('input#PrincipalPolicyHolder_EmploymentOccupationDescription').keyup(); 
    }, 6000);
});
casper.wait(10000, function(){
    // waited 10 seconds, so do something with the autocomplete result
});

您也可以使用原生PhantomJS sendEvent功能尝试：

casper.then(function () {
    this.evaluate(function(){
        var el = document.querySelector('input#PrincipalPolicyHolder_EmploymentOccupationDescription');
        el.focus();
    });
    this.page.sendEvent('keypress', 'soft');
});
casper.wait(10000, function(){
    // waited 10 seconds, so do something with the autocomplete result
});

Answer 2

设置超时并不是一个好主意。

考虑到您使用的是最新的CasperJS版本，最好使用waitFor实用程序方法：http://casperjs.readthedocs.org/en/latest/modules/casper.html?highlight=waitfor#waitfor。

此外，您可以使用sendKeys方法模拟在文本输入中“键入”的行为：http://casperjs.readthedocs.org/en/latest/modules/casper.html?highlight=waitfor#sendkeys。

此致

通过使用jQuery专注于输入

2 个答案: