现状：目前前端Web页面很多都用到了前端框架，如EasyUI、React、jQuery等等，在这样的大前提下，我们在定位元素时经常会遇到各种困难，如元素只读、元素不可见等等，这篇文章我们重点讲一下只读元素的处理。
一、 我们先来举个栗子
- 只读元素的展示：
只读元素展示
- HTML源码如下（使用的EasyUI前端框架）：
<span class="textbox combo datebox" style="width: 98.72px; height: 20.72px;">
<span class="textbox-addon textbox-addon-right" style="right: 0px;">
<a href="javascript:void(0)" class="textbox-icon combo-arrow" icon-index="0" tabindex="-1" style="width: 18px; height: 20.72px;"></a>
</span>
<input type="text" class="textbox-text validatebox-text validatebox-readonly" autocomplete="off" readonly="readonly" placeholder="" style="margin-left: 0px; margin-right: 18px; padding-top: 0px; padding-bottom: 0px; height: 20.72px; line-height: 20.72px; width: 72.72px;">
<input type="hidden" class="textbox-value" name="workTime" value="2016-12-09">
</span>
二、我们如何实现修改“交易日期”
一般我们有以下两个方法：
- 方法一：修改HTML元素属性，通过输入方式修改（实现方式容易）
- 方法二：通过点击日期控件，选择年、月、日方法选择（实现方式繁琐）
这里，我们着重讲解下第一种方法，也是主流的处理方式，代码如下：
package com.amio.automation.jianshu.testSomething;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
/**
* 简书文章演示代码：测试如何修改只读元素属性
* Created by Amio on 2016/12/8.
*/
public class TestReadOnlyElement {
public static void main(String[] args) {
// 初始化浏览器Driver
WebDriver driver = new FirefoxDriver();
driver.get("https://www.xxx.com/");
driver.findElement(By.xpath("xxx")).sendKeys("xxx");
// 此处省去一万行页面处理代码
// 根据页面元素布局，编写JS代码
String jsString = "document.getElementById('workTime').nextSibling.firstChild.nextSibling.removeAttribute('readonly')";
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript(jsString);
// 删除readonly属性后可以直接调用WebDriver的sendKeys方法传值
driver.findElement(By.name("xxx")).sendKeys("xxx");
}
}
三、简要的JS语法讲解
document.getElementById('workTime')：从HTML中寻找ID为workTime的节点
AAA.nextSibling：AAA的下一个的兄弟节点
AAA.firstChild：AAA的第一个孩子节点
AAA.removeAttribute('readonly')：删除Key为readonly的属性值
