How to test flow.js uploading with Selenium?

Question

I have an AngularJS SPA where the user can upload files using flow.js, more precisely I'm using its wrapper ng-flow.

Now I'm setting the automated e2e tests up with Selenium, but I can't figure out how to test the forementioned uploading mechanism neither when the user clicks the flow-btn element, nor when he uses the drag and drop.

Googling around I found this page which says that the web driver can't recognize the dialog box opened upon clicking the flow-btn, but, since this very last isn't an <input> element, but just a <span> (the only way to use a flow-btn) , I can't use the solution suggested in the linked page.

Any idea about how to test flow.js file uploading with Selenium?

Nope. Have you the same problem, don't you? – Gargaroz Apr 26 '16 at 12:54 — Gargaroz, Apr 26 '16 at 12:54

score 0 · Answer 1 · answered Apr 27 '16 at 14:28

Not sure if this helps... we use nightwatch.js to test our app and have a flowJS upload button for single files.

To get this working I had to make the hidden file input both visible and enabled. Then I could populate it with the file location and submit.

Some sample nightwatch.js

    //Re-enable traditional file-input
    this.api.execute(function () {
        document.getElementById('proof-upload-fallback').className = '';
        document.getElementById('proof-upload-fallback').disabled = false;
    });

    this.api.setValue('//input[@id="proof-upload-fallback"]', require('path').resolve(filePath));

    //Click upload
    this.api.clickModalButton('Upload');

our html looks like:

<input id="proof-upload-fallback" type="file" flow-btn="" ng-show="false" ng-disabled="true" class="ng-hide" /> 

<button flow-btn="" focus-input="focusButton">Select PDF<input type="file" style="visibility: hidden; position: absolute; width: 1px; height: 1px;"></button>

Submit: <button ng-click="ok()">Upload</button>

The ng-click="ok" is responsible for handling flow.js, the important part of the code is the execute() which is JS passed to the actual webapp via the selenium driver...

Florent B. · Answer 2 · 2016-04-27T21:26:37.153

Here is a working example uploading the current script to an upload implemented with flowjs:

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

browser.ignoreSynchronization = true;
browser.setFileDetector(new remote.FileDetector);


describe('test suite', function() {

  it('should upload a file remotely', function() {

    browser.get('http://flowjs.github.io/ng-flow/');

    element(by.xpath("//span[.='Upload File']/input"))
      .sendKeys(path.resolve(__dirname, __filename));

    browser.sleep(5000);

    expect(element.all(by.css("div[ng-repeat='file in $flow.files']")).count()).toEqual(1);
  });

});

How to test flow.js uploading with Selenium?

2 Answers2