Question

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

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

我尝试用JQuery模拟按键，但是this answer表示在e2e场景范围内没有加载JQuery。所以我按照他的建议（以及this answer的建议）来模拟按键：

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的答案（以及this one）通过以下方式提供对DSL内jQuery的访问：

var $ = $window.$;

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

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

这一定是另一个问题。但我确实找到了jQuery的提交功能来实现这个诀窍：

$(#the_form).submit();

Answer 1

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

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
});

Answer 2

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

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。

如何在Angular场景测试的输入中触发<enter>？</enter>

2 个答案: