在 Casperjs 的评估函数中执行 JQuery 或 JS 代码在建议字段中无法正常运行

Question

我几天前就遇到了这个问题，但找不到解决方案。希望你能帮助我。

我有以下登录表单：将括号想象为输入字段！

[选择组]

[输入用户]

[输入密码]

选择组是一个建议字段。如果您输入一个字符，它会在数据库中搜索包含该字符的组，并像下拉列表一样显示 ist。

我想要做的是在用 casperjs 输入一个字符后点击一个建议。

我在浏览器控制台中尝试了以下代码，对我来说效果很好：

  //type r into the select group
  document.querySelector('.ember-view.ember-text-field.form-control').value = 'r';


  //focus to input userfield to view suggestions in selectGroup field (normally it is shown without doing a focus but if you do it programmatically you need to focus to view the suggestions)   
  document.querySelector('#inputUser').focus()

  // the selector div.tt-dataset-0 p selcts the first suggestion
 setTimeout(function(){
    document.querySelector('div.tt-dataset-0 p').click()
  }, 200);

如前所述，在浏览器中执行此代码时会成功执行此结果，但如果我在 casperjs 的评估函数中使用它，则它不起作用。它只会将 r 写入建议框中，而不单击建议（我用屏幕截图检查过）。

我首先尝试用 casperjs 函数解决这个问题：

this.fillSelectors('form#loginForm', {
  '.ember-view.ember-text-field.form-control': 'r'
}, false);

this.mouse.click('div.tt-dataset-0 p');

但是这个功能不起作用。并且键入想要的组名也不适用于登录，因为登录需要一些与建议绑定的信息。

我尝试使用 DALEKJS（使用 phantomjs）（首先输入 r，然后单击带有 jquery 代码的建议）进行相同的尝试，并且效果很好。

希望这对你来说已经足够了。

干杯 izocan

Answer 1

可能是这样的：

this.sendKeys('.ember-view.ember-text-field.form-control', 'r', {keepFocus: true}); 

casper.waitUntilVisible("your auto-complete div",function(){
    this.click('div.tt-dataset-0 p');
});

如果您仍然收到超时错误，请尝试：：

this.sendKeys('.ember-view.ember-text-field.form-control', 'r', {keepFocus: true}); 

casper.wait(1000,function(){
    var fs = require('fs');
    fs.write('results.html', this.getPageContent(), 'w');
    this.capture('checkDropDownList.jpg', undefined, {
        format: 'jpg',
        quality: 75
    });
});

并检查 results.html 中的 html 或下拉列表是否出现在屏幕中。