How to Use sendkeys when input type is number with Chrome

Question

HTML

<ion-input [(ngModel)]="login.username" ngControl="username1" type="number" #username1="ngForm" id="userName" required>
</ion-input>

PROTRACTOR TEST CODE

let usern: ElementFinder = element.all(by.css('.text-input')).get(0);
usern.sendKeys('error');
expect(usern.getAttribute("value")).toEqual("error");
browser.sleep(500);
usern.clear();
browser.sleep(1000);
usern.sendKeys('12345');

The element is found but no text is entered into the field. If I change the element to type="text" the protractor command works.And the page view is 'e' and can't be clear.

Secondly if I send string like this: "we2124will", the actually send data is '2124' and the result from getAttribute("value") is 2124.

Thirdly even if I changed the sendKeys to number, the result is not full number string. For example:

Failures:

1) Login page should input username and password
 Message:
   Expected '125' to equal '12345'.
 Stack:
     Error: Failed expectation

There are some number missing.

Does this behave the same way in both Firefox and in Chrome? — alecxe, May 23 '16 at 13:10
Also, what if you would try with the latest protractor version? — alecxe, May 23 '16 at 13:21
I only used Chrome to do the test. And the protractor version is 3.3.0. — Mengxi Wang, May 24 '16 at 10:39

score 3 · Answer 1 · answered Nov 10 '16 at 22:37

Since you're using an <ion-input>, the actual HTML <input> tag will be nested within, and it won't have an id attribute. The effect is that the wrong element can get selected.

Try something like below to grab the nested input tag:

let username = element(by.id('userName')).all(by.tagName('input')).first();
username.sendKeys('fakeUser');

That worked for me.

score 1 · Answer 2 · edited May 23 '17 at 11:53

1

As a workaround, you can introduce a reusable function that would perform a slow type by adding delays between send every key.

First of all, add a custom sleep() browser action, put this to onPrepare():

protractor.ActionSequence.prototype.sleep = function (delay) {
    var driver = this.driver_;
    this.schedule_("sleep", function () { driver.sleep(delay); });
    return this;
};

Then, create a reusable function:

function slowSendKeys(elm, text) {
    var actions = browser.actions();
    for (var i = 0, len = text.length; i < len; i++) {
        actions = actions.sendKeys(str[i]).sleep(300);
    }
    return actions.perform();
}

Usage:

var elm = $("ion-input#userName");
slowSendKeys(elm, "12345");

edited May 23 '17 at 11:53

Community

1
1

answered May 23 '16 at 13:18

alecxe

462,703
120
1,088
1,195

I'm new to Protractor, and there are two things I forgot: 1. I'm testing ionic 2 ans use typescript. When I run the two function above. These failures happen: Property 'sleep' does not exist on type 'ActionSequence'. 2. When I only use the first line of usage, the following failure happen: No element found using locator: By(css selector, ion-input#userName). Do you have any suggestions? – Mengxi Wang May 24 '16 at 11:08

score 0 · Answer 3 · answered May 23 '16 at 13:19

0

What version of protractor are you using?

Not sure this is the issue but try grabbing the element by ng-model

var elem = element(by.model('login.username'));
elem.sendKeys('error');
expect(elem.getAttribute("value")).toEqual("error");
elem.clear();
elem.sendKeys('12345');
expect(elem.getAttribute("value")).toEqual("12345");

answered May 23 '16 at 13:19

findlayc

136
5

I use Protractor 3.3.0 I tried by.model before but get the failures below ` - Failed: unknown error: angular is no (Session info: chrome=49.0.2623.112) (Driver info: chromedriver=2.21.371459 ` – Mengxi Wang May 24 '16 at 10:42

How to Use sendkeys when input type is number with Chrome

3 Answers3