Remote File Upload Protractor test

Question

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

Answer 1

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:

• setFileDectector unable to set remote file detector
• Protractor file uploads - Support remote uploads with webdriver setFileDetector & LocalFileDetector

Answer 2

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');