javascript - CasperJS:将图像上传到表单并进行处理

Question

我正在尝试使用 CasperJS 来自动使用免费的 OCR 表单。

表单需要三个步骤:

1. 上传图片，点击预览，加载新页面
2. 调整窗口(暂时省略)，点击 OCR，加载新页面
3. 提取生成的文本数据

当前的 CasperJS 脚本:

phantom.casperPath = '{PATH_TO_CASPER_JS}';
phantom.injectJs(phantom.casperPath + '\\bin\\bootstrap.js');

var system = require('system')
var page = require('webpage').create();
var casper = require('casper').create();

function getReturnedText() {
    return document.querySelector('#ocr-result').innerText;
}

casper.start('http://www.newocr.com/', function() {
    this.page.uploadFile('input[type="file"]', '{PATH_TO_JPEG}');
    this.click('button[name="preview"]');
});

casper.thenEvaluate(function() {
    this.click('button[name="ocr"]');
});

casper.run(function() {
    this.echo(getReturnedText());
    phantom.exit(1);
});

Casper 加载正常，您可能会认为我的路径是正确的。

我目前的错误:

TypeError: 'null' 不是对象(正在评估 'document.querySelector('#ocr-result').innerText')

可能的问题

• 页面导航不正确
• 图片文件从未被上传

Answer 1

调试的一个好方法是抛出一个

casper.then(function () {
this.capture('wtfishappening.png', { top: 0, left:0,     width:1020, height:2050}); 
});

...某个地方，这样您就可以确切地知道您的测试卡在什么上面。我猜你的文件没有被正确选择。

试试这个

var fileName='<path to file>';
    x = require('casper').selectXPath;

casper.then(function(){
    this.test.info('selecting file to upload');
    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);
});