CODEWITHSUNDEEP
javascriptcasperjs
user3534727
user3534727

Reputation: 17

Casper js isn't working with the same result

I have developed CasperJS script for our application. Sometimes it works fine but sometimes it does not work as we expect.

Can you please help me? Where can I improve my script to implement it?

please find the script below.

casper.test.comment('Tests for Add and Remove products');
var x= require('casper').selectXPath;
casper.start(navigationSupport.baseUrl);
casper.clear();
phantom.clearCookies();
casper.then(function() {
    // fill valid credentials
    var userName = 'asdf';
    var password = 'qwerty';
    this.fill('form#loginForm', {j_username: userName, j_password: password}, true);
    this.echo('Login successfully ');
    this.echo('Loged in user ::  '+userName);
});


casper.then(function(){
    this.capture('images/addRemove/step1_login.png', {
        top: 0,
        left: 0,
        width: 0,
        height: 0
    });
});


casper.then(function(){
    this.echo('Cart count before adding product:'+this.getHTML('div.cart-count.button_border')); 
    this.click(x('//div[@id="slider-body"]/table[@class="slider-item active"]/tbody/tr[1]/td[3]/div[@id="add-to-cart-standard2"]/input'));
    this.echo("1st Product added to the Cart:");
});


    casper.then(function(){
    this.wait(3000,function(){
    this.echo("Waiting");
    });
    });


casper.then(function(){
    this.capture('images/addRemove/step2_addtocart1.png', {
        top: 0,
        left: 0,
        width: 0,
        height: 0
    });
});


casper.then(function(){
    this.echo('Cart count after adding 1st product:'+this.getHTML('div.cart-count.button_border')); 
    this.click(x('//div[@id="slider-body"]/table[@class="slider-item active"]/tbody/tr[2]/td[3]/div[@id="add-to-cart-standard2"]/input'));
    this.echo("2nd Product added to the Cart:");
});


    casper.then(function(){
        this.wait(3000,function(){
            this.echo('Waiting..............');
        });
    });


casper.then(function(){
    this.capture('images/addRemove/step3_addtocart2.png', {
        top: 0,
        left: 0,
        width: 0,
        height: 0
    });
});

casper.then(function(){
    this.echo('Cart count after adding 2nd product:'+this.getHTML('div.cart-count.button_border')); 
    this.click(x('//header[@id="masthead"]/section/div/div[2]/form/nav/div/a'));
});

Upvotes: 0

Views: 227

Answers (1)

ebrehault
ebrehault

Reputation: 2601

If your application makes some AJAX calls (or anything asynchronous), the "then" blocks might be evaluated by Casper before the AJAX call is finished.

A more robust approach is to use "waitForSelector" instead of "then" (or any waitFor... method depending on your case) in order to make sure your next test step will be evaluated only when the expected result is observable. For instance if your AJAX call is used to produce a list of <span class="result-item">:

casper.waitForSelector("#result-item", function(){
  this.capture('images/addRemove/step3_addtocart2.png', {
    top: 0,
    left: 0,
    width: 0,
    height: 0
});

Upvotes: 2

Related Questions