使用sendKeys时，CasperJS不上传文件

Question

以下是我的HTML代码：

<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>

我需要使用CasperJS从我的本地系统上传gist文件，下面是我用于文件上传的CasperJS代码

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

但仍然上面的CasperJS代码不起作用。 我的意思是文件没有上传。

Answer 1

试试这个它会起作用

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

Answer 2

您可以使用PhantomJS的page.uploadFile()上传文件。 由于CasperJS是在PhantomJS之上构建的，因此您可以通过casper.page直接访问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() 。 我建议，你读到这里和这里的含义。