Geek Answers Handbook

CasperJS does not load 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 download the gist file from my local system using CasperJS, and below is my CasperJS code for downloading files

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 does not work. I mean, the file is not loading.

+4
source share
2 answers

Try it, 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');
        });
});
+2
source

You can upload a file using PhantomJS page.uploadFile(). Since CasperJS is built on top of PhantomJS, you can directly access the instance pagethrough 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');
});

, wait , , , then* wait* . :

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

:

casper.evaluate() - . , . . this window, casper. , casper.sendKeys() casper.wait() . , .

+1

More articles:


All Articles