webdriverio: clearValue method doesn't work at all

Environment (please complete the following information):

**WebdriverIO version: 5.12.5
**Mode: chromedriver
If WDIO Testrunner, running sync/async: sync
**Node.js version: v10
**NPM version: 6.4.1
Browser name and version: Chrome 76
**Platform name and version: Windows
**Additional wdio packages used (if applicable): “@types/chai”: “^4.2.2”, “@types/mocha”: “^5.2.7”, “@types/node”: “^10.14.17”, “@wdio/cli”: “^5.12.5”, “@wdio/local-runner”: “^5.12.5”, “@wdio/mocha-framework”: “^5.12.1”, “@wdio/spec-reporter”: “^5.12.1”, “@wdio/sync”: “^5.12.3”, “wdio-chromedriver-service”: “^5.0.2”, “chromedriver”: “^76.0.1”, “chai”: “^4.2.0”, “mocha”: “^5.2.0”, “ts-node”: “^7.0.1”, “tsconfig-paths”: “^3.8.0”, “tslint”: “^5.19.0”, “typescript”: “^3.6.2”, “webdriverio”: “^5.12.5”

Config of WebdriverIO Example config from the official tutorial

Describe the bug After using setValue method to input text into ‘input’ element. It’s impossible to clear the value.

To Reproduce $('//input[@placeholder="Search…"]').setValue(term); $('//input[@placeholder="Search…"]').clearValue();

$('//input[@placeholder="Search…"]').setValue(term); $('//input[@placeholder="Search…"]').click(); $('//input[@placeholder="Search…"]').clearValue();

Expected behavior As documentation says:

Clear a <textarea> or text element’s value. Make sure you can interact with the element before using this command. You can’t clear an input element that is disabled or in readonly mode.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 25 (7 by maintainers)

Most upvoted comments

I was having this issue on a React frontend but I was able to get it to work by first clicking the field and then using browser.execute(), like this:

selector.click();
browser.execute(s => {
    s.value = null;
},selector);
selector.setValue('value');

I also had the backspace approach working like this, but the other way seemed a little simpler:

const selectorValue = selector.getValue();
const backSpaces = new Array(selectorValue.length).fill('Backspace');
selector.setValue(backSpaces);
selector.setValue('value');

+27

LilyGist on Jul 2, 2021

Not sure if the OP was running into the same thing we were, but I want to post this in case anyone else finds this. clearValue is implemented with input.value = "", which if it’s a controlled input will be wiped on the next render with whatever is in the state. #gotcha

+11

buob on Oct 17, 2019

clearValue doesn’t working for me also I’m using version ^5.17.0

it is kind of code $(‘//input[@placeholder=“Search in…”]’).setValue(‘Search term’); let value = $(‘//input[@placeholder=“Search in…”]’).getValue(); console.log(value); // ‘Search term’ $(‘//input[@placeholder=“Search in…”]’).clearValue(); value = $(‘//input[@placeholder=“Search in…”]’).getValue(); console.log(value); // ‘Search term’

Ranjithsamalla on Sep 23, 2020

const el = await $("input#companyName");
await el.click();
const value = await el.getValue()
const valueLength = value.length;
// Clear the input field by sending a series of backspace key presses
for (let i = 0; i < valueLength; i++) {
    await el.addValue('\uE003');
}

dksoni812 on Jun 12, 2023

this.value.click() browser.keys([‘Control’,‘a’]) browser.keys(‘Delete’) browser.pause(2000) this.typeFolderName.addValue(‘Type’)

brimo80 on May 5, 2022

@LilyGist you’ve saved me!!!..Thank you for the workaround

PareshSolanki-Which on Dec 13, 2021

@schwarcu have the same issue. Try to use clearByBackspace() instead

unickq on Oct 25, 2019