无效的元素状态:元素必须是用户可编辑的，以清除尝试使用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

问题描述

我试图单击此日历并使用硒自动插入日期，但出现以下错误:

I'm trying to click on this calendar and insert a date automatically using selenium, but I got the error below:

无效的元素状态:元素必须是用户可编辑的，以便 清除它.

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:

If I set the date manually, this is the 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>

网站可能已更改，但是现在我不知道如何设置该值.任何帮助将不胜感激.

Probably the website changed, but now I don't know how can I set this value. Any help will be appreciated.

谢谢

推荐答案

此错误消息...

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

...表示所标识的元素不是处于用户可编辑状态，无法调用clear()方法.

...implies that the element identified was not in a user-editable state to invoke clear() method.

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

To insert a date with in a dropdown-toggle with an Angular element there are two approaches:

• 您可以在日历上click()并使用sendKeys()
插入日期
• 或者您可以使用executeScript()调用removeAttribute() 只读属性.

• Either you can click() on the calendar and insert a date using sendKeys()
• Or you can use executeScript() to invoke removeAttribute() the readonly attribute.

但是，按照您共享的HTML，在

However, as per the HTML you have shared it seems the element which gets populated with the date string i.e. 2019/11/21 is not readily available within the HTML DOM. So we can infer that the following element gets added to the DOM Tree as a result of interaction with other WebElements which is as follows:

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

因此最好的方法是

• 首先在HTML中的 WebDriverWait 中容易使用的元素上调用click().
• 接下来在新创建的元素 WebDriverWait 上调用sendKeys().

• 代码块:

• First to invoke click() on the element readily available within the HTML inducing WebDriverWait.
• Next to invoke sendKeys() on the newly created element WebDriverWait.

• Code Block:

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

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

You can find a relevant discussion in:

• InvalidElementStateException无效的元素状态:元素必须使用Selenium Python发送文本时，用户可以对其进行编辑以清除它"错误

这篇关于无效的元素状态:元素必须是用户可编辑的，以清除尝试使用Selenium在下拉式切换上单击并插入日期的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！