CasperJS and AJAX and Page Loading

[firegate666]

Hi,

I have a page with a login form.
When you enter your userdata and click Login and AJAX request is submitted that verifies the login and injects code into the dom where you can chose the next step after login by click.

I use "casper.waitUntilVisible('div#forwardto div ul li', .....);" to wait for the selector before continuing that works fine. I wonder if there is a method to say "casper.waitForTheLastAjaxRequestToBeFinished()"?

The second is, I trigger a click on one forward section and the browser loads a new page. How can I wait for the page being loaded WITHOUT using "casper.waitForSelector" that emits a lot of warnings:

ReferenceError: Can't find variable: __utils__

  phantomjs://webpage.evaluate():3
  phantomjs://webpage.evaluate():1
  :416 in evaluate
  :442 in exists
  :1158
  :1105

[Dinesh Kumar Natarajan]

hi everybody

i am also having exactly same kind of issue..is there any method to overcome?

[Nicolas Perriault]

On Tue, Jul 10, 2012 at 11:46 AM, Dinesh Kumar Natarajan
<dinesh...@gmail.com> wrote:

>> I wonder if there is a method to say "casper.waitForTheLastAjaxRequestToBeFinished()"?

> i am also having exactly same kind of issue..is there any method to
> overcome?

Have a look at waitForResource():
http://casperjs.org/api.html#casper.waitForResource

You should be able to set it to wait for the load of the url of your ajax call.

++

--
Nicolas Perriault
https://nicolas.perriault.net/ — http://www.akei.com/
Skype: nperriault
Phone: +33 (0) 660 92 08 67

[Dinesh Kumar Natarajan]

hi nicolas

              i have used  waitForResource(): but it dosnt worked :( :(

i am suspecting "ajaxLoader"  and "__RequestVerificationToken" in the below html ...how to handle this kind of Scenario ?

HTML Sample

<form id="LogOnForm" method="post" action="/Account/Login">

   <span id="ValidationErrors">

            

        </span>

   

<div class="loginDrop">

    <fieldset>

        <legend></legend>

        <div class="loginDropLeft">

            <h2>Log In</h2>

            <p>Please enter your username and password.<br>

            <a href="/Content/Register">Register</a> if you don't have an account.</p>

        </div>

        <div class="loginDropRight">

            <div class="formWrap">

           <div class="FormLabel">

           <label for="UserName">Username</label>

           </div>

           <div class="FormInput">

           <input id="UserName" name="UserName" tabindex="1" type="text" value="">

           </div>

            </div>

            <div class="formWrap">

           <div class="FormLabel">

           <label for="Password">Password</label>

                    <a class="forgotPass" href="/Account/ForgotPassword" tabindex="5">(Forgot?)</a>

           </div>

           <div class="FormInput">

           <input id="Password" name="Password" tabindex="2" type="password"><br>

                    &nbsp;

           </div>

            </div>

            <div class="formWrap">

           <div class="formSubmit">

                    <input id="RememberMe" name="RememberMe" tabindex="3" type="checkbox" value="true"><input name="RememberMe" type="hidden" value="false">

                    <label for="RememberMe">Remember me?</label>

               <input type="submit" value="Log In" id="LogOnSubmit" class="button orange" tabindex="4"><div id="ajaxLoader" class="ajaxLoader" style="display: none; "><img src="/Content/Images/spinner.gif" alt="Loading Indicator Image">Loading...</div>

                </div>

            </div>

       <input name="__RequestVerificationToken" type="hidden" value="UDJ90FLzPt6kKjvLi8ilZ88T11SgWpLouKBqsy/uyBQkxi6MmpYZHb61PTvDpamev5f7Cpqg0AwP5fsK3lw733z+epMSDVYPolTZleFmFLZb4CyRXIWrKjRKORwX6Yzeu59ZL2UWWTixTTqghKZvQas86rBrisC5pc10t7suLdc=">

        </div>

    </fieldset>

</div>

    </form>

My sample Script

casper.start('home url', function() {

    // Checking the login form Exist

this.test.assertExists('form#LogOnForm', 'login form is found');

    // Fill username and Password to the inputbox

this.fill('form#LogOnForm', {

        'UserName': 'tempusername',

'Password': 'temp pass'

    }, true);

});

casper.then(function() {

this.waitForResource("next url after succesful login");

 

On Tuesday, July 10, 2012 6:24:40 PM UTC+5:30, Nicolas Perriault wrote:

On Tue, Jul 10, 2012 at 11:46 AM, Dinesh Kumar Natarajan

[Dinesh Kumar Natarajan]

guyz any update ?

[Kyle Irwin]

This is the solution I've been using, but haven't used it much on pages with heavy ajax.

casper.then(function() {

  this.waitForResource(this.getCurrentUrl(),function() {

    //do stuff, page loaded

  },function() {

    //page load failed after 5 seconds

  },5000);

});