【Selenium】如何修改只读（readonly属性）元素的值

现状：目前前端Web页面很多都用到了前端框架，如EasyUI、React、jQuery等等，在这样的大前提下，我们在定位元素时经常会遇到各种困难，如元素只读、元素不可见等等，这篇文章我们重点讲一下只读元素的处理。

一、 我们先来举个栗子

• 只读元素的展示：

只读元素展示

• HTML源码如下（使用的EasyUI前端框架）：

二、我们如何实现修改“交易日期”

一般我们有以下两个方法：

• 方法一：修改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的属性值