8

I am writing tests in protractor which a JS based framework and selenium test stack for running tests. I am facing an issue where I have to test file upload.

Problem I am having is File I am trying to upload is in the test package whereas selenium node is a separate server so it will not get the file. I tried using file descriptor although the file name is set contents don’t get uploaded.

Below is the code snippet that I have.

  var remote = require('selenium-webdriver/remote');
   browser.setFileDetector(new remote.FileDetector());
   var absolutePath = path.resolve(__dirname, "../specs/data/baseProducts.csv");
   $('input[type="file"]').sendKeys(absolutePath);

Do you have any inputs for the same? Or do you know anyone who has written file upload tests in JS using selenium? Your help will be much appreciated

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
jammy
  • 81
  • 1
  • 3

3 Answers3

14

First of all, for the file upload to work with remote selenium servers, you need the latest protractor (currently, 3.0.0) (which would have the latest selenium-webdriver nodejs package as a dependency).

Then, these two lines are crucial to be able to send files over the wire to the selenium node:

var remote = require('selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());

And, now you should be able to upload files as if you are running tests locally.

Complete working test (tested on BrowserStack, works for me perfectly):

var path = require('path'),
    remote = require('selenium-webdriver/remote');

describe("File upload test", function () {
    beforeEach(function () {
        browser.setFileDetector(new remote.FileDetector());
        browser.get("https://angular-file-upload.appspot.com/");
    });

    it("should upload an image", function () {
        var input = element(by.model("picFile")),
            uploadedThumbnail = $("img[ngf-src=picFile]");

        // no image displayed
        expect(uploadedThumbnail.isDisplayed()).toBe(true);

        // assuming you have "test.jpg" right near the spec itself
        input.sendKeys(path.resolve(__dirname, "test.jpg"));

        // there is a little uploaded image displayed
        expect(uploadedThumbnail.isDisplayed()).toBe(true);
    });
});

Also see relevant issues:

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • I had to upload files at several different spec files, so I added that to the `onPrepare()` section of the protractor.config file instead. Works great. Thanks for the answer. – HaC Feb 26 '18 at 20:37
1

Thanks to @alecxe for his answer!

I just had this situation, trying to upload some files to BrowserStack. In my case I'm using Cucumber - Protractor - NodeJs - BrowserStack. This code is already tested, working in local env and BorwserStack.

let path = require('path');
let remote = require('selenium-webdriver/remote');

this.When(/^I upload a file$/, () => {
    browser.setFileDetector(new remote.FileDetector());

    var fileToUpload = '../image_with_title.jpg';
    var absolutePath = path.join(__dirname, fileToUpload);

    page.fileupload.sendKeys(absolutePath);
});

The magic line is: 

let remote = require('selenium-webdriver/remote');
Zicury
  • 11
  • 1
0

This solution worked for me. The below two lines of code did the trick.

var remote = require('selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());

I am able to upload the file remote server.

malarres
  • 2,941
  • 1
  • 21
  • 35
Saravanan N
  • 1