ad-hockery: /ad·hok'@r·ee/, n.
Gratuitous assumptions... which lead to the appearance of semi-intelligent behavior but are in fact entirely arbitrary. Jargon File

Testing Angular forms with Casper

When testing an Angular application using Casper I found that the binding between inputs and model didn’t seem to be happening when I filled in form fields. I used Casper’s fill method but found that the Angular form validation was rejecting any required fields as though they were still blank. With some debugging I was able to see that the $scope variables indeed weren’t getting updated.

At first I figured I might need to trigger a change, blur or keyup event or something but after some digging in the Angular source I figured out that Angular uses a custom input event to trigger a refresh of the model. When Casper sets the form field values the event isn’t triggered so Angular doesn’t "see" the change.

To work around this I just overrode the fill method such that after writing a value to each field it triggers the input event as well:

casper.fill = (selector, values, submit = false) ->
    @evaluate (selector, values) ->
        $("#{selector} [name='#{name}']").val(value).trigger('input') for name, value of values
        selector: selector
        values: values

Now everything works just fine.

If you want to see this code in context it’s part of my Grails Angular Scaffolding plugin. The fill override is in a Coffeescript extension file.

This technique should also be applicable to any other Phantom based tool such as Webspecter.

Web Statistics