I am struggling to interact with my google place autoplete 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.Autoplete.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 autoplete input and proceeding to click upon one of the suggested results?

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

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

#EventsOverview

I am struggling to interact with my google place autoplete 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.Autoplete.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 autoplete input and proceeding to click upon one of the suggested results?

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

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

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

• javascript
• google-maps
• integration-testing
• google-places-api
• casperjs

• 1 Can you provide a full testing script? Also, which version of PhantomJS are you using? – Artjom B. Commented May 16, 2016 at 10:44
• @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 autoplete initialized onto an input with the selector 'input.street-address' – Feek Commented May 21, 2016 at 0:12

3 Answers 3

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

https://gist.github./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 autoplete 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.

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

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

After typing your text into the autoplete 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 autoplete 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 autoplete result.