Question

请帮助您正确解决我的任务。

我有这个下拉菜单（看起来像下拉菜单），代码：

<div class="jcf-select-drop jcf-select-jcf-hidden jcf-unselectable"      style="position: absolute; top: 1331px; width: 376.125px; left: 285.75px;">
<div class="jcf-select-drop-content">
    <span class="jcf-list jcf-scroll-active">
        <span class="jcf-list-content" style="max-height: 369px; overflow: auto;">
            <ul>
                <li>
                    <span class="jcf-option" data-index="0">Afghanistan</span>
                </li>
                <li>
                    <span class="jcf-option" data-index="218">USA</span>
                </li>

简单测试：

let countryTest = $$("span.jcf-select.jcf-unselectable").first();
let USA = $("body > div.jcf-select-drop.jcf-select-jcf-hidden.jcf-    unselectable > div > span > span > ul > li:nth-child(217) > span");

countryTest.click();
USA.click();

我需要选择USA，但出现错误“失败：元素不可交互”。我可以到达阿富汗，但不能到达美国。我尝试过

browser.actions().mouseMove(USA).click().perform();

但这没有帮助。我可以使用data-index以某种方式单击USA-element吗？还是选择元素的正确方法是什么？以及如何缩短元素（by.css），因为它太长了。

Answer 1

我假设下拉列表包含国家的完整列表。因此，美国将不会排在榜首（看起来是218）。由于您的下拉列表一次只能显示有限的国家/地区，因此美国处于隐藏状态。大多数下拉菜单都允许输入文本来搜索国家。这也将匹配项限制为全部显示在屏幕上。然后，您可以单击美国（尽管其索引可能已更改）
例子

let countryTest = $$("span.jcf-select.jcf-unselectable").first();
let USA = $("body > div.jcf-select-drop.jcf-select-jcf-hidden.jcf-unselectable > div > span > span > ul > li:nth-child(217) > span");
//keep in mind USA selector will likely have changed after you do your search

countryTest.click();
countryTest.sendKeys('USA'); //likely will be a different element that you have to send keys to
USA.click();

Answer 2

尝试以下一种

const countryTest = element(by.cssContainingText('spna.jcf-list-content>ul>li>span', 'USA'));

因此countryTest.click()从下拉列表中选择“美国”。

希望它对您有帮助。

Answer 3

假设您已经解决了单击显示下拉列表的父元素的问题，是否尝试了以下操作？：

如果只有这两个选项：

var USA = element.all(by.css('.jcf-list-content ul li span')).last();

countryTest.click();
USA.click();

如果下拉菜单中有更多选项（美国为218？）：

var USA = element.all(by.css('.jcf-list-content ul li span')).get(218);

countryTest.click();
USA.click();

您可以尝试使用“ span”结尾或将其删除。我不确定哪个会工作。

最终，尝试这样的事情：

var USA = element(by.cssContainingText('li', 'USA')); 

countryTest.click();
USA.click();

希望有帮助。

元素在下拉菜单中不可交互。如何获得元素？

3 个答案: