Protractor: sendKeys does not always enter all text

[machtyn]

This bug has inconsistent reproduction.
While in elementExplorer, I attempted to clear an input element and then send data to the element by performing the following command:

var el = element(by.css('[ngcontrol="username"]'));
el.clear().then(function() { el.sendKeys('Demo'); });

In about 30% (or less) of the time I would perform this action, the text "Do" would appear. (See attached image.)

[juliemr]

This may be the same issue as https://github.com/angular/protractor/issues/2019 - could you share which browser and platform you are using? Can you reproduce this against the example application at http://angular.github.io/protractor/testapp/ng1/ ?

Note that this is almost certainly an issue with selenium and the browser, and probably the best we can do is report a bug upstream.

[machtyn]

I'm on MacOS 10.11.4, using Chrome 50.0 64-bit.
Through webdriver-manager:
Selenium standalone 2.52.0
chromedriver 2.21

Oh my goodness. It seems I have forgotten some significant information in my ticket above. (Sorry.)

I tried use the various inputs on the page you suggested and did not have any problems. However, that site appears to be an Angular 1 (1.5?) site. The page I'm testing against is Angular 2 (beta16). As such, in my config.js file when starting elementExplorer, I have useAllAngular2AppRoots: true. I'm not sure how significant that is.

[alexpopdev]

I get the same issue as @machtyn on Windows 10 Version 1511(OS Build 10586.104) with
Chrome 50.0 64-bit
Selenium standalone 2.52.0
chromedriver 2.21

[ludmilanesvitiy]

The same problem on:
Linux Mint 14.0
Chrome 50.0 64-bit
Selenium standalone 2.51.0
chromedriver 2.21

[LuKain]

Hi, i have the same problem.

My application is in Angular 2.0
Selenium standalone 2.52.0
chromedriver 2.21
Chrome version 51.0.2704.84 m
protractor version 3.3.0

[nickwerline]

The best workaround I've found is setting up a for loop to send the characters one at a time.

var i;
var searchTerm = 'Text to Input';
for(i = 0; i < searchTerm.length; i++){
    inputBox.sendKeys(searchTerm.charAt(i));
}

Slows down Chrome a bit and IE by a lot, but it works.

My problem with sendKeys() actually only occurs on Chrome and not in IE11. And it works correctly on my app's login page, but once it redirects and I call browser.useAllAngular2AppRoots(), Chrome starts having problems.

Windows 7 64-bit
Selenium 2.52.0
Jasmine 2.4.1
Protractor 3.3.0
Chrome 51.0.2704.103
Chromedriver 2.21

[juliemr]

I am unable to reproduce this after multiple attempts - sendKeys consistently sends all for me. Could someone who is experiencing this problem share:

• What specific version of Angular 2 it is failing on - perhaps this has been fixed by upgrading
• details about the input they are trying to send text to - does it use ngModel or ngControl or neither?

[ludmilanesvitiy]

Version Angular 2.0.0-rc.1
In code i use only css selectors.

This is part of my code:

describe ('Test test', ()=> {
beforeAll(() => {
browser.get('/SOMEPAGE');
});
using (dataProvider.PageQueries, (data, description) => {
fit ('Check ' + description, () => {
Page.getFilterByThing().click();
Page.getSearchInFilterByThing().sendKeys(data.query);
Page.getThingInFilter().click();
expect(Page.getThingNameOnFilter().getText()).toEqual(data.query);
});
});
});
Class Page:
'use strict';
let filterByThing = $('.things-filter-button-content');
let searchInFilterByThing = $('input[type*="search"]');
let thingInFilter = $('.thing-name');
let thingNameOnFilter = element.all(by.css('.things-filter-button-content>span')).first();

let Page = function () {
this.getFilterByThing = () => { return filterByThing; };
this.getSearchInFilterByThing = () => { return searchInFilterByThing; };
this.getThingInFilter = () => {return thingInFilter; };
this.getThingNameOnFilter = () => { return thingNameOnFilter; };
};
module.exports = Page;

