CasperJS 在使用 sendKeys 时不上传文件

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

您可以使用 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() 。我建议，你读读它的意思 here and here.

Answer 2

试试这个吧

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

CasperJS 在使用 sendKeys 时不上传文件

CasperJS doesn't upload file when using sendKeys

javascript

phantomjs

casperjs