如何在量角器中选择日期选择器的日期答案

【问题标题】：How to select date of datepicker in protractor如何在量角器中选择日期选择器的日期
【发布时间】：2019-08-26 11:46:47
【问题描述】：

我正在通过量角器自动化应用程序，并且作为一个测试用例的一部分需要选择日期，日期选择器定义如下。我尝试使用无效的 sendkeys 选择日期。

element(by.lid("new-transaction-doat-field)).sendKeys("24 Aug 2019");

请帮我选择日期。

注意：lid是自定义属性，按lid取值，在量角器中创建自定义属性方法

【问题讨论】：

element(by.lid("new-transaction-doat-field)) 表示日期选择器不是输入元素，因此它不能接受sendKeys。你应该调用它的子element(by.css( '[lid="new-transaction-doat-field"] > span > input'))，但是这个Input设置为只读，所以你不能使用sendKeys来输入日期，你可以使用setAttribute('value', "24 Aug 2019")
尝试将密钥发送到输入，如果运气不好，请回复我，我还有其他想法
@yong，感谢您的时间和回复。我们应该使用document.getElementbyId("dateModel").setAtttribute('value' , "24 Aug 2019");的方法对吗？你能告诉我如何在这里使用 setAttribute 方法吗？我们没有 id 或 name。如何唯一标识？
@SergeyPleshakov，感谢您的时间和回复。 sendKeys 方法不走运。

标签： protractor

【解决方案1】：

给定代码中有两个问题：

1) 应该与 Input html 元素交互

2) sendKeys() 无法与只读的 Input html 元素交互。

// because protractor not support invoke setAttribute api directly,
// need to using executeScript to inject DOM Javascript snippet into browser 
// then execute the snippet in browser

browser.executeScript(
    "arguments[0].setAttribute('value', arguments[1])",
    element(by.css( '[lid="new-transaction-doat-field"] > span > input')).getWebElement(),
    "24 Aug 2019"
)

请记住，setAttribute() 不是模拟用户从 UI 与网页交互。

请从您的测试角度确认这是可以接受的。

【讨论】：

对不起，是在自动化脚本中输入值，没有保存。选择并执行操作后，选择的日期不存在，因为该选择是可选的，因此没有出现任何错误。
如果你的同事开发的网页，请他们提供一个javascript sn-p，它可以在浏览器控制台执行时更改选择日期。（这个 sn-p 应该使用 Angular api，就像开发人员在这个 datepicker 上做单元测试一样）。然后使用browser.executeScript() 执行那个sn-p
这是我考虑的方法，如果上面的方法不行，尝试注入脚本设置readonly和ng-disabled属性为null，然后设置其值
但它不能影响绑定的 ng 模型，角度代码期望从中获取选择日期。所以可行的方法是调用angualr api来改变绑定的ng-model的值。

【解决方案2】：

我找到了通过 datepicker 选择日期的解决方案，其中“sendKeys”由于输入被禁用而无法工作。解决方案就像我们将如何手动遍历日历并选择日期。

代码如下：

this.selectDate = function (dateElement, dateValue, yearButton, arrowButton) {
        var splitDate = dateValue.split('/');
        var year = splitDate[2];
        var month = splitDate[1];
        var day = splitDate[0];
        var monthName = getMonthName(month);

        dateElement.click()
            .then(() => yearButton.click())
            .then(() => yearButton.click())
            .then(() => selectYear(year, arrowButton))
            .then(() => element(by.xpath("//span[text()='" + year + "']")).click())
            .then(() => element(by.xpath("//span[text()='" + monthName + "']")).click())
            .then(() => element(by.xpath("//span[text()='" + day + "']")).click());

    };

    async function selectYear(year, arrowButton) {
        for(var i=0; i < 10; i++) {
            var present  = await element(by.xpath("//span[text()='" + year + "']")).isPresent()
            if(present) {
                break;
            } else {
                await arrowButton.click();
            }
        }
    }

函数将输入作为 dateElement、dateValue、yearButton - 用于遍历年份的中心按钮、arrowButton - 日历中的上一个或下一个按钮

第一个脚本点击上图中中间的年份按钮，它是 'September 2019' ，在 '2019' 年份日历出现之后，它再次点击它。然后 2001 到 2019 日历如下

如果显示年份，则单击该年份，否则根据日期单击“上一个”或“下一个”按钮以选择直到显示为止（循环 10 次以搜索年份，如果不是 10 次单击则抛出错误）。

点击年份后，点击月份和日期。

【讨论】：

太好了。但是需要记住一件事。在传递 dateValue 时确保它是引号内的字符串。我还需要使用 getMonthname() 函数。我已经创建了几个月的数组。月份的名称类似于 JAN、FEB，因为我的 HTML DOM 为我现在正在开发的网站呈现这样的月份名称。

【解决方案3】：

您是否尝试过输入时的.sendKeys()？

element(by.model('dateModel')).sendKeys('dd mmm yyyy');

【讨论】：

您好，感谢您的宝贵时间和回复。我试过了，但它选择的是当前日期而不是我发送的日期。