[juliemr]

Thanks @ludmilanesvitiy - could you share what the component with the searchInFilterByThing input looks like?

[ludmilanesvitiy]

Are you satisfied with the screenshot only?

[juliemr]

@ludmilanesvitiy no, I need to see whether it's using ngModel, ngControl, placeholder text, etc.

[ludmilanesvitiy]

Link will be better? https://ds-dev-consumer.firebaseapp.com/matrix?thing=Home&countries=World&regions=World&zoom=4&row=1&lowIncome=0&highIncome=15000

[machtyn]

I'm on angular 2.0.0-rc.1 and protractor 3.3.0.
The element is ngControl (I followed the steps in my original post above.)

The element I acted on is as follows:
<input _ngcontent-dsg-7="" class="form-control ng-touched ng-dirty ng-valid" id="username" ngcontrol="username" placeholder="Enter your username." required="" type="text">

In my test I just performed now, I did the following:

$ protractor elementExplorer-conf.js --elementExplorer
Starting selenium standalone server...
Selenium standalone server started at http://192.168.17.175:59307/wd/hub

------- Element Explorer -------
Starting WebDriver debugger in a child process. Element Explorer is still beta, please report issues at github.com/angular/protractor

Type <tab> to see a list of locator strategies.
Use the `list` helper function to find elements by strategy:
  e.g., list(by.binding('')) gets all bindings.

Starting debugger agent.
Debugger listening on port 5858
> var el = element(by.css('#username'))
> el.clear().then(function() { el.sendKeys('Demo'); });
> el.clear().then(function() { el.sendKeys('Demo'); });
> 

It was the second command that failed on me. In a subsequent string of tests, I issued the command 11 times, I got "Demo" 3 times and "Do" the other 8 times. There was no rhyme or reason to it. I sent the command quickly. I waited 5 to 6 seconds between sending the command. And there was no pattern to when it would or would not work.

My elementExplorer-conf.js file looks like:

exports.config = {
    framework: 'jasmine',
    useAllAngular2AppRoots: true,
    baseUrl: '<dev-server>/search',
    jasmineNodeOpts: {
        showColors: true
    }
};

[nickwerline]

That is a good example @ludmilanesvitiy , I was able to reproduce it with your site. Works with IE 11 but not Chrome. For others, the elements used were

element(by.css('.things-filter-button-content')).click();
element(by.css('.things-search input')).sendKeys('TextThatShouldBeEntered');

I believe the website I am testing is using Angular 2.0.0-rc.1, but it is also made with Kendo UI 2016.1.412. There is no Angular that appears to be directly accessible. For example, typing 'angular' in the console throws an error. Unfortunately, I don't think I am going to be able to make a reproducible example. Hopefully other people's examples will be sufficient.

On the login page, which uses Angular 1.2.13, using the configuration file setting rootElement: '[ng-app]':

Both of these work

_Username field_
<input required="" name="username" autofocus="" id="username" type="text" class="form-control ng-pristine ng-invalid ng-invalid-required" placeholder="Username" ng-model="model.username" maxlength="100">

_Password field_
<input required="" id="password" name="password" type="password" class="form-control ng-pristine ng-invalid ng-invalid-required" placeholder="Password" ng-model="model.password" maxlength="100" autocomplete="off">

After it redirects, I have to call browser.useAllAngular2AppRoots(); for the protractor testing to continue working. Otherwise, I receive a _"could not find testability for element"_ error. The main website after logging in does not have a ng-app present.

Input with the problem

<input class="form-control searchBox ng-untouched ng-pristine ng-invalid" name="searchValueInput" ngcontrol="searchParam" required="" tabindex="2" type="text">

Workaround

