CODEWITHSUNDEEP
javascriptphantomjscasperjs
GANA
GANA

Reputation: 138

CasperJS doesn't upload file when using sendKeys

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.

Upvotes: 4

Views: 1523

Answers (2)

Prateek.Naik
Prateek.Naik

Reputation: 556

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

Upvotes: 2

Artjom B.
Artjom B.

Reputation: 61952

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.

Upvotes: 1

Related Questions