DIV button click doesn't trigger with CasperJS

[Teshan Nanayakkara]

I have been working on a website scraping project using CasperJS. It is an ASPX website. I could login to the site and then fill the form that runs a search but after filling the form I cannot simulate a click on the DIV button. The search runs using AJAX but when I capture page after waiting few seconds it does not show results in the captured image. The Search button is made of DIV and upon clicking it runs other hidden JavaScript functions that send the AJAX request to retrieve the search results.

Here is my code.

    var casper = require('casper').create({
        clientScripts: ['js/jquery-1.11.3.min.js']
    });
   
    var x = require('casper').selectXPath;
   
    casper.userAgent('......IE 8.0 used here......');
   
    casper.start('https://example.com/finder.aspx');
   
    casper.then(function () {
        this.sendKeys('#UserName', 'xxxxx');
        this.sendKeys('#Password', 'yyyyy');
        console.log('Fill login credentials');
        casper.capture("screen1.png");
   
        this.thenClick('input[type=submit]');
    });
   
    casper.wait(3000, function () {
        console.log('Login');
        casper.capture("screen2.png");
    });
   
    casper.then(function () {
        this.fill('form[name="searchForm"]', {
            '$ddType': 'ABCD',
            '$rbGender': '0',
        }, true);
    });
   
    casper.wait(3000, function () {
        this.sendKeys('#Type_I', 'ABCD');
        this.sendKeys('#ProviderId', '1111111111');
        this.sendKeys('#txtNameFirst', 'My');
        this.sendKeys('#txtNameLast', 'Name');
        this.sendKeys('#txtZipCode', '11111');
        this.sendKeys('#txtBirthDate', '01/11/1987');
        console.log('Form filled');
        casper.capture("screen3.png");
    });
   
    casper.thenClick('#btnSubmit', function () {
        console.log('Submitted');
    });
   
    casper.wait(3000, function () {
        casper.capture("screen4.png");
    });

This is the button DIV that needs a click.

 <div id="btnSubmit" class="dxb">
     <span>Submit</span>
 </div>

The screen4.png (as same as screen3.png) shows only a filled search form but no "Loading.." message (which supposed to be shown upon submit click) or any result. How can I trigger the form submit?

Normal form submit does not retrieve the search results.

PS:

I tried the following methods to trigger the submit button inside `evaluate()`.

Enter press while in a text box (which in reality shows the result)

#Method 1

 var e = jQuery.Event("keydown");
 e.which = 13;
 $("#txtZipCode").trigger(e);

#Method 2

 this.sendKeys('#txtZipCode', casper.page.event.key.Enter, {keepFocus: true});

Clicking on the DIV button.

#Method 1

 $('#btnSubmit div input').trigger('click');

#Method 2

 $('#btnSubmit').click();

#Method 3

 var mouse = require("mouse").create(casper);
 this.mouse.click("#btnSubmit");

Still no luck.

[Tim Scott]

Maybe try clicking on ‘#btnSubmit span’

--
CasperJS homepage & documentation: http://casperjs.org/
CasperJS @github: https://github.com/n1k0/casperjs
 
You received this message because you are subscribed to the Google Groups "casperjs" group.
Visit this group at http://groups.google.com/group/casperjs?hl=en.
---
You received this message because you are subscribed to the Google Groups "CasperJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to casperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Teshan Nanayakkara]

Tried this earlier but no luck.

[Ziflar zemba]

any solution for this issue:

clicking button in a div id

i have a similar problem like this

 <div id="DIV_ID" class="DIV_CLASS alignCenter"  tabindex="-1">
<span class="SPAN_CLASS">
<button class="BUTTON_CLASS" type="submit">
<span class="LOGO_CLASS">
<img src="data:image/svg+xml;base64,PHN2ZySwxLjcz" alt="Checking">
<span> Checking</span>
</span>
<br>
<span class="SPAN_class">easy way to check</span>
</button>
</span>
</div>
                    <div class="optionLine">
                        <span class="optionText">
                            or
                        </span>
                    </div>

how to click submit button

[Ken]

You can try using CSS select #DIV_ID or may be CasperJS XPath //*[@id="DIV_ID"]//button