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

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