Change CasperJS Event Triggering Input

Question

Change CasperJS Event Triggering Input

I am trying to edit an input field outside a form using CasperJS and then fire any event related to this change and load the site.

According to some reports, it seems that when loading the page, a resource error "Operation canceled" occurs (code 5).

The website is here .

And here is a simplified version of my code:

var commodity = 'Pears'.toUpperCase();

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    viewportSize: {
        width: 1440,
        height: 900
    }
});

//HANDLE AND ECHO each of resource.error, page.error, remote.message, and casper.page.onResourceTimeout

var USDA_URL = 'http://cat.marketnews.usda.gov/cat/?shortcut=snapshot';
casper.start(USDA_URL);

casper.wait(7000, function() {
    this.withFrame('dashboardDisplay', function() {
        this.withFrame('dashboardTimePeriodDisplay', function() {
            this.sendKeys('.rcbInput', commodity, {keepFocus: true});

            //INSERT ONE OF THE OPTIONS HERE
        });
    });
});


casper.wait(7000, function() {
    this.capture('after_change.png');
});

casper.run();

I tried four different approaches, based mainly on what works when I just browse the site.

Approach 1: Clicking the Dropdown

this.click('li.listItem[title="' + commodity + '"]');

Choosing the right list item seems to be the way it should work, but I believe that this request fails and the rest of the code fails, including capture(). This option results in a second error of the "Operation Canceled" resource.

2:

this.click('.actionBtn');

, -, . .

3:

this.page.sendEvent("keypress", this.page.event.key.Enter);

, , , , , CasperJS. ( {keepFocus: true} sendKeys().)

4:

this.evaluate(function() {
    var select = document.getElementsByClassName('rcbInput')[0];
    var evt = document.createEvent("UIEvents");
    evt.initUIEvent("change", true, true);
    select.dispatchEvent(evt);
});