How to make WebdriverIO type slowly in an input box

Question

I am working on writing test cases with WebdriverIO and I have noticed that the only way to set values to an input is using setValue. This literally sets the whole value you have to the input box. What I need , however, is to type the characters into the input one by one. I need to do this because the element I am testing reveals drodpown options as you type. When I use setvalue the options do not appear because it simply copies the value to the input.

Answer 1

You can enter individual character with a pause. (My Experience when I faced this issue with webdriverIO)

Before:

const value = "Auto- This note is created from automation at 09-05-2020 12:48 PM"
$(selector).setValue(value)

It was typing something like this in UI field:

 9-05-20is created from automAuto-This note tion at 020 12:48 PM

To reduce the speed of typing, I passed each character of the string to keys() method and put a pause in between those character passing.

const value = "Auto- This note is created from automation at 09-05-2020 12:48 PM"
const arrValue = [...value]; // This is for converting string to charArray

for(let i = 0 ; i< arrValue.length; i++) {
browser.keys(arrValue[i] );
browser.pause(200); // .5 milisecond pause

Output:

Auto- This note is created from automation at 09-05-2020 12:48 PM