Uploading an image file with Nightwatch.js

Question

I'm running front-end tests using nightwatch.js using the Chrome Driver. I need to test that image uploading works properly, presumably through the provided file input since there are callbacks that run on a successful post.

I'm aware that this can be done using sendKeys method of the Selenium Web Driver.

How can you accomplish this using javascript and nightwatch.js? Can you access the Selenium webdriver or an interface with it?

i'd be interested to see how a file is chosen, i didn't think such a thing was possible. — dandavis, Jun 26 '14 at 22:26

score 8 · Accepted Answer · answered Aug 26 '15 at 06:36

8

Use this for uploading image from local desktop

.setValue('input[type="file"]', require('path').resolve('/home/My-PC/Desktop/img.png'))

answered Aug 26 '15 at 06:36

Ankit K Gupta

504
6
6

1

Am I the only one to need to have a .pause() after setting the value of a file input like this ? – ncuillery May 16 '18 at 02:13

score 2 · Answer 2 · answered Sep 30 '14 at 22:18

2

As someone above has mentioned, you can pass the absolute path to your input[type="file"] as if you were typing text into a field.

This uses nightwatch's setValue function. You can retrieve the current directory path using Node's __dirname global var.

For example: .setValue('#upload-input', __dirname + '\\upload.jpg')

answered Sep 30 '14 at 22:18

lacy

428
3
11

Could you elaborate on why you have put the double backslash there, after ```__dirname```? Cheers – GrayedFox Dec 02 '15 at 15:57
1

@grayedfox: the backslash is an escape character to precede special chars. In this example, you're escaping a backslash (special char that we want to use) with a backslash (the escape character denoting the following character should be interpreted literally). – lacy Dec 04 '15 at 01:06

score 1 · Answer 3 · answered Aug 04 '14 at 08:54

1

Use client.setValue function to set the absolute path of your image. Here is the working example in my project.

client.setValue('#editPictures .modal-body input[type="file"]', '/Users/testing/pictures/CAM00003.jpg');

answered Aug 04 '14 at 08:54

Ken Goo

101
1
4

score 1 · Answer 4 · answered May 06 '16 at 11:58

1

In my case there is a div with id="Upload Icon" which has input with type="file"

.setValue('//div[@id="Upload Icon"]/input[@type="file"]', require('path').resolve(__dirname + '/categoryIcon.png'))

The above code working fine for me.

answered May 06 '16 at 11:58

Deepak Sisodiya

683
8
9

score 0 · Answer 5 · edited Mar 27 '19 at 17:40

0

This solution worked for me:

.setValue('#file-upload', require('path').resolve('C:/Users/Mihai/Desktop/test.png'))

edited Mar 27 '19 at 17:40

Jan Sršeň

1,024
3
18
37

answered Mar 27 '19 at 16:50

Mihai Sandu

1

Welcome to StackVoerflow. Please format your answer using markdown: https://stackoverflow.com/help/formatting – NOhs Mar 27 '19 at 17:16

score 0 · Answer 6 · answered Jan 08 '20 at 18:58

0

this worked for me.

.setValue('input[type="file"]', require('path').resolve('/home/My-PC/Desktop/img.png'))

Only thing maybe others running into might the different versions of firefox where it didn't work 2 yrs back for a co-worker.

answered Jan 08 '20 at 18:58

Sumit Basra

1
1

Uploading an image file with Nightwatch.js

6 Answers6

Linked