使用JavascriptExecutor移除readonly属性报错：Cannot read property 'removeAttribute' of null

嘿，我来帮你解决这个头疼的问题！首先咱们得先搞清楚这个错误到底是啥意思：Cannot read property 'removeAttribute' of null 说白了就是你的JS代码里document.getElementById('myInput')没找到对应的元素，返回了null，自然就没法调用removeAttribute方法啦。下面咱们一步步来排查解决：

1. 先解决最核心的元素定位问题（大概率是这个原因） #

你用的是jsfiddle的例子对吧？我特意去看了下这个页面，发现输入框是在iframe里面的！直接用document.getElementById肯定找不到，因为当前driver的上下文是主页面，不是iframe里的内容。你得先切换到对应的iframe才行：

driver.get("http://jsfiddle.net/343Rb/");
// 切换到结果区域的iframe，它的id是frameResult
driver.switchTo().frame("frameResult");
// 现在再执行移除readonly的脚本
JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.getElementById('myInput').removeAttribute('readonly');");

另外还有个更稳妥的方法：先通过WebDriver定位到元素，再把元素传给JS脚本，这样就不用在脚本里再找一次元素了，避免定位失败：

WebDriverWait wait = new WebDriverWait(driver, 10);
// 先切换iframe
driver.switchTo().frame("frameResult");
// 显式等待元素加载完成
WebElement inputElement = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("myInput")));
// 把元素作为参数传给JS脚本
js.executeScript("arguments[0].removeAttribute('readonly');", inputElement);

2. 关于AdBlock的事儿，顺便给你科普下 #

AdBlock是一款浏览器扩展，主要用来拦截网页广告，有些时候它会修改页面DOM结构或者阻止某些元素加载，导致你找不到元素。但你换了Firefox还是报错，说明大概率不是AdBlock的问题，不过如果你确实想在Chrome运行时禁用它，可以通过ChromeOptions来配置：

ChromeOptions options = new ChromeOptions();
// 禁用所有扩展，包括AdBlock
options.addArguments("--disable-extensions");
// 或者如果你知道AdBlock的扩展ID，也可以单独禁用它，不过一般禁用所有更省事
WebDriver driver = new ChromeDriver(options);

3. 最后再排查下其他可能的坑 #

• 元素是不是动态加载的？比如页面需要等AJAX请求完成后才会渲染这个输入框，这时候就得用显式等待（就是上面代码里的WebDriverWait），别直接刚打开页面就执行脚本。
• 检查下元素的id是不是真的是myInput，有时候可能页面更新了id，或者你拼写错了，打开浏览器开发者工具（F12）搜索下这个id确认下。

内容的提问来源于stack exchange，提问作者paul