Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

CasperJS / PhantomJS - Cannot click 'Add to Cart' button

I am trying to use CasperJS to populate/change some form fields on a page and simply 'add an item to cart' - the process itself is very simple however the final step seems to be having problems.

Below is my CasperJS code (I am using the latest version 1.1.0 of CasperJS at the time)

http://jsfiddle.net/56BvD/1/

The problem function is as follows - The click() function even though it has the correct syntax doesn't seem to work - can anyone with casperjs & phantomjs try this out for themselves if possible - essentially the script below does the following: i) Select the with the class condition-non-working & find the nearest input and click it ii) Change the quantity to 5 iii) The PROBLEM - click the add to cart button (for some reason it doesn't seem to register at the moment) - once clicked it should save a screenshot to indicate this has worked (e.g img1 & img2 will show the difference to indicate it has been clicked)

function processItem(link) {
    this.then(function() {
        this.echo('Select condition');

        this.evaluate(function() {
            $('.condition-non-working').find('input').click();
            $('#qty').val( 5 ); // set quantity to 1, 2, 3 etc..
            $('div.add-to-cart-btn > button.btn-primary').click();
        });

        this.wait(1000, function() {
            this.echo("I've waited for a second & created screenshot {img1.png}");
            this.capture('img.png');
        });

        this.wait(2000, function() {
            this.echo("I've waited for a second & created screenshot {img2.png}");
            this.capture('img2.png');
        });                
    });   
}

Basically the problem is when I attempt to click the 'add to cart' button - even though the selector works fine when I run this directly in the Browser console log (using Firefox), when I use the same selector within my CasperJS code it doesn't seem to run - can anyone indicate why this maybe? I know my jQuery has been installed correctly as I am using it to select other elements on the page and change values which work as expected.

$('div.add-to-cart-btn > button.btn-primary').click(); // works ok in browser

When I run the code in the jsfiddle it returns the following in the CMD window:

Starting
--- Link 0 ---
Page Title: {Page Title as expected...}
Select condition
I've waited for a second and created a screenshot {screenshot1.png}
I've waited for a second and created a screenshot {screenshot2.png}
All done.

However the screenshot2.png shows that the 'add to cart' button hasn't been clicked for some reason - any ideas? The json contents are as follows:

[{"user":{"first_name":"Joe","last_name":"Bloggs","check_payable":"Joe Bloggs","email_address":"joe@bloggs.com","paypal_email_address":"joe@bloggs.com","telephone_number":"0123456789","street_address_1":"100 Some Street","street_address_2":"Some Place","city":"City","state":"AL","zip_code":"12345","hear":"sellcell"},"cart":{"url":"http://www.topdollarmobile.us/blackberry-8100-pearl-at-t.html","condition":"broken","qty":"1"}}]
User Gravatar

zabius

Posted Aug 27 2013 13:16 UTC

$5


  • Assigned To zabius
  • Solved
  • casperjs
    phantomjs
  • 8308 Views

4 Replies


You can use the evaluate method to set the values you like but to click the button try using casper.thenClick method.

User Gravatar

jacobwsmith

Posted Aug 28 2013 22:02 UTC

Thanks for that Jacob - the click() method does the same thing (I'd already tried the default casper.click method and that didn't work either (although it should do) - after doing some further investigation the problem is relating to the internal javascript event functions.

In this particular instance the issue is that both jQuery click & Casper click methods do not activate the custom javascript event named 'onclick="productAjaxAddToCartForm.submit()' - i'll have to find a way to force calling this function (without using the click) - i've also tried the jQuery trigger method without any joy - it might possibly be a potential problem with Casper. I'm getting in touch with the main developer to see if he can see a potential fix.

I am doing this for a number of sites - and have come across the same problem a few times - in one instance where I was unable to call the 'click' functions for whatever reason I've had to explicity add the $.post function instead (which wasn't being activated using the click for some reason)

Hope that makes some sense - i'll post my findings later as I feel others may come into similar problems.

If you are able to run this same CasperJS code in the CasperJS environment and get this working that would be most appreciated.

User Gravatar

zabius

Posted Aug 29 2013 7:45 UTC

Finally worked this out... as the click() methods didnt seem to work I have had to resort to using jQuery to post the form using an ajax research within an evaluate(). And then have it load another URL - this worked... I am sure there is a better way of doing this but it does work seemingly. e.g jQuery.post(''+random_string+'/product/'+product_id+'/', jQuery('#product_addtocart_form').serialize(), function() { window.location = ''; });
User Gravatar

zabius

Posted Aug 29 2013 15:24 UTC

Solution

This didn't solve your task? Get your own custom solution.

18239918333@163.com

User Gravatar

Posted Nov 28 2013 19:29 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions