Selenium - send_keys() sending incomplete string

Question

My problem: I have a method to fill a field, but the problem is that selenium is not sending the complete string to the field, so my assert fails at the time of verification.

My code:

var webdriver = require('selenium-webdriver');
var casual = require('casual');
var expect = require('chai').expect;
var By = webdriver.By;

exports.addPropuesta = function (driver) {

var first_name = casual.first_name;

driver.findElement(By.xpath("//a[contains(text(),'Añadir Propuesta Test')]")).click();

name_field = driver.findElement(By.name('nombre'));
name_field.sendKeys(first_name);

driver.findElement(By.css("Input[type='submit']")).click();

driver.findElement(By.css('.table')).getText().then(function(table_content){

    expect(table_content).to.include(first_name);

    });
};

Answer 1

It looks like this is a common issue.

Before trying the workarounds, as a sanity check, make sure that the input field is ready to receive input by the time you are sending keys. You could also try clearing the field before calling SendKeys. I am assuming that you are seeing your string truncated, and not characters missing or being prefixed with some artifact (like placeholder text or leftover input from a previous test).

Some workarounds if that didn't work:

1. Set the value of the input field using JavaScript, instead of calling SetKeys. On some websites where I do this, the input value actually won't be recognized unless I also trigger an input changed event.

   Example in C#. Hopefully, the only change you need is to make ExecuteScript be executeScript instead.

   driver.ExecuteScript("var exampleInput = document.getElementById('exampleInput'); exampleInput.value = '" + testInputValue + "'; exampleInput.dispatchEvent(new Event('change'));");
   

   You could, of course, split this up into two lines, one to set the value, and the second to dispatch the event.
   
   

2. Send each key individually. This is a workaround I've seen a couple of times from the threads about this issue.

   for (var i = 0; i < first_name.length; i++) {
       name_field.sendKeys(first_name.charAt(i));
   }
   

https://github.com/angular/protractor/issues/3196
https://github.com/angular/protractor/issues/2019
etc. etc. More threads can be found by a simple search of "webdriver sendkeys does not wait for all the keys" if you want to look for other possible solutions to your issue.

Answer 2

I had run into this in a previous version and filed a bug report. It had since been fixed, but perhaps it is broken again? In any case, when we discussed this on the protractor chat channel, the following suggestion was made: Use sendKeys as normal, then verify the result. If the result fails the sanity check, then enter the characters one at a time.

/**
 * A Typescript version that can be used as a mixin.
 * Make some minor modifications to use as a class.
 * @param data {string} The string to enter in the input element
 */
export class SendKeys {
    inputEl: ElementFinder;

    sendKeys(data: string) {
        var el = this.inputEl;
        // click on the input before sending data. This helps the focus and action situations.
        el.click();

        el.clear();
        el.sendKeys(data);

        // Verify whether or not hte whole data value was sent.
        // If not, send data one character at a time, which works.
        // See: https://github.com/angular/protractor/issues/3196
        el.getAttribute('value').then(function (insertedValue) {
            if (insertedValue !== data) {
                // Failed, must send characters one at a time
                el.clear();
                for (let i=0; i < data.lenght; i++) {
                    el.sendKeys(data.charAt(i));
               }
           }
       });
    }
}

--

/**
 * The Javascript version:
 * @param el {ElementFinder} The input element reference
 * @param data {string} The string to enter in the input element
 */
export function sendKeys(el, data) {
        var el = this.inputEl;
        // click on the input before sending data. This helps the focus and action situations.
        el.click();

        el.clear();
        el.sendKeys(data);

        // Verify whether or not hte whole data value was sent.
        // If not, send data one character at a time, which works.
        // See: https://github.com/angular/protractor/issues/3196
        el.getAttribute('value').then(function (insertedValue) {
            if (insertedValue !== data) {
                // Failed, must send characters one at a time
                el.clear();
                for (let i=0; i < data.lenght; i++) {
                    el.sendKeys(data.charAt(i));
               }
           }
       });
    }