Casperjs:测试jquery自动完成

Question

我无法与带有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();

Answer 1

这不是基于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选择器.