javascript - Submitting a form with casperjs

Question

I have a simple form to submit using casperjs. For the same, I have the following version of the code -

casper.then(function() {
    // fill the dropdown and click on buy now
    this.fill('form#add-to-cart-form', {
        'options[416]': '2884',
        'productId': '1093'
    }, true);
});

casper.then(function() {
    console.log("Checkout URL: ", this.getCurrentUrl()); // not going correctly
});

The problem here is that the same URL is getting logged by the program, whereas if you open the page and submit it, it goes to the checkout page.

Any clue what is going wrong?

Answer 1

The site seems to be a single page application. The page load of the submit button isn't picked up by casperjs. You need to manually wait for the next page to load. I used a selector that you can find on the cart page but not on the product page: .filled-cart

The other problem was that the fill method didn't trigger the form submit. You need to manually click it. Also I removed the fill for the hidden field, as it doesn't make sense.

casper.then(function() {
    // fill the dropdown and click on buy now
    this.fill('form#add-to-cart-form', {
        'options[416]': '2884'
    });
    this.click("button[type=submit]");
});

casper.waitForSelector(".filled-cart");

casper.then(function() {
    console.log("Checkout URL: ", this.getCurrentUrl()); // not going correctly
});