2

我在使用 casperjs 与 jquery 自动完成输入框交互时遇到问题。我尝试了许多不同的方法，但是当弹出选项列表时，我似乎无法选择自动完成选项。

我的代码如下： 

casper.thenEvaluate(function() {
  $('#myInput').val('cars');  // fill in the text box
  $('#myInput').blur();  // should trigger the autocomplete ajax call
  $('.ui-autocomplete li.ui-menu-item:nth-of-type(1)').click(); // should click the first item in the list
});

// take a picture to make sure it worked
casper.then(function() {
  this.captureSelector('pics/test1.png', '#theForm');
});

这根本不起作用，即使它看起来应该如此。通过玩弄它，我发现触发向下箭头按键几次会触发自动完成显示，所以这是一个更接近工作的版本。这在浏览器中有效，但由于某种原因不适用于 casper.thenEvaluate 块。

$('#myInput').val('cars');  // fill in the text box
var e = jQuery.Event("keydown");
e.which = 40; // press down arrow a few times, not sure why this works
$("#myInput").trigger(e);
$("#myInput").trigger(e);
$('.ui-autocomplete li.ui-menu-item:nth-of-type(1)').click();
4

2 回答 2

5

这不是基于 jQuery UI 的自动完成，而是基于与 Bootstrap 相关的 Typeahead，但机制应该是相同的。

我在以下方面取得了成功：

casper.sendKeys("#field_departure_airport", 'a', {keepFocus: true});
casper.waitUntilVisible(".typeahead", function() {
    casper.click(".typeahead>li:nth-child(1)>a");
    test.assertField("departure_airport", "A. L. Mangham Jr. Regional Airport(Nacogdoches, Texas, United States) [OCH]"); 
});

这在一个casper.then()函数中运行，sendKeys通过 ID 选择一个字段并将“a”传递给它。很重要，keepFocus否则插入文本后会取消选择输入！

等待.typeahead出现，即等待对服务器的 AJAX 调用，然后单击aTypeahead 中的第一个元素。

最后测试该字段的值。请注意，字段选择器是它的名称，而不是 CSS3 选择器。

于 2014-02-09T19:59:56.853 回答
2

我尝试了很多不同的解决方案，但都不起作用，或者并非总是如此。我终于找到了一个看起来很健壮的：

/*
 * You have to specify the input selector, the text you want to write in (which activates the auto-completion), and the text on which you want to click
 */
casper.fillAutoCompletion = function (inputSelector, text, autoCompleteText) {
    //keepfocus : true to keep the auto-completion opened
    this.sendKeys(inputSelector, text, {keepFocus: true});
    //wait for the auto-complete block to appear
    this.waitUntilVisible("[class*='ui-autocomplete']", function() {
        var x = require('casper').selectXPath
            ,xpath = "//*[contains(text(),'" + autoCompleteText + "')]"
            ;
    //move on the wanted element and click
    this.mouse.move(x(xpath));
    this.click(x(xpath));
    });
};

或者如果你不喜欢扩展，js 函数：

var fillAutoCompletion = function (inputSelector, text, autoCompleteText) {
    //keepfocus : true to keep the auto-completion opened
    casper.sendKeys(inputSelector, text, {keepFocus: true});
    //wait for the auto-complete block to appear
    casper.waitUntilVisible("[class*='ui-autocomplete']", function() {
        var x = require('casper').selectXPath
            ,xpath = "//*[contains(text(),'" + autoCompleteText + "')]"
            ;
    //move on the wanted element and click
    casper.mouse.move(x(xpath));
    casper.click(x(xpath));
    });
};

叫它 ：

.thenOpen("yourUrl", function(){
    this.fillAutoCompletion(".jODMainSearch","Ren", "Rennes");//extending
    fillAutoCompletion(".jODMainSearch","Par", "Paris");//js
})

诀窍（对我来说）是在点击它之前在想要的元素上使用 mouse.move() （激活它的选择），否则它不起作用。

于 2014-05-02T13:38:36.110 回答