CODEWITHSUNDEEP
javascriptphantomjscasperjs
fat fantasma
fat fantasma

Reputation: 7613

How to fill a form by id of input in Casperjs?

I am using Casperjs 1.1.0-beta3 and trying to fill a form by an 'id' selector. I have successfully have used "input[name='userID']" but using an 'id' as a selector always fails with an error similar to the below.

CasperError: Errors encountered while filling form: no field matching css selector "#header-my-account-userid" in form; no field matching css selector "#header-my-account-password" in form

Method 1 works fine. Method 2, 3, 4 all fail. I ONLY TRY ONE METHOD AT A TIME AND COMMENT THE OTHERS OUT. I also cut the extra form tags out for this question.

I found this stackoverflow question on the same subject it still doesn't work.

Any ideas?

HTML

                <input id="header-my-account-userid" name="userID" class="m-my-account-userid" maxlength="80" autocomplete="off" placeholder="Email or Rewards #" type="text">
                <input id="header-my-account-password" name="password" class="m-my-account-password" maxlength="20" autocomplete="off" placeholder="Password" type="password">
                <button type="submit" name="submit" id="header-my-account-sign-in" class="analytics-click m-button-default"  title="Sign In">Sign In</button>

Casperjs Script

    casper.then(function() {
        casper.waitForSelector('form[name=directLoginForm]', function() {
    // Method 1 Works
            this.fillSelectors("form[name=directLoginForm]", {
                'input[name=userID]' : username,
                'input[name=password]' : password
            }, true);

    // Method 2 Does not work
            this.fillSelectors("form[name=directLoginForm]", {
                'input[id="header-my-account-userid"]' : username,
                'input[id="header-my-account-password"]' : password
            }, true);

    // Method 3 Does not work
            this.fillSelectors("form[name=directLoginForm]", {
                'header-my-account-userid' : username,
                'header-my-account-password' : password
            }, true);

    // Method 4 Does not work
            this.fillSelectors("form[name=directLoginForm]", {
                '#header-my-account-userid' : username,
                '#header-my-account-password' : password
            }, true);

        });
    });

Upvotes: 2

Views: 10164

Answers (4)

Claudiu Creanga
Claudiu Creanga

Reputation: 8366

I find that this happens when casperJS is too fast for the browser and a casper.wait() will solve the issue.

This is an example:

// Make a test order
    casper.then(function() {
        casper.waitForSelector('#onestepcheckout-form', function() {
            this.fillSelectors('#onestepcheckout-form', {
                'input[id="billing:telephone"]': '12344534',
                'input[id="billing:postcode"]': '432323',
                'input[id="billing:city"]': 'London',
                'input[id="billing:street1"]': 'Lambada is a good music'
            }, false);
        })

        casper.wait(5000, function() {
            this.fillSelectors('#onestepcheckout-form', {
                '#sagepaydirectpro_cc_owner': 'Fizipit o Moyazoci',
                'input[id="agreement-1"]': true
            }, true);
        })
        this.test.pass('form populated');
    });

Upvotes: 0

Artjom B.
Artjom B.

Reputation: 61892

A minimal example revealed that only method 3 shouldn't work. I suspect you check for 'working' form by checking if the next page loads. It might be the case that casper doesn't find the submit button. Try explicitly clicking the button.

Additionally, PhantomJS has sometimes a problem with non-quoted attribute selectors. You should change

"form[name=directLoginForm]"

to

"form[name='directLoginForm']"

Upvotes: 0

Sajin M Aboobakkar
Sajin M Aboobakkar

Reputation: 4229

Wait for the form to be loaded to fill the form using the selectors.Use have waitForSelector(),waitFor(),wait() etc other than waitForResource()

casper.start('your_url_here',function(){
    this.echo(this.getTitle());
});    

casper.waitForResource("your_url_here",function() {
    this.fillSelectors('#loginform', {
        'input[name="Email"]' : 'your_email',
        'input[name="Passwd"]': 'your_password'
    }, true);
});

Upvotes: 0

Fanch
Fanch

Reputation: 3274

Well i tried, they all work (except 3 because your selector is invalid). I put the bool to false to see the changes, but you shouldn't have 'Errors encountered while filling form: no field matching css selector "#header-my-account-userid'.

It's not a casper error so, it's specific to your case. It doesn't recognize your id for obscure reasons.

this.sendKeys('input[id="header-my-account-userid"]', username);

sendKeys works also.

Upvotes: 0

Related Questions