casper.js: press key "enter" in an ExtJs input field

Question

I have an ExtJs text field on a page. I am filling it with some value in casper.js, which works fine.
Then I want to focus this field and press the Enter key, as there is no <form> around it to submit.

What I tried was:

casper.then(function() {
  // the text field is filled with the string
  this.sendKeys('#searchfield', 'some text');

  this.evaluate(function() {
    // this does not put the field in focus        
    document.querySelector('#searchfield').focus();

    // so 'pressing' enter has no effect at all
    var evt = document.createEvent('KeyboardEvent');
    evt.initKeyboardEvent('keypress', true, true, window, 0, 0, 0, 0, 0, 13);
    document.dispatchEvent(evt);
  });
});

Do you have any idea how to accomplish this?

Answer 1

your code

evt.initKeyboardEvent('keypress', true, true, window, 0, 0, 0, 0, 0, 13);

Look at the fourth param, I guess it should be the trigger element. Here should be document.querySelector('#searchfield') .

One hint: In casper evaluate, return a true in final, and then you will get null if there is any error in evaluate.

var result = this.evaluate(function(){ /*code is here*/ return true;})

check the result, if success

Answer 2

2 suggestions:

The first: try this.thenEvaluate instead of evaluate. then is needed to make sure the async sequance works correctly.

The second: this maybe a client js issue. In a browser you could just check the js console, But not here. so you should add a little debugging helper.

casper.on('log.message', function(msg){
  console.log(msg);
}

Which would transfer your remote console message to you console. now you can debug the remote context with console.log() and see where (and if) It breaks.

you should also set verbose=true and logLevel="debug" for this to work.

good luck!