CasperJS: swallows special keys like Enter?

Question

I'm trying to write a test using CasperJS for a scenario where pressing Enter in an input is the trigger for the page to do something with the text otherwise typed into the input.

An abbreviated/simplified version of the CasperJS test:

casper.start('http://localhost:3000/input-demo', function() {
  this.sendKeys('#demo-input', 'demo text');
  this.sendKeys('#demo-input', '\uE007');
  this.test.assertEquals(this.getHTML('#stage'), 'input demo');
});

casper.run();

(Where we run it as casperjs test this-test.js)

I've verified that sendKeys is getting the text into the input, but that text never shows up in the #stage element. A "vanilla" PhantomJS implementation of the keypress works fine, where webpage.sendEvent('keypress', '\uE007') causes the on-page event handler to fire. Looking at the source of casper.sendKeys, I see that it is delegating to the sendEvent on the Casper instance's PhantomJS instance (i.e., line 1613 in the current version of casper.js).

Any ideas? Anyone gotten these keys to work in a CasperJS test?

Answer 1

You might want to add {keepFocus: true} to the first sendKeys call. If you see the source code, without adding a keepFocus, it is blurring the text area and that means your second sendKeys call will not accept the keypress.

This seems to work.

casper.start('http://localhost:3000/input-demo', function() {
  this.sendKeys('#demo-input', 'demo text', {keepFocus: true});
  this.sendKeys('#demo-input', casper.page.event.key.Enter , {keepFocus: true});
  this.test.assertEquals(this.getHTML('#stage'), 'input demo');
});

casper.run();