Tengo dificultades para interactuar con los resultados de autocompletar de Google Place en mis pruebas de integración.

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

Con el código anterior, no hay resultado y la entrada no se rellena ni se ocultan los resultados sugeridos.

¿Cómo puedo simular la acción de un usuario que ingresa una dirección en la entrada de autocompletar y procede a hacer clic en uno de los resultados sugeridos?

Algunos recursos que he encontrado haciendo preguntas similares:

¿Cómo "simular" un clic en un marcador de Google Maps?

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

4
Feek 11 may. 2016 a las 11:35

3 respuestas

La mejor respuesta

Tenía esta misma pregunta Después de buscar en el código fuente de Autocompletar de Places, se me ocurrió lo siguiente, que puede incluir en su prueba CasperJS, o modificar según sea necesario:

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

Básicamente, no intente simular un clic del mouse sobre el resultado, use las teclas de flecha hacia abajo e Intro para seleccionar el primer resultado.

El autocompletado escucha los eventos de tecla hacia abajo y hacia arriba antes de la activación, que el método sendKeys no envía, por lo que enviamos algunos eventos de clave nula con sendEvent. Luego, espere hasta que aparezca el contenedor de resultados y envíe la flecha hacia abajo e ingrese los eventos clave para seleccionar el primer resultado.

2
Josh Adell 9 jun. 2016 a las 18:45

No pude simular el clic real de un resultado de autocompletar, sin embargo, fue posible lograr el mismo resultado utilizando la flecha hacia abajo y presionando las teclas.

Después de escribir su texto en la entrada de autocompletar y asegurarse de mantener el foco, simplemente incluya las siguientes líneas de código y la API de autocompletar de Google Places establecerá correctamente su resultado.

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

Ese código seleccionará el primer resultado de autocompletar.

0
Feek 31 may. 2016 a las 08:03

El elemento de entrada de autocompletar no tiene un evento de clic adjunto, por lo que enviarle un clic no tendrá ningún efecto. Pruebe un evento keydown:

casper.page.sendEvent('keydown', someKey);
2
Artjom B. 18 may. 2016 a las 18:19