CasperJS：将图像上传到表单并处理答案

【问题标题】：CasperJS: Upload Image to Form and ProcessCasperJS：将图像上传到表单并处理
【发布时间】：2013-11-01 01:22:59
【问题描述】：

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

表单分三步：

上传图片，点击预览，新页面加载
调整窗口（暂时省略），点击 OCR，新页面加载
翻录生成的文本数据

当前的 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'）

可能的问题

页面导航不正确
永远不会上传图片文件

【问题讨论】：

标签： javascript phantomjs casperjs

【解决方案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);
});

【讨论】：

【解决方案2】：

我知道这是一个相当古老的问题，但对于遇到此类问题的任何人，希望这会有所帮助。

在调用 getReturnedText 之前，一切看起来都应该可以正常工作。

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

我很确定错误是找不到您尝试选择的元素。这可能只是名称错误，或者上传的文件可能会使表单反应不同。就像重定向到各种错误页面一样。前面的答案很好地说明了如何调试页面将自身重定向到的内容/位置。找出发生了什么的另一个好方法是启用调试。

var casper = require('casper').create({
  verbose: true,
  userAgent: 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.101 Safari/537.36',
  logLevel: "debug"
});

所以调试和图片应该可以帮助您找出真正发生的事情。

【讨论】：