如何 select 量角器中日期选择器的日期

Question

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

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

请帮我输入 select 日期。

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

Answer 1

你试过输入 .sendKeys() 了吗？

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

Answer 2

您给定的代码中有两个问题：

1) 应该与输入 html 元素交互

2) sendKeys() 无法与只读输入 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 的网页进行交互。

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

Answer 3

我通过日期选择器找到了 select 日期的解决方案，其中 'sendKeys' 将无法工作，因为输入被禁用。解决方案就像我们将如何手动遍历日历和 select 日期。

代码如下：

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年的日历如下

如果年份显示它点击它否则它点击 'previous' 或 'next' 按钮基于 select 的日期直到它被显示（循环 10 次搜索对于这一年，如果不是在 10 次点击中抛出错误）。

点击年之后，点击月和日。

如何 select 量角器中日期选择器的日期

How to select date of datepicker in protractor

protractor