title: Having trouble with ng select boxes in selenium testing
body: <p>I am currently trying to test a certain element from a website that uses ionic for its front-end implementation. </p>
  
  <p>I got stuck with this element that uses <code>ng-select</code> listbox.</p>
  
  <p>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.</p>
  
  <p>What I've tried : </p>
  
  <p>Select class, does not work, error message of </p>
  
  <blockquote>
    <p>element of type ng select not select</p>
  </blockquote>
  
  <p><code>.click()</code>, always get an error message of </p>
  
  <blockquote>
    <p>"Element is not clickable at point..."</p>
  </blockquote>
  
  <p>Javascript executor click, nothing happens.</p>
  
  <p><code>.sendKeys()</code>, either "cannot focus element" or "element is not of type input"</p>
  
  <p>And a few others...</p>
  
  <p>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? </p>
  
  <p>Also, I'm confused as to which element should i actually be interacting with? I tried the <code>sendKeys</code> on the <code>ngInput</code> but it does not accept inputs. I tried the Select on <code>ng-select.</code> </p>
  
  <p>My main aim is to simulate a click on said element, as a user would do to choose from the dropdown list.</p>
  
  <p>Below is the HTML code of the particular element, coded with ionic.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;ng-select class="ng-select ng-select-single ng-pristine ng-valid ng-select-bottom ng-touched"
             formcontrolname="productBrand" role="listbox"&gt;
    &lt;div class="ng-select-container ng-has-value"&gt;
      &lt;div class="ng-value-container"&gt;
          &lt;div class="ng-placeholder"&gt;&lt;/div&gt;
          &lt;!----&gt;&lt;!----&gt;
              &lt;!----&gt;&lt;div class="ng-value disabled"&gt;
                  &lt;!----&gt;
                  &lt;!----&gt;
                      &lt;span aria-hidden="true" class="ng-value-icon left"&gt;×&lt;/span&gt;
                      &lt;span class="ng-value-label"&gt;Select from list
              &lt;/span&gt;
  
              &lt;/div&gt;
          &lt;!----&gt;
  
          &lt;!----&gt;&lt;div class="ng-input"&gt;
              &lt;!----&gt;&lt;div role="combobox" tabindex="0" aria-expanded="false"&gt;
              &lt;/div&gt;
              &lt;!----&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!----&gt;
  
      &lt;!----&gt;&lt;span class="ng-clear-wrapper" title="Clear all"&gt;
          &lt;span aria-hidden="true" class="ng-clear"&gt;×&lt;/span&gt;
      &lt;/span&gt;
  
      &lt;span class="ng-arrow-wrapper"&gt;
          &lt;span class="ng-arrow"&gt;&lt;/span&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  
  &lt;!----&gt;
  &lt;/ng-select&gt;
  </code></pre>
  
  
  
  <p>Any help is appreciated!</p>