如何模拟点击 google 地方自动完成结果？

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

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

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

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

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

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

Answer 1

自动完成输入元素没有附加点击事件，因此发送点击没有效果。尝试按键事件：

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

Answer 2

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

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

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

Answer 3

我也有同样的问题。在仔细研究了 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);
});

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

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

如何模拟点击 google 地方自动完成结果？

How to simulate a click on a google place autocomplete result?

javascript

integration-testing

google-maps

google-places-api

casperjs