Creating a custom command as an alternative to setValue() where I can control the type speed

Question

Hope someone can help with this. I have come across an issue with the application im testing. The developers are using vue.js library and there are a couple of fields which reformat the entered test. So for example if you enter phone number, the field will automatically enter the spaces and hyphens where its needed. This is also the same with the date of birth field where it automatically enters the slashes if the user does not.

So the issue I have is that using both 'setValue()' or 'sendKeys()' are entering the text too fast and the cursor in the field sometimes cannot keep up and the text entered sometimes appears in the incorrect order. For example, if I try to enter '123456789'. Some times it ends up as '132456798' (or any other combination). This cannot be produced manually and sometimes the test does pass. But its flakey.

What I wanted to do was to write a custom command to do something where it enters the string but in a slower manner. For this I need to have control of how fast I want the text to be entered. So I was thinking of something like this where I can pass in a selector and the text and then it will enter one character at a time with a 200 millisecond pause in between each character. Something like this:

let i = 0;
const speed = 200; // type speed in milliseconds

exports.command = function customSetValue(selector, txt) {
  console.log(selector);
  console.log(txt);
  if (i < txt.length) {
    this.execute(function () {
      document.getElementsByName(selector).innerHTML += txt.charAt(i);
      i++;
      setTimeout(customSetValue, speed);
    }, [selector, txt]);
  }
  return this;
};

When running document.getElementsByName(selector) in browser console I get a match on the required element. But it is not entering any text. Also note that I added a console.log in there and I was actually expecting this to log out 14 times but it only logged once. So itss as if my if condition is false

I checked my if condition and it should be true. So not sure why its not reiterating the function. Any help is much appreciated.

Also if it helps. I am using the .execute() command to inject javascript which is referenced here: https://nightwatchjs.org/api/execute.html

And the idea on this type writer is based on this: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_typewriter

Answer 1

We ended up taking a different approach much simpler. Wanted to post here in case anyone else ever needs something similar

exports.command = function customSetValue(selector, txt) {
  txt.split('').forEach(char => {
    this.setValue(selector, char);
    this.pause(200); // type speed in milliseconds
  });
  return this;
};