CODEWITHSUNDEEP
javascriptclickcasperjs
Manolel
Manolel

Reputation: 61

Click in CasperJS doesn't really work

I try to click this button : 

<input class="right boutonActionTableau nouveau" onclick="addPeriode()" style="margin:0 0 10px 0 !important;" type="button" value="Période">

My script: 

var casper = require('casper').create({
    verbose: true,
    logLevel: 'debug',
    pageSettings: {
        loadImages:  false,
        loadPlugins: false
    },
    clientScripts: ["jquery.min.js"]
});

casper.start(url, function() {
    this.userAgent('Mozilla/5.0 (Macintosh; Intel Mac OS X)');
    this.fill('form[action="/Login/DoLogin"]', {
        'Login': 'login',
        'Password': 'password'
    }, true);
    this.click('form[action="/Login/DoLogin"]');
});

casper.thenOpen(url, function() {
    this.echo('ok');
    this.mouseEvent('click','input[class="right boutonActionTableau nouveau"]');
    this.capture('test-screen1.png');
});

casper.then(function() {
    this.capture('test-screen4.png');
});

casper.run();

I don't have error, but when i take screenshoot, my page don't change... In my webbrowser, this click add a form after a previous form (if i click 3 time, i have 3 other form)

If in my console chrome i type : $(function(){addPeriode();}); it's ok...

Upvotes: 1

Views: 4561

Answers (3)

Manolel
Manolel

Reputation: 61

It's ok, with page.error, i see the problem : kendoUI. casperjs load thenopen before the end of my previous action. Now it's ok like that : 

casper.start('links.net', function() {

    this.fill('form[action="/Login/DoLogin"]', {
        'Login': 'gfdgdfg',
        'Password': 'dfgdfg'
    }, true);
    this.click('form[action="/Login/DoLogin"]');

    this.thenOpen('links2.net', function() {
    this.echo('loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool');    
    this.click('input.right.boutonActionTableau.nouveau');
    this.capture('test-screen1.png');

})

My first script (doesn't work): 

    casper.start('links.net', function() {

        this.fill('form[action="/Login/DoLogin"]', {
            'Login': 'fghfgh',
            'Password': 'fghfghfgh'
        }, true);
        this.click('form[action="/Login/DoLogin"]');


        }).wait(5000).then(function() {
            this.capture('testlol.png');
        });


    });

  casper.thenOpen('links2.net', function() {
       this.echo('loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooool');
       this.wait(10000);
       this.click('input.right.boutonActionTableau.nouveau');
       this.wait(10000);
       this.capture('test-screen1.png');

    }).wait(5000).then(function() {
        this.capture('testlol.png');
});

Really thanks for your help

Upvotes: 0

Darren Cook
Darren Cook

Reputation: 28913

You should use click() instead of mouseEvent(), unless you have a special reason. IIRC, mouseEvent() requires the button being clicked to be in the current viewport, whereas click() just wants it anywhere in the page.

The second problem with your code is here:

input[class="right boutonActionTableau nouveau"]

Either use:

input.right.boutonActionTableau.nouveau

as in Artjom's answer or, if you really want the attribute syntax, then this way:

input[class*="right"][class*="boutonActionTableau"][class*="nouveau"]

BTW, you might find my story in this post useful. In that case, the link (that I thought was not getting clicked) was actually fine and was getting clicked; the Ajax call involved was returning an error message which is why the screenshot never updated. But I did get to explore lots of ways to do a click!

Upvotes: 1

Artjom B.
Artjom B.

Reputation: 61892

You can run the same JavaScript as in the Chrome console when you call it inside of casper.evaluate(), because it is the sandboxed window into the page.

You can either call 

casper.evaluate(function(){
    addPeriode();
});

or 

casper.evaluate(function(){
    var el = document.querySelector('input.right.boutonActionTableau.nouveau');
    el.click();
    // or
    el.onclick();
});

But the normal click should have worked. You can try to wait after the click.

casper.thenOpen(url, function() {
    this.echo('ok');
    this.click('input.right.boutonActionTableau.nouveau');
    this.capture('test-screen1.png');

}).wait(5000).then(function() {
    this.capture('test-screen4.png');
});

Upvotes: 1

Related Questions