How to simulate a click on a google place autocomplete result?

Question

I am struggling to interact with my google place autocomplete results within my integration tests.

var placeSelector = '.pac-container .pac-item:first-child';

exports.runTest = function(test) {
    casper.waitForSelector('input.street-address'); // wait for page to load
    casper.sendKeys('input.street-address', 'fake address here', {keepFocus: true});

    casper.waitUntilVisible(placeSelector);

    casper.then(function() {
        casper.click(placeSelector); // THIS DOES NOT DO ANYTHING

        // if its possible to trigger the event in the context of the page, I 
        // could probably do so. However, I've scoured google's docs and cannot find the 
        // event that is fired when a place is clicked upon.
        casper.evaluate(function() {
            //google.maps.places.Autocomplete.event.trigger(???);
        }); 
    });

    var formVal;
    casper.then(function() {
        formVal = casper.evaluate(function () {
            return $('input.street-address').val();
        });
    });
};

With the previous code, there is no result and the input is not populated nor are the suggested results hidden.

How can I simulate the action of a user entering in an address to the autocomplete input and proceeding to click upon one of the suggested results?

A few resources that I have come across asking similar questions:

How to "simulate" a click on a Google Maps Marker?

https://developers.google.com/maps/documentation/javascript/events?csw=1#EventsOverview

Seow

Can you provide a full testing script? Also, which version of PhantomJS are you using? – Interlard

@ArtjomB. I am using casperjs 1.1.1 and I believe PhantomJS 2.1.7 . A full testing script would just be a html page with google autocomplete initialized onto an input with the selector 'input.street-address' – Seow

Answer 1

I had this same question. After digging around in the Places Autocomplete source code, I came up with the following, which you can include in your CasperJS test, or modify as needed:

https://gist.github.com/jadell/8b9aeca9f1cc738843eca3b4af1e1d32

casper.then(function () {
    casper.sendKeys('input.street-address', 'fake address here', { keepFocus: true });
    casper.page.sendEvent('keydown', 0);
    casper.page.sendEvent('keyup', 0);
});
casper.waitUntilVisible('.pac-container .pac-item', function () {
    casper.page.sendEvent('keydown', casper.page.event.key.Down);
    casper.page.sendEvent('keydown', casper.page.event.key.Enter);
});

Basically, don't try to simulate a mouse click on the result, use Down Arrow and Enter keys to select the first result.

The autocomplete listens for key down and up events before triggering, which the sendKeys method does not send, so we send some null key events with sendEvent. Then, wait until the resutls container appears, and send Down Arrow and Enter key events to select the first result.

Messuage

I had to add: casper.wait(1000, function () { casper.page.sendEvent('keydown', 0); casper.page.sendEvent('keyup', 0); }); to make it working in my case! – Dogger

Answer 2

The autocomplete input element does not have a click event attached, so sending it a click will have no effect. Try a keydown event:

casper.page.sendEvent('keydown', someKey);

Picasso

Thank you for your answer, however I am not attempting to type into the input box. That I accomplished already. I am struggling with clicking on one of the suggested results. – Seow

Answer 3

I was unable to simulate the actual clicking of an autocomplete result, however it was possible to accomplish the same result by utilizing the down arrow and enter keypresses.

After typing your text into the autocomplete input and being sure to keep the focus, simply include the following lines of code and your result will be properly set by the google places autocomplete API

casper.then(function() {
    casper.page.sendEvent('keypress', casper.page.event.key.Down);
    casper.page.sendEvent('keypress', casper.page.event.key.Enter);
});

casper.thenEvaluate(function() {
    $(inputSelector).blur();
}, placeSelector, inputSelector);

That code will select the first autocomplete result.

Seow