使CasperJS将图像上传到文件字段的问题-尝试过CasperJS fill()和PhantomJS uploadFile() [英] Issues getting CasperJS to upload image to file field - tried CasperJS fill() and PhantomJS uploadFile()

问题描述

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

I'm trying to use CasperJS to upload images to a web-form.

我的表单看起来像这样:

My form looks something like this:

<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

I've put a Gist of the full HTML here: https://gist.github.com/victorhooi/8277035

首先，我尝试使用CasperJS的填充方法:

First, I've tried using CasperJS's fill method:

    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()，我看到文件字段已经填写:

I also did a this.capture(), and I saw that the file field had been filled in:

我没有使用fill方法的内置提交，但是我自己单击了提交按钮:

I'm not using the fill method's inbuilt submit, but I'm clicking on the submit button myself:

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

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

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

I then do another capture, and I can see that the form has been submitted:

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

However, the image doesn't seem to have been uploaded at all.

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

I've also tried using PhantomJS's uploadFile() method:

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

，然后也单击提交按钮.

and then clicking on the submit button as well.

同一问题-填写了表单字段-但是，图像本身似乎未提交.

Same issue - the form field gets filled in - however, the image itself doesn't seem to get submitted.

关于如何在此处正确上传图片的任何想法吗?

Any ideas on how I can get the images to upload correctly here?

推荐答案

由于您已成功填写和提交，请尝试

Since you are filling and submitting successfully, try a Wait command on the click.

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

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

这篇关于使CasperJS将图像上传到文件字段的问题-尝试过CasperJS fill()和PhantomJS uploadFile()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！