How to Login by filling the form in CasperJs

28,591

Solution 1

casper.waitForSelector("form input[name='name']", function() {
    this.fillSelectors('form#user-login', {
        'input[name = name ]' : '[email protected]',
        'input[name = pass ]' : 'pwd'
    }, true);
});

Simply use this (see waitForSelector docs). Firstly, wait for the form to be loaded. Then fill the form using the selectors.

Solution 2

casper.waitForSelector('form', function(){
    this.fill('form', {
    'name': '[email protected]', 
    'pass': 'pwd'}, true);
});

<!-- wait until a form tag disappears -->
casper.waitWhileSelector('form', function(){
    this.echo('selector is no more!');
});

casper.then(function(){
    this.echo(this.getTitle());
});

Solution 3

In case anyone else finds this.. I used some combination of these answers - my login form was also in an iframe which added some difficulty, but basically the issue I saw (cookie-based login) is that casper was going to the next step before the server could respond and set the cookie. I added some .wait() callbacks to ensure enough time to get that cookie. It may not be foolproof, but I have yet to have an issue with it

Mind you, the cookie needs to be set EVERY CRAWL

casper.start(config.loginUrl, function() {

console.log("Checking login status @ " + config.loginUrl);

// set a wait condition to make sure the page is loaded (particularly iframe in my case) 
this.wait(5000,function(){

    // switch to iframe (won't be necessary for most)
    this.page.switchToChildFrame('login'); 

    // fill out the form 
    this.fillSelectors("form[name='loginForm']",{
        'input#txtUsername' : config.username,
        'input#txtPassword' : config.password
    });

    // click the login button 
    console.log("Logging In...")
    this.click('input.button.login');

    // ** give my crappy dev server 5 seconds to respond
    this.wait(5000,function(){
    console.log('Starting to spider ' + dataObj.start)

    // do yo dance  
    spider(dataObj.start);
    });

Solution 4

Hmmm.. Follow that with:

casper.then(function () {
    this.evaluate(function () {
        $('form#user-login').submit();
    });
});
Share:
28,591
user2129794
Author by

user2129794

Updated on March 10, 2020

Comments

  • user2129794
    user2129794 about 4 years

    Following is the hlml of the login form that I have

    <div class="login_area_user">
    
                <form method="post" action="https://www.tradus.com/login?dest_url=https://www.tradus.com/cart/select-address" id="user-login">
                <input type="hidden" value="1" name="form_submit">
    
                    <h3 style="display:inline-block;">Already a Member</h3>
    
                    <p id="login-main-center-right-descp">You can use tradus login id and password</p>
    
                    <div class="login-row">
                        <label class="colorBlack">Email / Login*</label>
                        <input class="login-field" type="text" name="name" id="edit-namepopup">
                    </div> <!-- [/login-row] -->
    
                    <div class="login-row">
                        <label>Password</label>
                        <input class="login-field" type="password" id="edit-passpopup" name="pass">
                    </div> <!-- [/login-row] -->
    
                    <div class="login-row">            
                        <a class="forgotPassword" href="/forgot_password">Forgot your password?</a>
                        <!--input type="checkbox" name="remember" /><span>Remember me</span-->
                    </div>
    
                    <div class="login-row">
                        <input class="login-button" value="Login" type="submit">
                    </div>
    
                    <input type="hidden" name="op" value="Log in">
    
                </form>
    
            </div>
    

    Am using the following code to login :

    this.fill('form#user-login', {
            'form_submit':    1,
            'name':    '[email protected]',
            'pass':   'pwd',
            'op':       'Log in'
    
        }, true);
    

    But I dont thing its doing the thing for me.

  • iconoclast
    iconoclast almost 9 years
    this seems to be a response to a previous answer, but it's not clear which one, since the order varies unpredictably (based on how the user sorts answers, and the fluctuating values they get, and new answers coming between this and the one it refers to, etc.)
  • Christian Michael
    Christian Michael over 7 years
    This helped me to find the solution for my problem stackoverflow.com/questions/40402888/…