jquery - 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 block 中无效。

$('#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 调用，然后单击 Typeahead 中的第一个 a 元素。

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