How to call <enter> in an Angular script input script?

Question

I am writing tests using the Angular Scenario test runner. In the traditional form, I can enter text in the input, but I need to press Enter to execute the request, and the button is not pressed. Of course, there is an easy way to do this, but I don’t know what it is.

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

I tried to simulate a keystroke using jQuery, but as this answer indicates that jQuery is not loading into the e2e scripting area. So I followed his advice (as well as this answer ) to simulate a keystroke:

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

But Angular answers this:

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

Update

I realized that a very simple workaround is to include hidden input in my form:

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

Then in the script: element('#search-submit').click(); does what is necessary.

For a cleaner solution that does not require modification of HTML for testing, @ florian-f answer (as well as this one ) provides access to jQuery in DSL via:

 var $ = $window.$; 

which can be used there or passed to a callback. However, even with this access, when I hit enter, I was unable to submit my form as follows:

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

This should be another problem. But I found a jQuery submit function to do the trick:

 $(#the_form).submit(); 

Answer 1

You can access the jQuery instance for the application (runner in 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(); }); }; }); 

Then you can call the jQuery trigger method in your test:

 appElement('yourSelector', function(elm) { elm.trigger('enter');//or keypress }); 

Answer 2

There is another opportunity to trigger a key event. Although your first approach

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

angular will block, this one

 element(<selector>).query(function($el, done) { var event = new CustomEvent('keyup'); event.keyCode = 13; $el.val(2); $el.get(0).dispatchEvent(event); done(); }); 

will pass and fire the keyup event on the element specified by the selector (keyCode = 13 = Enter Key). See https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent for more details.