We Keep Coding

Fill an input field that is not of type text and that triggers events in CasperJS

I have to do automated tests on a website and I want to use CasperJS to learn. For proprietary reasons I can not give too much code.
Here is the example of the input that I am trying to fill:
<input data-bind="value: firstname, valueUpdate: ['blur'], css: {valid:(firstname.isValid() )} " title="" class="valid" aria-required="true" id="firstname" name="firstname">
As you can see, this input is not of type text and has no value attribute. Therefore, I can not use the casper.fill() method. Furthermore, if I enter the web page scope using evaluate() and change the input value using document.querySelector, the change will not be permanent as of the events attached to the text change on the input will not be triggered.
Here is my code:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.evaluate(function(testname){
document.querySelector('#firstname').value = testname;
}, testname);
});
If I capture the screen right after, I will see my text written in the input box. However, if I wait 500ms and take another capture, the text is gone as, I suppose, the events are triggered or just cleaned because it actually failed to trigger correctly.
The events attached to the input are of Blur, Change and Keypress.
Using CasperJS, how could I go to the lowest level possible to mimic a user using his keyboard and fully use the website's functionalities already in place?
The whole point of those tests are to work with what is in place. The idea is to not have to manually go through the JavaScript of the web site.

That's exactly what the casper.sendKeys(selector, keys) function is for which will send native keypresses and (hopefully) trigger the events on that text element:
this.waitForSelector('#memberTitle', function then(){
var testname = 'thisIsNotPermanent';
this.sendKeys('#firstname', testname);
}).wait(20, function(){
this.capture('screenshot.png');
});
<input> elements without a type attribute default to Text type.

This answer is here to complete the question from another angle. As Artjom B. mentionned, the correct way to fill an input and to trigger its events is by using the sendKeys() function. However, if you ever have a case, like mine, where the events will not trigger or will take a certain amount of time, know that you can trigger those manually.
If you use the firefox inspector tool, you will see that your input or tag will have an event attached to it marked as ev. If you select it, you will have a breakdown of all the events, in order, that are triggered.
You can see that the jQuery click() event will be called. In casperjs, from the evaluate scope you can now do this :
this.evaluate(function(){
$(".discard-answer").click();
})
From there, you can chain jQuery events, like in my case where I had to .blur().change().click();
It is important to know if the event is jQuery or not.
Hope this helps.

How to change Angularjs xeditable text/textarea behavior?

I use angularjs and xeditable in my application. I would like to change the behaviour of editable textarea and editable text to allow the validation when the user click outside.
It will be better with an example :
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>
With this code, we can't see the buttons to validate and to cancel our choice. Moroever the enter key doesn't validate, so it's impossible for the user to validate his choice.
What I want to do is changing the behaviour of the enter key to validate the new text. And I want to add the possibility for the user to change text and when he click outsite the textarea, the new text will be save.
The problem is I have no idea of how to do that even after reading all the documentation of xeditable and I didn't find the solution on any forum.
Do you have an idea of how can I do that ?
Thank you in advance

You can add the blur attribute with submit value and couple it with onbeforesave attribute:
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>
Example Fiddle: http://jsfiddle.net/NfPcH/8269/

How to click on a input field and fire event in knockoutjs and test it?

What I'm trying to achieve is that when user clicks on the input field, I would like the search bar to be on top of the page. I'm using hasFocus but it only works the first time the page is loaded after I click the search bar again the event is not called.
<div class=".home-search-panel">
<input type="search" data-bind="hasFocus: searchInputFocus()" name="q" placeholder="#Global.SearchPlaceholderCopy" value="#Request.QueryString["q"]" maxlength="150" class="input-product-search" autocomplete="off" />
</div>
And here's my knockoutJs code
var searchInputFocus = function () {
document.body.scrollTop = zepto('.home-search-panel').offset().top;
};
And I think this code is using DOM manipulation which is harder to test without using jquery-jasmine how to do something like this in a knockout way so i can properly test it?

My thoughts...
You should remove the () after searchInputFocus(), it should just be searchInputFocus
The hasFocus binding needs to return true or false. hasFocus doesn't check if a control has focus, it makes the control have focus if the binding parameter evaluates to true. So, if searchInputFocus returns true, then knockout will set the input box to have focus. There is a well explained example in the documentation that I really can't make any better. :-)
It sounds like what you really want is the event binding: data-bind="event: { onfocus: searchInputFocus}" In this case, the searchInputFocus function will be called when the input box has focus.
The click binding as suggested in the comments should work too. It may not have worked for you because you need to remove the () after searchInputFocus as mentioned in point 1 above. Although the click won't fire if someone tabs to the field.
Hope that helps.

How to detect rightclick + cut/delete/paste/undo in javascript?

In my JavaScript/jQuery code, I have a text field that I run an event when the text changes using the keyup event. However currently I only account for changes done using the keyboard.
Is there a way I can detect when a text field text changed because the user did a right click and clicked on cut or delete or paste or undo?
Note: This needs to work in IE9, and preferably Firefox and chrome, but definitely needs to work in IE9.
Thanks

jsFiddle Demo
Use jquery to bind an input event to the element like this:
$('#myInput').bind('input',function(){
//use this for the input element when input is made
var inputValue = this.value;//for example
});

As a start, this is not really the correct way to do it. But if you react on the mouseout event of a input you will most likely get it to behave the way you want.
$('#input').mouseout(function(){
if($('#input').is(":focus"))
console.log("Right-click");
});
Though it is to note that this might not work as well on textareas since they tend to be larger and the mouse might not be outside of it when the contextmenu has been clicked.
Note: Other than #Travis J that react to all interaction, this will (probably) only trigger an event on rightclick (and regular mouseout).

Can you show/hide the iPad Safari keyboard using JavaScript?

Is it possible to control the display i.e.(show/hide) of keyboard in iPad Safari through code?
I have 2 form fields;
1. Text box (say Name)
2. Select list/Dropdown (Say State)
My question is when user moves focus from Name to State, the keyboard is still there..Why is it so and how can I hide the keyboard when focus moves to dropdown?
Thank you.

I just ran into a very similar problem, not sure if my solution will work for you.
In my case, I have a text input inside a form. On submit, I'm using e.preventDefault() to stop the page from navigating. I believe this was also having the effect of stopping the default action of hiding the keyboard.
To solve this, I added an explicit input.blur() when the form is submitted. This seemed to be enough for safari to remove the keyboard.
Hope this helps!

I had the same issue. I had a form were keyboard should be collapsed when type out of the field (not native behavior on ipad) and when focus select field. The only solution for me was creation of hidden input
<input type="hidden" id="blurInput" />
and javascript code handler for focus event:
$element = $(event.target);
if($element.is('select')) {
$('#blurInput').blur();
$element.focus();
}
In case you want just to blur input field another solution works perfect, but between input and select it fails
document.activeElement.blur();
$('input').blur();