.setValue not working after .clearValue

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.

[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));
  });
}

[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