Nightwatch: .setValue not working after .clearValue

[kmilan-lwdr]

Lately setValue has been very, very unpredictable. When an input field is empty (for the first time), all goes well. If you clear a field with clearValue however, one of 2 things happens:

1. setValue inputs back the data just cleared and appends the new value (the one supposed to be set) on top of it
2. setValue inputs nothing

Here's some --verbose log of when nothing happens:

INFO` Request: POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element

• data: {"using":"css selector","value":"#numInput"}
• headers: {"Content-Type":"application/json; charset=utf-8","Content-Length":44}
  INFO Response 200 POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element (14ms) { state: 'success',
  sessionId: 'ddd04205-0aee-4877-87f1-5ba68fac489a',
  hCode: 275814232,
  value: { ELEMENT: '32' },
  class: 'org.openqa.selenium.remote.Response',
  status: 0 }
  INFO Request: POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element/32/clear
• data:
• headers: {"Content-Length":0}
  INFO Response 200 POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element/32/clear (25ms) { state: 'success',
  sessionId: 'ddd04205-0aee-4877-87f1-5ba68fac489a',
  hCode: 1975991659,
  value: null,
  class: 'org.openqa.selenium.remote.Response',
  status: 0 }
  LOG → Completed command clearValue (48 ms)
  LOG → Completed command pause (3001 ms)
  INFO Request: POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element
• data: {"using":"css selector","value":"#numInput"}
• headers: {"Content-Type":"application/json; charset=utf-8","Content-Length":44}
  INFO Response 200 POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element (39ms) { state: 'success',
  sessionId: 'ddd04205-0aee-4877-87f1-5ba68fac489a',
  hCode: 1161376669,
  value: { ELEMENT: '32' },
  class: 'org.openqa.selenium.remote.Response',
  status: 0 }
  **> INFO Request: POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element/32/value
• data: {"value":["8","8","8","-","8","8","8","-","8","8","8"]}
• headers: {"Content-Type":"application/json; charset=utf-8","Content-Length":55}
  INFO Response 200 POST /wd/hub/session/ddd04205-0aee-4877-87f1-5ba68fac489a/element/32/value (76ms) { state: 'success',
  sessionId: 'ddd04205-0aee-4877-87f1-5ba68fac489a',
  hCode: 1374135861,
  value: null,
  class: 'org.openqa.selenium.remote.Response',
  status: 0 }
  LOG → Completed command setValue (138 ms)**

Basically what happens here is that on the page, we clear an input field containing '777-777-777' (which we set previously) and after that try to set it to '888-888-888'. The log says the action is successful, though it isn't. The field clears fine, but setting the value after that is impossible.

The appending case is the same with logs stating a successful set despite inputting incorrect data.

[beatfactor]

It looks like this is a duplicate of https://github.com/nightwatchjs/nightwatch/issues/983, and I'm afraid we can't fix this in Nightwatch (not as long as we're using selenium in any case). Which driver are you using? Maybe try chrome?

[kmilan-lwdr]

I was worried it might be Selenium related...

It affects all browsers, tested with Chrome, FF, IE, Edge, PhantomJS.

[kmilan-lwdr]

Figured out a workaround with a custom clear command:

exports.command = function (browser, selector) { browser .getValue(selector, function(result){ for (c in result.value){ browser.setValue(selector, browser.Keys.BACK_SPACE) } }) return this; };

The custom command works essentially like .clearValue by inputting a backspace for each character. It's ugly but works like a charm.

_EDIT_ Changed the unicode backspace to browser.Keys.BACK_SPACE, because only Chrome supported the \u0008

[mostmentor]

you can create custom clear function that select all the text then backspace it
exports.command = function( cssSelector ) { this.setValue(cssSelector, [this.Keys.CONTROL,'a'], function(){ this.setValue(cssSelector, this.Keys.BACK_SPACE); } return this; // allows the command to be chained. };

[dhartunian]

FYI the implementation that @mostmentor suggested won't work on Mac since select-all is not done via "CONTROL". I had better luck with @Lwdra's implementation.

[gpbl]

@Lwdra fixed my issue as well 🎉

Inspired by that command I built one a bit more solid:

/**
 * A better `clearValue` for inputs having a more complex interaction.
 * 
 * @export
 * @param {string} selector 
 * @returns 
 */
export function betterClearValue(selector) {
  const { RIGHT_ARROW, BACK_SPACE } = this.api.Keys;
  return this.getValue(selector, result => {
    const chars = result.value.split('');
    // Make sure we are at the end of the input
    chars.forEach(() => this.setValue(selector, RIGHT_ARROW));
    // Delete all the existing characters
    chars.forEach(() => this.setValue(selector, BACK_SPACE));
  });
}

[laliluna]

@gpbl
this.api.Keys should be this.Keys if used in a custom command. At least with nightwatch 0.9.19

[ravivalm]

enterFromText:function(){
return this.setValue('@from',"DELHI");
}
from:{selector:"#FromTag"}

I am not able to set the value in textbox,its just clicking on it but not setting value.
Can any body help me out