title: How to wait after browser.keys() in WebdriverIO async mode?
body: <p>I'm struggling to do something with async WebdriverIO v7 that in sync mode is quite easy.</p>
  <p>Context: I'm using a React masked input component that has a bug (I can't fix that nor change the component), if I type too quickly the keys aren't registered and the cursor goes to the end, so I need to type at a relatively slow speed. When I use <code>await input.setValue('test')</code> the typing is too quick and it only types the first letter and can't type the rest, so I need to type every character separately and wait a little between keystrokes.</p>
  <p>Basically I want to do this in async mode:</p>
  <pre class="lang-js prettyprint-override"><code>[...textValue].forEach(char =&gt; {
    browser.keys(char);
    browser.pause(100);
  });
  </code></pre>
  <p>I tried using <code>waitUntil()</code> but because this is a masked input, if I type <code>123456</code>, the value in the input will be <code>123.456.___-_</code> so I can't directly compare the two strings and wait until they are equal. Also, this seems like a lot of work for something that was so simple, so I'm wondering if there is a <em>better way</em>.</p>
  <p>Thanks!</p>
  <p><strong>EDIT:</strong>
  I tried comparing the saved input text so far on each <code>browser.key(char)</code> with the actual <code>input.getValue()</code> in the <code>waitUntil()</code> condition an it still doesn't work</p>