JS : Upload automatically a file to a form

Question

I'm programing a bot which do some tests on the UI of an application developed with AngularJS. To do that, I use PhantomJS BUT, I'm blocked... In fact, I must upload a .csv file in order to validate the form, but I cannot for the moment. I have no idea how resolve this problem.

I have found this : page.uploadFile('input[name=image]', '/path/to/some/photo.jpg'); BUT, other problem... I use Mocha for testing and my tests are injected into the code of the app. So, i don't know how get the page object.

A simple plan of my architecture :

launcher.js

Initialize PhantomJS
page.open() {
    page.evaluate() {
        page.injectJs(all my tests);
    }
}

test_1.js

describe...
it('should works', ...) {
    Fill form 
}

Thank you !

Answer 1

You can't fill a fileinput from javascript (1,2).

What are you testing exactly? If you are testing the server part, you can use an XMLHttpRequest and FormData to upload a Blob object as a file. If you are writing end-to-end tests, you could try webdriverio. If you do UI tests, you will have to mock the network part of it, possibly by compiling separate javascript files for testing.

Answer 2

I'm not sure if I followed "my tests are injected into the code of the app". Do you mean to say tests are within the same project as your application? If so, then thats a very common setup. You need to have your server running and then run tests against the running server

 var webpage = require('webpage') 
    describe("test suite", function() {
       it("test upload", function(done) {
             console.log('Loading a web page');
             var page = webpage.create();
             var url = 'http://your.server';
             page.open(url, function (status) {
                //Page is loaded!
                page.uploadFile('input[name=image]', '/path/to/some/photo.jpg');
                phantom.exit(done);
            });
       });
    });