Element not interactable in dropdown. How to get an element? - jasmine

Question

Help please to get a correct solution of my task.
I have this dropdown (it looks like dropdown) with code:
<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>
And simple test:
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();
I need to select USA, but have an error "Failed: element not interactable". I can get Afghanistan, but not USA.. I tried
browser.actions().mouseMove(USA).click().perform();
but it isn't help.
Can I somehow click on USA-element using data-index? Or what is correct way to choose the element?
And how is there a way to make shorter the element(by.css), because it's too long..

Answer 1

I am assuming that the dropdown contains a full list of countries. As such, USA will not be high on the list (number 218 it looks like). Because your dropdown will only display a limited amount of countries at once, USA is hidden. Most dropdowns allow text to be entered to search for a country. This also limits the matches to all be displayed on the screen. You can then click on USA (although its index may have changed)
Example
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

Try the below one
const countryTest = element(by.cssContainingText('spna.jcf-list-content>ul>li>span', 'USA'));
So countryTest.click() selects USA from the dropDown.
hope it helps you.

Answer 3

Assuming you already solved clicking a parent element that displays the dropdown, have you tried the following?:
If you have just those 2 options:
var USA = element.all(by.css('.jcf-list-content ul li span')).last();
countryTest.click();
USA.click();
If the dropdown has more options (USA being 218?):
var USA = element.all(by.css('.jcf-list-content ul li span')).get(218);
countryTest.click();
USA.click();
You can try with the 'span' at the end, or removing it. I'm not sure which one will work.
Ultimately, try something like this:
var USA = element(by.cssContainingText('li', 'USA'));
countryTest.click();
USA.click();
Hope it helps.