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

Question

我试图点击这个日历并使用 selenium 自动插入一个日期，但我收到以下错误：

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

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>

可能网站改了，现在不知道怎么设置这个值。任何帮助将不胜感激。

谢谢

Answer 1

我猜你的错误是在以下几行抛出的：

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)

Answer 2

这个错误信息...

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

...表示所识别的元素不处于 用户可编辑的 状态以调用 clear() 方法。

要在带有 Angular 元素的下拉列表中插入日期，有两种方法：

您可以在日历上 click() 并使用 sendKeys()
或者您可以使用 executeScript() 调用 removeAttribute() readonly 属性。

但是，根据您分享的 HTML，似乎用日期字符串填充的元素，即 2019/11/21 在HTML DOM. So we can infer that the following element gets added to the DOM Tree 作为与其他 WebElements 交互的结果，如下所示：

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

因此最好的方法是，

首先在 HTML 内可用的元素上调用 click() 引发 WebDriverWait.
接下来在新创建的元素上调用 sendKeys() WebDriverWait。

代码块：

//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);
}

参考

您可以在以下位置找到相关讨论：

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

Invalid element state: Element must be user-editable in order to clear it error trying to click and insert a date on a dropdown-toggle using Selenium

selenium

selenium-webdriver

angular

webdriverwait

expected-condition

参考