[FIXED] Having trouble with ng select boxes in selenium testing

Issue

I am currently trying to test a certain element from a website that uses ionic for its front-end implementation.

I got stuck with this element that uses ng-select listbox.

I've tried to find various different answers and tried many different combinations of methods but still have no luck. Currently my code finds this element by the xpath.

What I've tried :

Select class, does not work, error message of

element of type ng select not select

.click(), always get an error message of

"Element is not clickable at point..."

Javascript executor click, nothing happens.

.sendKeys(), either "cannot focus element" or "element is not of type input"

And a few others...

I'm kinda at the end of my options. I have no idea how do i interact with this box. Is there any other method that would work?

Also, I'm confused as to which element should i actually be interacting with? I tried the sendKeys on the ngInput but it does not accept inputs. I tried the Select on ng-select.

My main aim is to simulate a click on said element, as a user would do to choose from the dropdown list.

Below is the HTML code of the particular element, coded with ionic.

<ng-select class="ng-select ng-select-single ng-pristine ng-valid ng-select-bottom ng-touched"
           formcontrolname="productBrand" role="listbox">
  <div class="ng-select-container ng-has-value">
    <div class="ng-value-container">
        <div class="ng-placeholder"></div>
        <!----><!---->
            <!----><div class="ng-value disabled">
                <!---->
                <!---->
                    <span aria-hidden="true" class="ng-value-icon left">×</span>
                    <span class="ng-value-label">Select from list
            </span>

            </div>
        <!---->

        <!----><div class="ng-input">
            <!----><div role="combobox" tabindex="0" aria-expanded="false">
            </div>
            <!---->
        </div>
    </div>

    <!---->

    <!----><span class="ng-clear-wrapper" title="Clear all">
        <span aria-hidden="true" class="ng-clear">×</span>
    </span>

    <span class="ng-arrow-wrapper">
        <span class="ng-arrow"></span>
    </span>
</div>

<!---->
</ng-select>

Any help is appreciated!

Solution

Try to click using actions class :

WebElement selectBox = driver.findElements(By.xpath("//span[contains(.,'Select from list')]")).get(1);

public static void actionClick(WebDriver driver, WebElement element) {
        Actions actions = new Actions(driver);
        actions.moveToElement(element).click().build().perform();
    }

now if normal click does not work then you can use Actions class or JavascriptExecutor on element "selectBox"

Answered By - dangi13
Answer Checked By - Katrina (JavaFixing Volunteer)