現狀：目前前端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的屬性值