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?

score 1 · Answer 1 · answered Nov 21 '13 at 08:04

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

answered Nov 21 '13 at 08:04

Flying Fisher

1,932
2
13
13

Thanks for your reply. The fourth parameter is the `viewArg` and usually just the `window` object. Changing it to my element doesn't change anything unfortunately. It just doesn't get pressed. – dan-lee Nov 21 '13 at 10:37
2

I now just use `\n` to send enter key, try this `this.sendKeys('#searchfield', 'some text\n');` – Flying Fisher Feb 11 '14 at 02:09

score 0 · Answer 2 · edited Jan 31 '14 at 03:10

0

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!

edited Jan 31 '14 at 03:10

kangax

38,898
13
99
135

answered Sep 29 '13 at 12:59

alonisser

11,542
21
85
139

Thanks for your answer and sorry for my delay. I figured that the problem is not on casper level, but that it doesn't even in normal browser window (Chrome). – dan-lee Nov 21 '13 at 10:36

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

2 Answers2