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

自动完成输入元素没有附加点击事件，因此发送一次点击将不起作用。尝试一个keydown事件：

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

Answer 2

我有同样的问题。在Spot Autocomplete源代码中挖掘后，我想出了以下内容，您可以将其包含在CasperJS测试中，或根据需要进行修改：

https://gist.github.com/jadell/8b9aeca9f1cc738843eca3b4af1e1d32

JTextField

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

自动完成在触发之前侦听键向下和向上事件，sendKeys方法不发送，因此我们使用sendEvent发送一些空键事件。然后，等到出现resutls容器，然后发送向下箭头和输入键事件以选择第一个结果。

Answer 3

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

在自动填充输入中输入文字并确保保持焦点后，只需添加以下代码行，您的结果将由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);

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

如何模拟Google地方自动填充结果的点击？

3 个答案: