How to clear a date from input type="date" with WebdriverIO

Question

I'm now using WebdriverIO and developing a web app. these days I tried to set a date from input type="date", I got errors

invalid element state: Element must be user-editable in order to clear it.

and found that I could get rid of the errors by using addValue() but still the value won't be cleared by any API.

client.clearElement('#deadline')

Also get

invalid element state: Element must be user-editable in order to clear it.

How can I remove the value from the form?

score 1 · Answer 1 · answered Sep 23 '16 at 06:06

You can run in browser script to clear it

browser.execute(function () {
 document.querySelector('#deadline').value = '';
}, null);

OR give it some value

var date = '2020-03-28';
browser.execute(function (date) {
 document.querySelector('#deadline').value = date';
}, date);

reference: https://github.com/webdriverio/webdriverio/issues/386

A more elegant way is to create a custom command and put this piece of code inside

score 0 · Answer 2 · answered Nov 04 '15 at 14:25

this one worked for me:

client.selectorExecute("#dateInput", function(inputs, value) {
    // you can run over the inputs
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].type == 'date') // any condition
            inputs[i].value = "1973-12-09";
    }

    // or just do that:
    inputs[i].value = "1973-12-09";
    return;
})

How to clear a date from input type="date" with WebdriverIO

2 Answers2