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

Duyne

Answer 1

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

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

Viridian

Answer 2

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

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

Variation

that gives me an error... CasperError: Cannot dispatch mousedown event on nonexistent selector: xpath selector: //*[text()="my text"] – Duyne

Im not familiar with Casper and have just started with it today. Is the H4 element not clickable? – Duyne

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? – Duyne

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. – Variation

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? – Duyne