javascript - 如何模拟点击谷歌地点自动完成结果？

Question

我很难在我的集成测试中与我的 google place 自动完成结果进行交互。

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

使用前面的代码，没有结果，输入没有被填充，建议的结果也没有被隐藏。

我如何模拟用户在自动完成输入中输入地址并继续点击建议结果之一的操作？

我在询问类似问题时遇到的一些资源:

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

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

Answer 1

我也有同样的疑问。在仔细研究了 Places Autocomplete 源代码后，我得出了以下结论，您可以将其包含在 CasperJS 测试中，或根据需要进行修改:

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

基本上，不要尝试模拟鼠标点击结果，使用向下箭头和 Enter 键选择第一个结果。

自动完成在触发前监听键按下和弹起事件，sendKeys 方法不发送，所以我们用 sendEvent 发送一些空键事件。然后，等待结果容器出现，并发送向下箭头和回车键事件以选择第一个结果。