Material: datepicker: send keys in Protractor test

[lararogu]

I have an angular app and I would like to test that a user always enters a valid date of birth in a form.I am using a date picker:
(md-datepicker class="inputForm" id="myDate" name="dateField" required md-min-date="minDate" md-max-date="maxDate" > /md-datepicker>

I am trying to use the sendkeys() function in protractor to set a value for the date but it doesn't work:
var today = new Date();
var date = element(by.id('myDate')).sendKeys(today);

When I run the test nothing happens?Any ideas?

[dovydas55]

Yeah im having a same issue. Would be great to get some feedback on this.

[sudosean]

+1

bower.json :

{
    "name": "my_app",
    "version": "1.4.3",
    "dependencies": {
        "angular": "1.5.8",
        "angular-animate": "1.5.8",
        "angular-aria": "1.5.8",
        "angular-chart.js": "0.10.2",
        "angular-chartist.js": "3.3.13",
        "angular-cookies": "1.5.8",
        "angular-datatables": "0.5.4",
        "angular-native-dragdrop": "1.1.2",
        "jsPlumb": "2.0.5",
        "angular-gantt": "1.2.13",
        "angular-google-maps": "2.3.2",
        "angular-material": "1.1.1",
        "angular-messages": "1.5.8",
        "angular-nvd3": "1.0.7",
        "angular-resource": "1.5.8",
        "angular-sanitize": "1.5.8",
        "angular-timer": "1.3.4",
        "angular-translate": "2.11.0",
        "angular-translate-loader-partial": "2.11.0",
        "angular-ui-calendar": "1.0.1",
        "angular-ui-router": "0.3.0",
        "angular-ui-sortable": "0.14.0",
        "angular-ui-tree": "2.15.0",
        "angular-xeditable": "0.1.12",
        "c3-angular": "1.2.0",
        "css-element-queries": "0.3.2",
        "d3": "3.5.17",
        "datatables-responsive": "2.1.0",
        "highlightjs": "8.9.1",
        "imagesloaded": "4.1.0",
        "jquery": "2.2.4",
        "jqueryui-touch-punch": "*",
        "mobile-detect": "1.3.2",
        "moment": "2.13.0",
        "moment-picker": "0.4.2",
        "moment-range": "2.2.0",
        "nvd3": "1.8.1",
        "ng-flow": "2.7.1",
        "perfect-scrollbar": "0.6.11",
        "Sortable": "1.4.2",
        "textAngular": "1.5.1"
    },
    "devDependencies": {
        "angular-mocks": "1.5.8"
    },
    "resolutions": {
        "angular": "1.5.8",
        "d3": "3.5.14",
        "moment": "2.13.0"
    },
    "overrides": {
        "angular-material": {
            "main": [
                "angular-material.js"
            ]
        },
        "perfect-scrollbar": {
            "main": [
                "css/perfect-scrollbar.css",
                "js/perfect-scrollbar.js"
            ]
        },
        "Sortable": {
            "main": [
                "Sortable.js",
                "ng-sortable.js"
            ]
        },
        "font-awesome": {
            "main": []
        }
    }
} 

[lararogu]

Found the solution:

 element.all(by.css('.md-datepicker-input')).get(0).click().sendKeys('10/16/1947');

[mathieub93]

Just to clear this issue up for everyone getting it.

md-datepicker is a class containing multiple elements, a button and 2 divs in my case.
The button can be interacted with to set a date and the first div has a input field which can be interacted with. The test itself can interact with the md-datepicker itself.

Still fixing this issue for myself as well (by getting the correct xpath from the known location of the md-datepicker).

[jogaga1819daw2]

That didn't work for me, instead I used something like this:

element(by.css('#myDate input')).click().clear().sendKeys('10-03-2019');

[chriskapp]

For me it worked with the standard date format i.e.

element(by.model('filter.from')).click().sendKeys('2015-06-01');

[ravindranathakila]

This works for me. Idea is to reach the year selection, navigate to an year and hit enter 3 times.

    element.all(by.xpath('//mat-datepicker-toggle')).get(0).click();

    element.all(by.css('.mat-calendar-period-button')).get(0).sendKeys(protractor.Key.ENTER, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.LEFT, protractor.Key.ENTER, protractor.Key.ENTER, protractor.Key.ENTER);

For your reference, my HTML code, if applicable:

        <mat-form-field fxFlex="100">
          <input required placeholder="{{today}}" matInput [matDatepicker]="picker"
                 (dateInput)="setBirthday('input', $event)" (dateChange)="setBirthday('change',$event); validateBirthday();" (focus)="picker.open();">
          <mat-label>Birthday</mat-label>
          <mat-datepicker-toggle  matSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker opened #picker></mat-datepicker>
        </mat-form-field>

[Splaktar]

@ravindranathakila Angular Material and CDK questions are handled here and issues here. This repo is for AngularJS Material.