using casperjs to click an html element based on its text

Question

I have html elements on my page like this which is on a secure page post the form login

 <h4 class="something" id="somethingelse1" style="display: none;">Some Name</h4>
 <h4 class="something" id="somethingelse2" style="display: none;">Some other name</h4>

I want to be able to simulate the click of this element which then will load a new page. Once that new page is loaded, I want to take a snapshot of a div element within it. I have got part of taking a snapshot, but I am unable to find a way to click the element based on its text. Like for example simulating the click of the H4 element above where the text was 'Some other name'

This is what I have so far...

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

    pageSettings: {
        loadImages:  true,        
        loadPlugins: true          
    } 
});

casper.start('http://localhost/', function() {

    console.log("page loaded");

    this.fill('form#login-form', { 
        username: 'lbguy', 
        password: 'lbguypass'
    }, true);
});

casper.thenOpen('http://localhost/MysecureSite/page1', function() {
        this.echo(this.getTitle());

    var query_xpath = '//*[@innerHtml="Some other name"]';

    require('utils').dump(this.getElementAttribute(query_xpath , 'id'));  

    //casper.start('http://localhost/MysecureSite/page2', function() {
        //  this.captureSelector('pic.png', '#someelement');    
    //});

});

After the page title the console just outputs "Null". I'm not sure if this is the right approach as well. The objective is to simulate a click of the H4 element based on a selected text that I will send in programmatically, and then take a snapshot on page2 after that click action loads page 2 of a div called someelement.

UPDATE

The h4 elements are dynamically added to the page by jquery after the page has loaded.

Thanks

score 2 · Accepted Answer · answered Jan 25 '14 at 10:33

2

Try waiting for your h4 to have been actually added to the DOM, then click on it:

casper.waitForSelector("#somethingelse1").thenClick("#somethingelse1");

answered Jan 25 '14 at 10:33

NiKo

10,608
5
42
56

score 0 · Answer 2 · answered Jan 23 '14 at 21:12

0

You should use xpath to click by text of the element you are trying to click.

casper.click(x('//*[text()="Your Text"]'));

answered Jan 23 '14 at 21:12

Chris Hawkes

9,842
6
47
60

that gives me an error... CasperError: Cannot dispatch mousedown event on nonexistent selector: xpath selector: //*[text()="my text"] – user3228249 Jan 24 '14 at 06:30
Im not familiar with Casper and have just started with it today. Is the H4 element not clickable? – user3228249 Jan 24 '14 at 06:31
some additional info: The h4 elements are dynamically added to the page by jquery after the page has loaded. Can this be trapped in the code? – user3228249 Jan 24 '14 at 07:25
in order to use xpath make sure you add it to your script, there are details how to do this in casper docs. You also need to make sure you change your xpath to whatever the text is you're looking for not literally "Your Text" as provided in the example. Casper will try to click on images, h4 wrapped in anchor tags. if it fails to find the element it will throw the error you referenced. – Chris Hawkes Jan 24 '14 at 13:20
The H4 elements are nested within a DIV tag. This div is present when the page loads into the browser. It gets added on later thru a jquery call. I tried using casper.waitUntilVisible('#AdvertLinks', function() {... but it just times out without executing the code in the function. Ideally I suppose the click call you mentioned should be done within this function call right? – user3228249 Jan 24 '14 at 13:33

using casperjs to click an html element based on its text

2 Answers2