Nightwatch.js Selenium e2e test: input field clearing issue

While doing the e2e (end to end) tests for a Vue.JS frontend, I bumped into something interesting, which was really fun to fix/find a workaround for.

Firstly, for the e2e tests, I've used Nightwatch.js, which uses the Selenium API, and is written in Node.js.

The problem was that, I was not being able to clear some input tag field data using the API provided by Nightwatch -- browser.clearValue. For example:

browser.clearValue('input[type="text"]')

should clear the current value of the input field referred by the CSS selector. But, it was not doing so!

And to make things worse, I was able to clear the first few inputs through .clearValue, so debugging this was becoming really interesting (and tedious after a while :)). Just to note, this seemingly is a Selenium issue, not a Nightwatch one.

I've tried workarounds like:

• .moveToElement and then .clearValue
• .click, .moveToElement and then .clearValue

and a few others, but none was working and the test was failing at the same place.

Then I've taken things raw, and inserted (setValue) the Backspace character (U+0008) directly in the input field! And guess what, it worked!

Here it is:

browser.setValue('input[type="text"]', '\u0008')

Now, in some places, I was testing with multiple characters as input, so I needed to pass that many backspace keystrokes as an array in setValue's second argument e.g.:

browser.setValue('input[type="text"]', ['\u0008', '\u0008', '\u0008'])

Hope this helps! Happy testing!