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之上，您可以通过page直接访问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()。我建议您阅读here和here的含义。

使用sendKeys时，CasperJS不上传文件

2 个答案: