CODEWITHSUNDEEP
javascriptphantomjscasperjs
jarrodparkes
jarrodparkes

Reputation: 2708

CasperJS: Upload Image to Form and Process

I am trying to use CasperJS to automate using a free OCR form.

The form takes three steps:

  1. uploading image, click preview, new page loads
  2. adjust window (omit for now), click OCR, new page loads
  3. rip the resulting text data

Current CasperJS script:

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 is loading fine, and you may assume my paths are correct.

My current error:

TypeError: 'null' is not an object (evaluating 'document.querySelector('#ocr-result').innerText')

Possible Problems

Upvotes: 3

Views: 3881

Answers (2)

Nate Nevins
Nate Nevins

Reputation: 38

I know this is a rather old question but for anyone that runs into something like this, hope this will help.

Everything looks like is should work fine up to the point when getReturnedText is called.

TypeError: 'null' is not an object (evaluating 'document.querySelector('#ocr-result').innerText')

i'm pretty sure the error is the element your trying to select is not found. That could be just a name error or the uploaded file might make the form react differently. Like redirecting to an error page of sorts. The answer from earlier makes a great point on how to debug what/where the page is redirecting itself to. Another great way to find out what is going on is to enable debugging. 

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

so the debugging and the pictures should help you find out what is really going on.

Upvotes: 0

tronjavolta
tronjavolta

Reputation: 757

a good way to debug is to throw a 

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

...somewhere so you know exactly what your test is hanging on. my guess is that your file isn't getting selected properly.

try this 

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

Upvotes: 2

Related Questions