Nightwatch: setValue() of input by ID with type='text' cuts off string.

[Greenie0506]

setValue of and input cuts off the entire string.

youtubeUrl = 'http://www.youtube.com/watch?v=YE7VzlLtp-4'
module.exports = {
  'Uploading a Youtube Video' : function ( browser ) {
    browser
     .setValue( "#video_url", youtubeUrl )
   }
};

Results in:
http://www.youtube.com/watch?v=YE7Vzl

Cutting off the rest of the string.

As well as a vimeo movie:
https://vimeo.com/1084537

Results in:
https://vimeo.com/1

Although this seems to work:

youtubeUrl = 'https://www.youtube.com/123456789012345678910'

Any ideas if this is a bug or am I doing something incorrect?

[beatfactor]

Is the behaviour consistent? What are you seeing in the verbose log?

[Greenie0506]

Yes it is consistent. Below is what I'm seeing. I didn't think to check to log.
Edit: was missing some info

13:06:54.938 INFO - Executing: [find element: By.cssSelector: #video_url])
13:06:54.944 INFO - Done: [find element: By.cssSelector: #video_url]
13:06:54.950 INFO - Executing: [send keys: 6 [[FirefoxDriver: firefox on MAC (bb38fb71-9028-1844-b2f6-631cb912a0bc)] -> css selector: #video_url], [h, t, t, p, :, /, /, w, w, w, ., y, o, u, t, u, b, e, ., c, o, m, /, w, a, t, c, h, ?, v, =, Y, E, 7, V, z, l, L, t, p, -, 4]])
13:06:55.157 INFO - Done: [send keys: 6 [[FirefoxDriver: firefox on MAC (bb38fb71-9028-1844-b2f6-631cb912a0bc)] -> css selector: #video_url], [h, t, t, p, :, /, /, w, w, w, ., y, o, u, t, u, b, e, ., c, o, m, /, w, a, t, c, h, ?, v, =, Y, E, 7, V, z, l, L, t, p, -, 4]]

The logs look fine. but what i see visually in the input is different. It's what I stated above.

[Greenie0506]

I'm starting to this it's something with my input. If i try this exact same thing on another input without some angular attributes tied to it, it works.

[Argon2000]

I'm getting a really nasty bug using .setValue().

The only time it's working as expected is when the value is 2 characters long (or less):

let myShortVar = 'XY', myLongVar = 'Integration tests example';
browser.setValue('input', myShortVar); //works
browser.setValue('input', myLongVar); //does not work, unexpected results
//e.g. 'Insle' (beginning and end, and sometimes part from middle)

This is not good since i'm trying to create a user with a specific password (which must be longer than 6 chars).

Edit: This seem to be a problem in conjunction with using angular 2. If i use a "normal" input[type=text] without any angular bindings, there is no problem..

[davidlinse]

Actually never had any issues with .setValue() ..
Could this be some regression introduced in one of the latest releases ?

/cc @beatfactor, @senocular

[senocular]

@davidlinse my contributions started with v0.9.6, and there's nothing in there that looks like it would cause any problems with setValue().

It looks like its going through to selenium fine in Greenie's logs, and Argon is mentioning that angular 2 is a factor, so I don't know. Right now I'm not suspecting Nightwatch specifically.

[Argon2000]

Just setting the value trough console like this:
$('input').val(myLongVar);
Or
$('input')[0].value = myLongVar;
Works fine (not using selenium/NW). So it can't be only angular 2's fault?

[Argon2000]

Found this on SO that may be related: http://stackoverflow.com/questions/37200048/selenium-sendkeys-are-not-sending-all-characters

Will try some things tomorrow.

[Argon2000]

This seems to work (send one char at a time):

    .elements('css selector', 'input[ngcontrol=username]', function (elems) {
        elems.value.forEach(function (element: any) {
            for (let c of username.split('')) {
                browser.elementIdValue(element.ELEMENT, c);
            }
        });
    })

This does not (unpredictable with input using [(ngModel)]):

    .setValue('input[ngcontrol=username]', username)

Would be great if there was any shorthand for this.

[Argon2000]

So I ended up writing an extension command to nightwatch:

setValueSlow.js

exports.command = function (selector, value, using) {
    var self = this;
    self.elements(using || 'css selector', selector, function (elems) {
        elems.value.forEach(function (element) {
            for (var c of value.split('')) {
                self.elementIdValue(element.ELEMENT, c);
            }
        });
    });
    return this;
};

index.d.ts (typings extension since I'm using TypeScript):

declare module '~nightwatch/nightwatch' {
    export interface NightWatchBrowser {
        setValueSlow: (selector: string, value: string, using?: string) => NightWatchBrowser;
    }
}

Usage:

var username = '[email protected]';
browser.setValueSlow('input[ngcontrol=username]', username); //Works with ng2!

[TimSmith714]

Don't know if it helps (or is good practice) but I used the .execute function with some js or jquery to update the form field.
Hope that's helpful

.execute(function(){document.getElementById('_EmailAddress').value = '[email protected]';})
.execute(function(){$('#_Password').val('PasswordString');})

[bhao-speedline]

I had similar issues. Sometimes the string got cut off, and sometimes nothing was entered. I fixed that by using "keys" to simulate typing instead of using setValue. Hopefully, this may help others who are having the same issue.

[cb109]

setValue() which calls Selenium's sendKeys() seems to have issues with ChromeDriver < 0.2.31. Updating fixed it for me, see https://github.com/angular/protractor/issues/4332

[nossbigg]

+1 was also facing the same issue with setValue(), but was resolved when I upgraded ChromeDriver version to 2.33 (was on 2.31).

[placetne]

I created a custom command similar to Argon2000's command, but the one I created also accepts page objects as parameters and not just css selectors.

https://github.com/placetne/Samples/blob/master/setValueSlow.js

[abbasalis]

Thanks @nossbigg ... Your answer fixed my issue ...

[santimendoza]

I am using chromedriver version 2.35 and is happening with some inputs too. Any solution working right now?

[nilsgoksor]

I implemented @Argon2000 's solution and it works if I have browser: 'chrome' in my config but as soon as I switch to browser: 'safari' it wont work, elems.value becomes null for some reason.

This is my elems object:
elems{ state: 'success', sessionId: '59b6befc6a552e77dc64dca4aad078fba57c0826', value: [], status: 0 }