CODEWITHSUNDEEP
javascriptajaxphantomjssubmitcasperjs
swapfile
swapfile

Reputation: 417

Clicking a button should get an Ajax response, but reloads the whole page in CasperJS

I'm playing around with CasperJS and trying to catch some Free-Email Alias on https://registrierung.web.de/#.homepage.loginbox_1.1.registrierung

So I have the input field: "E-Mail-Wunschname:" where I want to paste a name, then click the "Prüfen" button and then just scrape the suggested accounts.

So far I have tried that:

var casper = require('casper').create({
    pageSettings: {
        loadImages: false,
        loadPlugins: true,
        userAgent:('Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:45.0) Gecko/20100101 Firefox/45.0')
    }

});

var mouse = require("mouse").create(casper);

casper.start('https://registrierung.web.de/#.homepage.loginbox_1.1.registrierung').viewport(1200,1000);

casper.then(
    function() {               
        this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField',"Test");
        this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField',casper.page.event.key.Enter);       
        this.wait(5000);        
    }
);
casper.then(function() {
    this.wait(5000);
    this.capture('webde.png');
    console.log('clicked ok, new location is ' + this.getCurrentUrl());
});


casper.run();

I also tired to click the button with:

casper.wait(6000, function() {
    this.evaluate(function(){                 
        document.querySelector('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField').value = "Test";           
        document.querySelector('#checkAvailabilityBtn').click();
            });
    });
    casper.then(function() {
        this.capture('webde.png');
        console.log('clicked ok, new location is ' + this.getCurrentUrl());
    });

With both ways it's just a complete submit of the page and not just the generation of the suggestion.

Upvotes: 2

Views: 187

Answers (1)

Artjom B.
Artjom B.

Reputation: 61952

Clicking on the button (casper.click("#checkAvailabilityBtn")) seems to work well.

Here is the full script:

var casper = require('casper').create();

casper.start('https://registrierung.web.de/#.homepage.loginbox_1.1.registrierung').viewport(1200,1000);

casper.then(function() {               
    this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField', "Test"); 
    this.click("#checkAvailabilityBtn");
});
casper.wait(5000);
casper.then(function() {
    this.capture('test80_webde.png');
    console.log('clicked ok, new location is ' + this.getCurrentUrl());
});

casper.run();

By the way, casper.sendKeys() is not able to handle key presses such as the Enter key. You would need to use PhantomJS' page.sendEvent() function. It works normally in the following way, but doesn't seem to work correctly in this case, because it reloads the page:

this.sendKeys('.wishname.feedback-panel-trigger.multiReplaceCharsInWishnamelField', "Test", {keepFocus: true}); 
this.page.sendEvent("keypress", this.page.event.key.Enter);

Upvotes: 2

Related Questions