javascript - How to edit HTML (remove readonly) and type in input box using JS Executor?

Question

This is the piece of HTML code on the particular page:

<input size="24" autocomplete="off" id="sch-555-et" 
name="./schimage" class="x-form-text x-form-field 
x-trigger-noedit" readonly="" style="width: 263px;" type="text">

It allows to browse image and refrains user to type in. I am told to skip the browsing part as it is error-prone also it isn't part of manual or automation tests.

I know how to type using JS Executor (https://www.softwaretestingmaterial.com/javascriptexecutor-selenium-webdriver/) but don't know how to edit HTML and then type.

Edit: I don't know how my question is duplicate of Disable readonly to text box onclicking the button

Anyways I tried:

public JavascriptExecutor executeJS() {
    JavascriptExecutor jsexec = (JavascriptExecutor).driver;
    return jsexec;
}

executeJS().executeScript("document.getElementById('sch-555-et').removeAttribute('readonly')");

but it didn't remove "readonly" and element remain un-editable.

I tried to automate this page http://jsfiddle.net/343Rb/ also, and here it is giving error

1. Cannot set property 'readOnly' of null when trying to set value of readonly as null.
2. Cannot read property 'removeAttribute' of null when trying to remove readonly.

I am using Windows, Java, Selenium, Maven and TestNg

Answer 1

You can edit the value property to simulate typing. This will work even if the readonly attribute is present. But if you do want to remove the attribute, use Element.removeAttribute.

var el = document.getElementById('sch-555-et');

// Note: you can edit the value even if the readonly attribute is present.
el.removeAttribute('readonly');

el.value = 'Edited';

<input size="24" autocomplete="off" id="sch-555-et" 
name="./schimage" class="x-form-text x-form-field 
x-trigger-noedit" readonly="" style="width: 263px;" type="text">