如何模拟对 google place 自动完成结果的点击？答案

【问题标题】：How to simulate a click on a google place autocomplete result?如何模拟对 google place 自动完成结果的点击？
【发布时间】：2016-05-11 08:35:54
【问题描述】：

我很难在集成测试中与我的 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

【问题讨论】：

能否提供完整的测试脚本？另外，您使用的是哪个版本的 PhantomJS？
@ArtjomB。我正在使用 casperjs 1.1.1 并且我相信 PhantomJS 2.1.7 。一个完整的测试脚本将只是一个带有谷歌自动完成功能的 html 页面，该页面使用选择器“input.street-address”进行了初始化

标签： javascript google-maps integration-testing google-places-api casperjs

【解决方案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 发送一些空键事件。然后，等到resutls 容器出现，然后发送 Down Arrow 和 Enter 键事件来选择第一个结果。

【讨论】：

我必须添加： casper.wait(1000, function () { casper.page.sendEvent('keydown', 0); casper.page.sendEvent('keyup', 0); } );让它在我的情况下工作！

【解决方案2】：

自动完成输入元素没有附加点击事件，因此向其发送点击将无效。尝试 keydown 事件：

casper.page.sendEvent('keydown', someKey);

【讨论】：

感谢您的回答，但我并没有尝试在输入框中输入内容。我已经完成了。我正在努力点击建议的结果之一。

【解决方案3】：

我无法模拟自动完成结果的实际点击，但是可以通过使用向下箭头并输入按键来实现相同的结果。

在自动完成输入中输入您的文本并确保保持焦点后，只需包含以下代码行，您的结果将由 google places 自动完成 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);

该代码将选择第一个自动完成结果。

【讨论】：