For anyone interested, a modified version of @pgrm 's workaround works well. Attempting to send keys normally once allows IE to continue faster. Only when the text of the input is incorrect do you erase it and enter one character at a time. Chrome enters single characters fairly quickly, so there is not too much lag.

searchBar.clear();
searchBar.sendKeys(searchTerm);
searchBar.getAttribute('value').then(insertedValue => {
  if (insertedValue !== searchTerm) {
    // Failed, must send characters one at a time
    searchBar.clear();
    var i;
    for(i = 0; i < searchTerm.length; i++){
      searchBar.sendKeys(searchTerm.charAt(i));
    }
} 

[ludmilanesvitiy]

For easy reproducing this bug, i added a repository: https://github.com/ludmilanesvitiy/ProtractorIssue3196

[juliemr]

Please try upgrading to the latest Angular RC - we suspect that the sendKeys issue was a side effect of a bug fixed in https://github.com/angular/angular/commit/e5904f40892ca6f53a82d6c5a490d3344a4240fa

[ludmilanesvitiy]

On Version Angular 2.0.0-rc.3 function sendKeys works good! Thank you, @juliemr !

[juliemr]

Great! Closing as fixed.

[alberico-lima]

I had the same problem, then I first click in the element and after I send the text, it solved the problem.

                el_search_wo.driver = driver.find_element_by_xpath("//*[@id='arid_WIN_0_302258625']")
                el_search_wo.click()
                el_search_wo.send_keys('TEXT HERE')

[dagnetro]

@nickwerline, thank you for solution, after i upgraded to Chrome 77 some fields just don't want to be filled at all when i simply do element.click() --> element.clear() --> element.sendKeys("text") but i put your code with getAttribute("value") and then send String char by char and it's working.

[nhducseuit]

@nickwerline, thank you for solution, after i upgraded to Chrome 77 some fields just don't want to be filled at all when i simply do element.click() --> element.clear() --> element.sendKeys("text") but i put your code with getAttribute("value") and then send String char by char and it's working.

Hi, Could you elaborate your solution more clear?
I'm getting into same problem with chrome 74 and Protractor 5.4.2

[dagnetro]

@nickwerline, thank you for solution, after i upgraded to Chrome 77 some fields just don't want to be filled at all when i simply do element.click() --> element.clear() --> element.sendKeys("text") but i put your code with getAttribute("value") and then send String char by char and it's working.

Hi, Could you elaborate your solution more clear?
I'm getting into same problem with chrome 74 and Protractor 5.4.2

I can't elaborate more than that... :)

I just put @nickwerline code idea in java and worked for me.

This is my code:

WebDriverWait wait = new WebDriverWait(driver, 10);
        WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath(givenXpath)));
        element.click();
        element.clear();
        element.sendKeys(textToSend);

        if (!element.getAttribute("value").equalsIgnoreCase(textToSend)) {
            log.warn("Text is not send by xpath in field so i will try to send string char by char!");
            element.clear();
            for (int i = 0; i < textToSend.length(); i++) {
                element.sendKeys(textToSend.charAt(i) + "");
            }
        }

[bdinesh]

This issue is still there with Chrome 81 and Protractor 5.4.3. Mostly with textboxes with Angular pipes.

[Skora25]

Issue : Webdriver enters partial text in the concerned field and enters the remaining text in the next field . I do not have this issue while running the tests in my local. I can only find this issue while running the tests inside Docker .
Docker is using the latest selenium , behave version and python 3.7
Chrome and Chrome Driver : v86

So I have applied the above workaround of entering single character at once :

def type_single_chars(self, xpath, content):
    element = self._web_driver_wait.until(EC.visibility_of_element_located((By.XPATH, xpath)))
    element.clear()
    for i in range(len(content)):
        element.send_keys(content[i])

But i have the following issues when i use the above method :
1)When the script has to enter many words in a field, it enters single word in a line and next word in the following line
2)In some fields it does not enter the complete text.

Help of any sort would be really appreciated. Thanks in advance.