4

Below is my HTML code:

<div id="file-upload-div" class="widget-vsize"> <div id="file-upload-wrapper"> <div id="file-upload-controls" class="btn-group-sm"> <input id="file" type="file" multiple="" style="display: inline;"> <span class="checkbox" style="display: inline-block; padding-top: 6px;"> <button id="upload-submit" class="btn btn-default-ext" style="float: right;width: 33px;" type="submit"> <div class="progress" style="display:none"></div> <div id="file-upload-results-row"><div> 

and I need to upload gist file from my local system using CasperJS and below is my CasperJS code for file uploading

casper.then(function(){ casper.evaluate(function () { var element = document.getElementById('file'); this.sendKeys(element, '/home/prateek/Download/Notebook 43.R'); this.wait(3000) }); this.click({ type : 'css' , path : '#upload-submit'}); this.echo('file has been uploaded') }); 

but still the above CasperJS code is not working. I mean the file is not getting uploaded.

2 Answers 2

2

Try this one it will work

casper.then(function () { var fileName = 'Uploading file path'; this.evaluate(function (fileName) { __utils__.findOne('input[type="file"]').setAttribute('value', fileName) }, {fileName: fileName}); this.echo('Name=' + this.evaluate(function () { return __utils__.findOne('input[type="file"]').getAttribute('name') })); this.echo('Value=' + this.evaluate(function () { return __utils__.findOne('input[type="file"]').getAttribute('value') })); this.page.uploadFile('input[type="file"]', fileName); }); casper.then(function () { this.click(x(".//*[@id='upload-to-notebook']")); this.wait(5000, function () { this.click(x(".//*[@id='upload-submit']")); }); }); casper.then(function () { this.wait(5000); this.capture('screenshots/FileUploadDialogueFilled.png'); this.test.assertVisible('#progress-bar', 'Progress Bar Rendered'); this.waitUntilVisible(x('//*[contains(text(), "uploaded")]'), function then() { console.log("Survey Upload Complete"); this.capture('screenshots/UploadCompleteConfirm.png'); }); }); 
Sign up to request clarification or add additional context in comments.

Comments

1

You can upload a file with PhantomJS' page.uploadFile(). Since CasperJS is built on top of PhantomJS, you can directly access the page instance through casper.page:

casper.then(function(){ this.page.uploadFile('#file', '/home/prateek/Download/Notebook 43.R'); this.click('#upload-submit'); this.echo('file has been uploaded'); }); 

I doubt that you need a wait before submitting the form, but if you do, then you need to keep in mind that all then* and wait* functions are asynchronous step functions and are executed at the end of the current step. Use this:

casper.then(function(){ this.page.uploadFile('#file', '/home/prateek/Download/Notebook 43.R'); this.wait(3000, function(){ this.click('#upload-submit'); this.echo('file has been uploaded'); }); }); 

Other problems:

casper.evaluate() is the sandboxed page context. It has no access to variables defined outside. All values must be explicitly passed. this inside of it refers to window and not to casper. It means that you cannot call casper.sendKeys() or casper.wait() directly inside of it. I suggest, you read up what it means here and here.

5 Comments

but the problem is, this page.uploadFile('#file', '/home/prateek/Download/Notebook 43.R'); this line is not selecting the specified file from the system
Well, it should work. Please register to the resource.error, page.error, remote.message and casper.page.onResourceTimeout events. Maybe there are errors.
yeah, i registered but it is showing '0 Javascript errors found' and also test script is passed, but the problem is it is not selecting the file which i have mentioned
do you know any suggestions/solutions for this problem
@ Artjom, i tried with all my prior knowledge. But i still couldn't found the solution for it

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.