我如何 select 来自 google 的位置输入字段的项目

Question

你好，每当我输入 google 位置下拉菜单时，我无法验证它，我必须单击一个对我来说不存在的选项。

这就是我指的：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");

我试过发送向下箭头和回车，但不幸的是它没有用，请忽略睡眠，只有在那里我可以测试它：


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

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

Answer 1

伙计，我知道斗争。这是我解决这个问题的方法：

第一个问题是定位元素。定位器总是在变化。每个下拉菜单都单独附加到 HTML 并且在您关闭它后不会被删除。这就是为什么你不能只说 'use first occurrence that matches the locator'
第二个问题是实际逻辑。有时您键入，但位置下拉列表未预先填充。所以你必须重试。老实说，这是我的框架中最丑陋的解决方案，但它做了它应该做的事情

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

其中sendKeys只是自定义的打字方式，可以使用input.sendKeys()

和waitUntilElementHasAttribute是一种等待元素在属性中具有特定子字符串的方法。在这种情况下，location Dropdown Container（包装元素）不应具有包含 "display: none"

的 "style" 属性

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

我如何 select 来自 google 的位置输入字段的项目

How do I select an item from google's location input field

typescript

protractor