4

我正在使用 Angular Scenario 测试运行器编写测试。在传统表单中，我可以在输入中输入文本，但我需要按 Enter 来执行查询，并且没有可以单击的按钮。当然有一些简单的方法可以做到这一点，但我不知道它是什么。

input('query').enter('foo bar');
// ... now what?

我试图用 JQuery 模拟按键，但由于这个答案表明 JQuery 未加载到 e2e 场景范围内。所以我按照他的建议（以及这个答案的建议）来模拟按键：

element('#search_input').query(function(el, done){
    var press = document.createEvent('keypress');
    press.which = 13;
    press.trigger(evt);
    done();
});

但是对于这个 Angular 回复：

NotSupportedError: DOM Exception 9
Error: The implementation did not support the requested type of object or operation.

更新

我意识到一个非常简单的解决方法是在我的表单中包含一个隐藏的提交输入：

<input id="search-submit" type="submit" style="display:none;">

然后在场景中：element('#search-submit').click();做需要的事情。

对于不涉及为了测试而修改 HTML 的更纯粹的解决方案，@florian-f 的答案（以及这个答案）通过以下方式在 DSL 中提供对 jQuery 的访问：

var $ = $window.$;

可以在那里使用或传递给回调。但是，即使在触发输入时使用此访问权限，我也无法通过以下方式提交表单：

$(selector).trigger($.Event('keypress', { which: 13 }));

这一定是另一个问题。但我确实找到了 jQuery 的提交函数来解决这个问题：

$(#the_form).submit();
4

2 回答 2

3

您可以访问 jQuery 的应用程序（iframe 中的运行器）实例：

angular.scenario.dsl('appElement', function() {
  return function(selector, fn) {
    return this.addFutureAction('element ' + selector, function($window, $document, done) {
      fn.call(this, $window.angular.element(selector));
      done();
    });
  };
});

然后你可以在你的测试中调用jQuery的触发方法：

appElement('yourSelector', function(elm) {
  elm.trigger('enter');//or keypress
});
于 2013-05-29T07:39:08.320 回答
0

还有另一种可能触发关键事件。虽然你的第一种方法

element('#search_input').query(function(el, done){
    var press = document.createEvent('keypress');
    press.which = 13;
    press.trigger(evt);
    done();
});

会被棱角挡住，这个

element(<selector>).query(function($el, done) {
    var event = new CustomEvent('keyup');

    event.keyCode = 13;
    $el.val(2);
    $el.get(0).dispatchEvent(event);

    done();
});

将在选择器指定的元素上传递并触发 keyup 事件（keyCode = 13 = Enter Key）。有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent。

于 2013-11-27T22:53:05.773 回答