如何使用JS Executor编辑HTML(删除只读)并在输入框中键入内容? [英] How to edit HTML (remove readonly) and type in input box using JS Executor?

问题描述

这是特定页面上的一段HTML代码:

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.

我知道如何使用JS执行器( https://www.softwaretestingmaterial.com/javascriptexecutor-selenium-webdriver/)，但不知道如何编辑HTML，然后键入.

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.

修改: 我不知道我的问题是如何重复禁用对文本框的只读点击按钮

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

无论如何我都尝试过

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.

我也尝试自动执行此页面 http://jsfiddle.net/343Rb/，在这里它给出了错误

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

1. Cannot set property 'readOnly' of null尝试将readonly的值设置为null时.
2. Cannot read property 'removeAttribute' of null尝试删除只读时.

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.

我正在使用Windows，Java，Selenium，Maven和TestNg

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

推荐答案

您可以编辑value属性以模拟键入.即使存在readonly属性，这也将起作用.但是，如果您确实要删除该属性，请使用 Element.removeAttribute .

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">

这篇关于如何使用JS Executor编辑HTML(删除只读)并在输入框中键入内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！