how do I send an escape key press (to close a modal) with CasperJS?

Question

Testing a modal dialog with casper:

.then(function() {
   this.click(variables.configButton);
}).then(function() {
  this.capture('./test/screencaps/edit-afterClickFlyout1.png');
   test.assertVisible('#addDataDialog');
}).then(function() {
   // send ESC key, how? 
}).then(function() {
  this.capture('./test/screencaps/edit-afterClickFlyout2.png');
   test.assertNotVisible('#addDataDialog');
}).run(function() {
   test.done();
});

This is an angular modal, so pressing ESC will close it. Casper has sendKeys but:

The currently supported HTMLElements that can receive keyboard events from sendKeys are , , and any HTMLElement with attribute contenteditable="true".

Kind of a problem if I don't have any text inputs on the page. I could add one in or set contenteditable on some other control, but that means I'm modifying the page to make the test pass, which isn't good.

(I solved the problem by giving the Cancel link an id and using this.click on it, but I really shouldn't have to modify my markup to make a test pass)

How can I just send a simple keypress with casper?

Answer 1

The way to go is send phantomjs special keys.

casper.then(function() {    
    test.comment('Send Esc key');
    this.sendKeys('#contact-us-modal', casper.page.event.key.Escape);
});

Here is the list of special keys available in casper.page.event.key

Here is the sendKeys documentation link.

Answer 2

If you have jQuery in your page you could use this code to trigger the key, but it might not work due to security considerations. See this post.

casper.thenEvaluate(function(){
    var esc = $.Event("keydown", { keyCode: 27 });
    $("body").trigger(esc);​
});

I'm sure there are also non-jQuery versions.