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

Answer 2

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.

Answer 3

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