如何从谷歌的位置输入字段中选择一个项目 [英] How do I select an item from google's location input field

问题描述

你好，每当我输入谷歌位置下拉菜单时，我都无法验证它，我必须点击一个不存在的选项.

这就是我所指的:https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/places-autocomplete

let modal1 = element(by.className('classname'));await modal1.element(by.css('[role = "combobox"]')).sendKeys("location");

我试过发送一个向下的箭头和一个回车，但不幸的是它不起作用，请忽略睡眠，只有在那里我才能测试它:

<预><代码>等待modal1.element(by.css('[role = "combobox"]')).sendKeys(protractor.Key.DOWN_ARROW);浏览器睡眠(2000)；await modal1.element(by.css('[role = "combobox"]')).sendKeys(protractor.Key.ENTER);浏览器睡眠(2000)；

我不想将鼠标移动到某个位置.并点击我认为这是一个相当糟糕的解决方案，如果有人知道一些优雅的东西，请发布

解决方案

伙计，我知道挣扎.这是我解决这个问题的方法:

1. 第一个问题是定位元素.定位器总是在变化.每个下拉菜单都单独附加到 HTML，关闭后不会删除.这就是为什么你不能只说使用与定位符匹配的第一次出现"
2. 第二个问题是实际逻辑.有时您键入，并且位置下拉列表未预先填充.所以你必须重试.老实说，这是我框架中最丑陋的解决方案，但它做了它应该做的

class Common {构造函数(){/*** 元素*/this.$locationDropdownContainer = element.all(by.xpath('//div[contains(@class,"pac-container") and not(contains(@style,"width: 0px")) and not(contains(@style,"display: none"))]')).last();this.$locationInput = $("#location");this.$$locationOptions = $$(".pac-container .pac-item .pac-item-query");}/*** 输入提供的位置并选择第一个选项* @param 条件* @param [retry=true] 失败时重试* @返回*/异步 enterLocation(标准，重试 = 真){日志(`enterLocation(${criteria},${retry})`);等待 browser.sleep(350);等待 sendKeys(this.$locationInput, criteria);等待 browser.sleep(400);尝试 {等待 browser.wait(ExpectedConditions.visibilityOf(this.$locationDropdownContainer));}赶上(e){等待 this.$locationInput.click();尝试 {等待 browser.wait(ExpectedConditions.visibilityOf(this.$locationDropdownContainer));}赶上(e){如果(重试){this.enterLocation(标准，假)；}}}等待这个.$$locationOptions.get(0).click();等待 browser.sleep(350);}}

其中 sendKeys 只是一个自定义的输入方法，您可以使用 input.sendKeys()

而 waitUntilElementHasAttribute 是一种等待元素在属性中具有特定子字符串的方法.在这种情况下，位置下拉容器(包装元素)不应具有包含display: none"的style"属性

从 JSDoc 描述中可以看出我选择了第一个选项，但有可能找出一种选择特定选项的方法

Helo, Whenever I input to the google location dropdown, I cannot validate it, I have to click on an option which is not present for me.

this is what I'm referring to: https://developers-dot-devsite-v2-prod.appspot.com/maps/documentation/javascript/examples/places-autocomplete

let modal1 = element(by.className('classname'));

await modal1.element(by.css('[role = "combobox"]')).sendKeys("location");

I have tried sending a down arrow and an enter, but unfortunately it did not work, please ignore the sleep, only there so i can test it:

   await modal1.element(by.css('[role = "combobox"]')).sendKeys(protractor.Key.DOWN_ARROW);
   browser.sleep(2000);
   await modal1.element(by.css('[role = "combobox"]')).sendKeys(protractor.Key.ENTER);
   browser.sleep(2000);

I don't want to move my mouse to a certain pos. and click as I see that as a rather bad solution, if anyone knows something elegant please post it

解决方案

Man, I know the struggle. Here is how I solved this:

1. First problem was to locate the elements. Locators always change. Each dropdown is attached separately to the HTML and not removed after you close it. This is why you can't just say 'use first occurrence that matches the locator'
2. Second problem was actual logic. Sometimes you type, and the location dropdown is not prepopulated. So you have to retry. To be completely honest, this is the ugliest solution in my frameworks, but it does what it supposed to do

class Common {

    constructor() {

        /**
         * Elements
         */
        this.$locationDropdownContainer = element.all(by.xpath('//div[contains(@class,"pac-container") and not(contains(@style,"width: 0px")) and not(contains(@style,"display: none"))]')).last();
        this.$locationInput = $("#location");
        this.$$locationOptions = $$(".pac-container .pac-item .pac-item-query");
    }

    /**
     * Types provided location and selects the first option
     * @param criteria
     * @param [retry=true] retry on failure
     * @returns
     */
    async enterLocation(criteria, retry = true) {

        log(`enterLocation(${criteria},${retry})`);
        await browser.sleep(350);
        await sendKeys(this.$locationInput, criteria);
        await browser.sleep(400);
        try {
            await browser.wait(ExpectedConditions.visibilityOf(this.$locationDropdownContainer));
        } catch (e) {
            await this.$locationInput.click();
            try {
                await browser.wait(ExpectedConditions.visibilityOf(this.$locationDropdownContainer));
            } catch (e) {
                if (retry) {
                    this.enterLocation(criteria, false);
                }
            }
        }
        await this.$$locationOptions.get(0).click();
        await browser.sleep(350);
    }
}

Where sendKeys is just a custom method for typing, you can use input.sendKeys()

And waitUntilElementHasAttribute is a method to wait until an element has certain substring in an attribute. In this case, location Dropdown Container (wrapper element) should not have "style" attribute containing "display: none"

As can be seen from JSDoc description I select first option, but it's possible to figure out a way for selecting particular one

这篇关于如何从谷歌的位置输入字段中选择一个项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！