Элемент не взаимодействует в выпадающем списке.Как получить элемент?

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

Мне нужно выбрать США, но есть ошибка «Ошибка: элемент не взаимодействует».Я могу получить Афганистан, но не США .. Я пытался

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

, но это не помогло.Могу ли я как-то нажать на элемент США, используя индекс данных?Или как правильно выбрать элемент?И как можно укоротить элемент (by.css), потому что он слишком длинный ..

Answer 1

Попробуйте следующее

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

Так что countryTest.click() выбирает США из выпадающего списка.

надеюсь, что это поможет вам.

Answer 2

Предполагая, что вы уже решили щелкнуть родительский элемент, который отображает раскрывающийся список, пробовали ли вы выполнить следующие действия?больше опций (США - 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();

Надеюсь, это поможет.

Answer 3

Я предполагаю, что раскрывающийся список содержит полный список стран.Таким образом, США не будут лидировать в списке (номер 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();