CODEWITHSUNDEEP
javaangularjsseleniumionic-v1
Richard
Richard

Reputation: 33

Having trouble with ng select boxes in selenium testing

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!

Upvotes: 3

Views: 7005

Answers (3)

Sumit Kumar Chaudhary
Sumit Kumar Chaudhary

Reputation: 11

I handle using sendKeys.

WebElement productBrandSelection=driver.findElement(By.xpath("//ng-select[@formcontrolname='productBrand']"));

productBrandSelection.sendKeys("desireOptionName");
productBrandSelection.sendKeys(Keys.Enter);

Upvotes: 0

dangi13
dangi13

Reputation: 1275

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"

Upvotes: 2

Kushal Bhalaik
Kushal Bhalaik

Reputation: 3384

Although there could be different variation of x-paths, but following is simpler to understand as element is the first concrete element in whole posted code:

driver.findElement(By.xpath("//span[contains(.,'Select from list')]")).click();

Update #1:

1) Try adding some wait before clicking:

        WebDriverWait wait = new WebDriverWait(driver, 10);
        wait.until(ExpectedConditions.elementToBeClickable(driver.findElement(By.xpath("//span[contains(.,'Select from list')]"))));

        driver.findElement(By.xpath("//span[contains(.,'Select from list')]")).click();

2) You Can also try using Javascript Executor:

      ((JavascriptExecutor) driver).executeScript("arguments[0].click();", driver.findElement(By.xpath("//span[contains(.,'Select from list')]")));

Upvotes: 0

Related Questions