让 CasperJS 将图像上传到文件字段的问题 - 尝试了 CasperJS fill() 和 PhantomJS uploadFile()答案

【问题标题】：Issues getting CasperJS to upload image to file field - tried CasperJS fill() and PhantomJS uploadFile()让 CasperJS 将图像上传到文件字段的问题 - 尝试了 CasperJS fill() 和 PhantomJS uploadFile()
【发布时间】：2014-01-06 02:14:18
【问题描述】：

我正在尝试使用 CasperJS 将图像上传到网络表单。

我的表单看起来像这样：

<form action="" method="POST" enctype="multipart/form-data" class="form-vertical">
    ...                        
        <legend>Campaign Banner</legend>
        <div class="control-group image-field ">
            <label class="control-label">Now Large</label>
            <div class="controls">
                <div class="file-field"><input id="id_now_large_image" name="now_large_image" type="file"></div>
                <div class="image-preview"></div>
                <div class="clear"></div>
                <span class="help-inline"></span>
            </div>
        </div>
        <div class="control-group image-field ">
            <label class="control-label">Now Medium</label>
            <div class="controls">
                <div class="file-field"><input id="id_now_medium_image" name="now_medium_image" type="file"></div>
                <div class="image-preview"></div>
                <div class="clear"></div>
                <span class="help-inline"></span>
            </div>
        </div>
        <div class="control-group image-field ">
            <label class="control-label">Now Small</label>
            <div class="controls">
                <div class="file-field"><input id="id_thumbnail_image" name="thumbnail_image" type="file"></div>
                <div class="image-preview now-small"></div>
                <div class="clear"></div>
                <span class="help-inline"></span>
            </div>
        </div>

提交按钮如下所示：

<div class="form-actions">
    <button type="submit" class="btn btn-small ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Save changes</span></button>
</div>

我在此处提供了完整 HTML 的要点：https://gist.github.com/victorhooi/8277035

首先，我尝试过使用 CasperJS 的 fill 方法：

    this.fill('form.form-vertical', {
        'now_large_image': '/Users/victor/Dropbox/CMT Test Resources/Test Banners/Default Banners/now_large.jpg',
    }, false);
    this.click(x('//*[@id="content-wrapper"]//button/span'));

我也做了一个this.capture()，看到file字段已经填好了：

我没有使用填充方法的内置提交，而是我自己点击了提交按钮：

this.click(x('//*[@id="content-wrapper"]//button/span'));

然后我再次捕获，我可以看到表单已提交：

但是，图像似乎根本没有上传。

我也尝试过使用 PhantomJS 的 uploadFile() 方法：

this.page.uploadFile('input[name=now_large_image]', '/Users/victor/Dropbox/CMT Test Resources/Test Banners/Default Banners/now_large.jpg');

然后也点击提交按钮。

同样的问题 - 表单域被填写 - 但是，图像本身似乎没有被提交。

关于如何在此处正确上传图片有什么想法吗？

【问题讨论】：

标签： javascript html phantomjs casperjs

【解决方案1】：

既然你填写并提交成功，请尝试点击Wait命令。

casper.then(function() {
    //+++ form fill here

    //waits 1 sec
    this.wait(1000, function() {
        this.click(x('//*[@id="content-wrapper"]//button/span'));
    });
});

【讨论】：

@gumuruh - 好问题。该块中的整个代码立即触发。我认为，设置等待在这里重新定义了堆栈。从技术上讲，您甚至可以删除一个时间约为 400 的“setTimeout()”，它会重新定义堆栈，告诉代码在前一个堆栈之后运行单击，这将是块中的其余代码。这也是“casper.then”为您所做的。它重新定义了堆栈。您可能已经在 casper.then 中包围了每个内脏，并得到了类似的结果。
没错，我也这么认为。就像你说的那样类似于 setTimeout。

【解决方案2】：

试试这个。

casper.thenOpen('about:blank', function(){
    this.evaluate(function(){
        var action = 'upload.php'
        var html = '<form action="'+action+'" method="post" enctype="multipart/form-data">'
        html += '<input type="file" name="files[]" multiple="multiple">'
        html += '<button type="submit">Submit</button>'
        html += '</form>'
        document.write(html)
    })
    this.fill('form',{
        'files[]': 'file.txt'
    }, true)
    this.waitFor(function(){
        var uri = casper.evaluate(function(){
            return document.documentURI
        })
        if ( 'about:blank' === uri ){
            return false
        }
        return true
    })
})

【讨论】：