Angular 无效元素状态：元素必须是用户可编辑的，才能清除它。尝试使用Selenium单击下拉开关并插入日期时出错

我正在尝试单击此日历并使用selenium自动插入日期，但出现以下错误：

无效元素状态：元素必须是用户可编辑的，才能 清除它

HTML代码片段

<a id="enddate-dropdown" class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="">
                <p class="custom-datepickers__date-prefix ng-binding">To:</p>
                <!-- ngIf: displayEndDate -->
                <!-- ngIf: !displayEndDate --><div ng-if="!displayEndDate" class="custom-datepickers__no-date ng-scope"></div><!-- end ngIf: !displayEndDate -->
</a>

myclass.SetDateByXpath("//*[@id=\"enddate-dropdown\"]/p", myclass.GetDate("yyyy/MM/dd", mydate));

public void SetDateByXpath(String element, String value)
    {
        WebElement webElement = ExplicitWaitOnElement(By.xpath(element));       
        ((JavascriptExecutor) driver).executeScript(
                "arguments[0].removeAttribute('readonly','readonly')",webElement);
        webElement.clear();
        webElement.sendKeys(value);
    }

如果我手动设置日期，这是HTML：

<a id="enddate-dropdown" class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="">
                <p class="custom-datepickers__date-prefix ng-binding">To:</p>
                <!-- ngIf: displayEndDate --><p ng-if="displayEndDate" class="ng-binding ng-scope">2019/11/21</p><!-- end ngIf: displayEndDate -->
                <!-- ngIf: !displayEndDate -->
</a>

到：
2019/11/21

可能网站改变了，但现在我不知道如何设置这个值。任何帮助都将不胜感激

---

谢谢

我猜你的错误是被扔到台词上的：

webElement.clear();
webElement.sendKeys(value)

我们可以尝试通过Javascript设置值来解决这个问题：

// updated selector for webElement to grab the p element which contains the date string
WebElement webElement = driver.findElement(By.xpath("//*[@id=\"enddate-dropdown\"]/p[@ng-if='displayEndDate']"));

// try setting inner HTML which is the text inside the p
((JavascriptExecutor) driver).executeScript("arguments[0].innerHtml = '" + value + "';", webElement)

// alternative option is to try setting value instead
// ((JavascriptExecutor) driver).executeScript("arguments[0].value = '" + value + "';", webElement)

此错误消息

invalid element state: Element must be user-editable in order to clear it.

…表示标识的元素未处于用户可编辑的状态，无法调用

clear（）

方法

---

要在元素下拉切换中插入日期，有两种方法：

• 您可以

  单击日历上的（）

  ，然后使用

  sendKeys（）插入日期

• 或者可以使用

  executeScript（）

  调用

  removeAttribute（）

  只读属性

---

但是，根据您共享的HTML，似乎使用日期字符串填充的元素（即2019/11/21在HTML中不可用。因此，我们可以推断，由于与其他WebElements的交互，以下元素被添加到中，如下所示：

<p ng-if="displayEndDate" class="ng-binding ng-scope">2019/11/21</p>

---

参考文献 您可以在以下内容中找到相关讨论：

---

谢谢@Christine，你说得对，这些线路是触发错误的原因。我已经用你的Javascript替换了代码，但是我没有成功地设置该字段中的日期。我注意到你的XPath

/*[@id=\“enddate dropdown\”]/div/input

正在搜索

input

元素，但我在你提供的HTML片段中没有看到该元素。你能把它也包括进来吗，这样我就可以完全了解这个日期选择器是什么样子的了？哦，这是一个输入错误，正确的XPath是

“/*[@id=\“startdate dropdown\”]/p”

。我要编辑这篇文章。但是仍然很奇怪，我在手动设置日期后编辑了帖子，并将HTML放入其中。可能会有帮助。如果您运行

，在
//a[@id='enddate-dropdown']
上单击（）？是否有日历弹出窗口让您选择值？我还更新了我的答案，在元素上设置
innerHtml
，而不是
value
——这也值得一试。你能检查一下它是否在iframe中吗？如果url是可共享的，您可以共享它会更好吗？此网站中没有iframe。恐怕我不能分享。Thanks@Jean-弗朗索瓦·法布有没有取消赏金的理由？呃，这是个错误。OP要求的，但我不应该接受。
//element -> myclass.SetDateByXpath("//a[@class='dropdown-toggle' and @id='enddate-dropdown']"
// observe the change in the ^^^ xpath ^^^
//value -> myclass.GetDate("yyyy/MM/dd", mydate));

public void SetDateByXpath(String element, String value)
{
    WebElement webElement = ExplicitWaitOnElement(By.xpath(element));       
    webElement.click();
    WebElement webElement_new = ExplicitWaitOnElement(By.xpath("//a[@class='dropdown-toggle' and @id='enddate-dropdown']//p[@class='ng-binding ng-scope' and @ng-if='displayEndDate']"));
    webElement_new.clear();
    webElement_new.sendKeys(value);
}