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

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.

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);