3

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!

Manish Balodia
  • 1,863
  • 2
  • 23
  • 37
Richard
  • 33
  • 1
  • 4
  • 2
    Will you clarify what is your exact target element, which you want to click. – Ishita Shah Jul 30 '18 at 07:53
  • Which is that `said element`? Currently there is only one i.e. **×**, what are the other options? – undetected Selenium Jul 30 '18 at 08:04
  • That's the thing, the HTML that i pasted was basically the whole "Listbox" element. I'm not sure which element I should target and also which element can i interact with. I want to simulate a click on this box element but cannot seem to do it. – Richard Jul 30 '18 at 09:05

3 Answers3

2

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"

dangi13
  • 1,275
  • 1
  • 8
  • 11
  • Similar to the Javascript executor method, the box was left untouched after clicking, and there was no visual indicator ( the dropdown screen did not appear) `
    `
     – Richard Jul 30 '18 at 11:30
  • are u able to click on that element using console – dangi13 Jul 30 '18 at 11:36
  • also, please (if possible) post the snapshot of the dropdown with console open – Kushal Bhalaik Jul 30 '18 at 11:39
  • @dangi13 I'm not sure what you mean by this, could you elaborate? @Kushal Okay, I believe this is what you are looking for `
    `
     – Richard Jul 30 '18 at 12:06
  • press F12 and in console tab write these lines : – dangi13 Jul 30 '18 at 12:28
  • $x("//span[contains(.,'Select from list')]") – dangi13 Jul 30 '18 at 12:29
  • see if the element you get is the same of your select list and after that try to click on it using this in console : $x("//span[contains(.,'Select from list')]")[0].click() – dangi13 Jul 30 '18 at 12:29
  • oh @dangi13 , it seems like there are two elements that come out with the first command. The second command returns "undefined". – Richard Jul 30 '18 at 12:58
  • if there are two elements then try to click on first index or second (see which index has the actual element) – dangi13 Jul 30 '18 at 13:06
  • see if first is the element by : $x("//span[contains(.,'Select from list')]")[0] – dangi13 Jul 30 '18 at 13:07
  • see if second is the element by : $x("//span[contains(.,'Select from list')]")[1] – dangi13 Jul 30 '18 at 13:07
  • and whatever is the exact index click on it.see updated answer – dangi13 Jul 30 '18 at 13:07
  • please do let me know after doing that. – dangi13 Jul 30 '18 at 13:09
  • id the second command returns undefined then try to use this : $x("//span[contains(.,'Select from list')]")[1].click() , see if it clicks the element – dangi13 Jul 30 '18 at 13:10
  • @dangi13 hmm it is the first element. But both of them return undefined when i call the click function on either – Richard Jul 30 '18 at 13:18
  • okk. no problem. use the updated answer of mine and tell me the result. I think we have got the issue. – dangi13 Jul 30 '18 at 13:21
  • @dangi13 oh my god it worked!!!!!!!!!!!!!!!!! I have no idea why this works... I think I mainly had troubles finding where this element was, and was targeting the wrong element all along!! Thank you so much! – Richard Jul 30 '18 at 14:38
0

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')]")));
Kushal Bhalaik
  • 3,349
  • 5
  • 23
  • 46
  • Tried this, got the same element is not clickable error `org.openqa.selenium.WebDriverException: unknown error: Element ... is not clickable at point (697, 605). Other element would receive the click:
    ` I have no idea how to format my answer     – Richard Jul 30 '18 at 10:39
  • I tried both methods, 1st option gave the same output of element is not clickable at point..., 2nd option did not register any action visually (the dropdown screen was not shown), and `
    ` The box was still untouched.
     – Richard Jul 30 '18 at 11:29
  • Does this part `Other element would receive the click:
    ` mean something? Like there is some other element blocking the click?
     – Richard Jul 30 '18 at 11:32
  • @Richard: it means exactly the same that some other element is blocking the view of your ng-select. Try adding the timeout Of 50 seconds once. – Kushal Bhalaik Jul 30 '18 at 11:38
  • Tried this, same outcome – Richard Jul 30 '18 at 12:07
0

I handle using sendKeys.

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

productBrandSelection.sendKeys("desireOptionName");
productBrandSelection.sendKeys(Keys.Enter);
vimuth
  • 5,064
  • 33
  • 79
  • 116
Sumit Kumar Chaudhary
  • 11
  • 2
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 08 '22 at 11:22