找到/单击并在带有ng-if Angular的下拉菜单中插入日期

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

  

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

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>

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

谢谢

shengsheng321 回答:找到/单击并在带有ng-if Angular的下拉菜单中插入日期

我猜你的错误正在抛出:

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()方法。


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

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

但是,按照您共享的HTML,似乎在日期HTML DOM中不容易使用日期字符串填充元素,即 2019/11/21 。因此,我们可以推断出以下元素是由于与其他 WebElements 交互而添加到DOM Tree的,如下所示:

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

因此最好的方法是

  • 首先在HTML引发 WebDriverWait 内易于使用的元素上调用click()
  • 接下来在新创建的元素 WebDriverWait 上调用sendKeys()
  • 代码块:

    //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);
    }
    
本文链接:https://www.f2er.com/3093831.html

大家都在问