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

Question

我正在努力在我的集成测试中与我的 google 地方自动完成结果进行交互。

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

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

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

我遇到的一些提出类似问题的资源：

如何“模拟”点击 Google 地图标记？

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 发送一些空按键事件。然后，等待结果容器出现，并发送向下箭头和 Enter 键事件以选择第一个结果。