Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remote File Upload Protractor test

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

like image 761
jammy Avatar asked Dec 11 '15 03:12

jammy


2 Answers

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
like image 137
alecxe Avatar answered Nov 13 '22 22:11

alecxe


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');
like image 25
Zicury Avatar answered Nov 13 '22 23:11

Zicury