title: Click/select selectize field with selenium/webdriver.io
body: <p>I am running a <a href="https://cucumber.io/" rel="noreferrer">cucumber</a> test with <a href="https://chimp.readme.io/docs/getting-started" rel="noreferrer">chimp.js</a> under <a href="https://www.meteor.com/" rel="noreferrer">meteor.js</a>.</p>
  
  <p>I would like to click and select an item from a <a href="http://selectize.github.io/selectize.js/" rel="noreferrer">selectized</a>  field with selenium/webdriver.io. Moreover, but probably irrelevant, I use the <a href="https://github.com/mologie/meteor-reactive-selectize" rel="noreferrer">reactive-selectize</a> package under meteor.</p>
  
  <p>While my testing environment under chrome is processing, I defined to run the following action with <a href="https://chimp.readme.io/docs/key-concepts" rel="noreferrer">selenium/webdriver.io</a>; in my step I tried the following alternatives:</p>
  
  <pre><code>browser.click('#select'); // Alternative A
  browser.click('div.selectize-control'); // Alternative B
  browser.click('div.selectize-input'); // Alternative C
  </code></pre>
  
  <p>None of these actions triggered the opening of the selectize dropdown list.</p>
  
  <p>However, if I try</p>
  
  <pre><code>browser.execute(function(bookshop_id) {
    var $sel = $('#new-order-bookshop').selectize()[0];
    $sel.selectize.setValue('bpS3E8t3PLRnd8YWZ'); // select value via selectize
  }, bookshop_id);
  </code></pre>
  
  <p>It re-runs selectize on the select field, so all my s are gone. I guess, I am overwriting the options that my meteor app originally generated. I could manually add options/items, but this is rather an awkward solution.</p>
  
  <p>How can I select items of a selectize field with selenium/webdriver.io?</p>