Skip to main content

Nightwatch.js Selenium e2e test: input field clearing issue

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

Firstly, for 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:


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 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 key strokes as an array in setValue's second argument e.g.:

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

Hope this helps! Happy testing!


Comments powered by Disqus