How to determine if a specific input exists using CasperJS

Question

My Html

<input name="SUBMIT-chn:$INTERNAL_password.pss" title="Select" 
    class="image  selectIcon" type="image" alt="Select" src="docs/pics/select.png">

I am trying to use CasperJS to know if this exists and if it does then "Click" it?

var casper = require('casper').create();
var site = 'http://internalsite/username=abc';

var exists;
casper.start(site, function() {
    exists = this.evaluate(function() {
        return __utils__.exists('image selectIcon');
    });
});

casper.run(function() {
    this.echo(exists).exit();
});

Answer 1

clientutils.exists() expects a CSS selector as an argument. It seems you want to determine whether the input element exists based both of its class attributes.

'image selectIcon' is not how you select elements based on the class attribute. A proper CSS selector is this one in that case:

'.image.selectIcon'

An element can be selected based on a single class (multiple classes are separated by whitespace) by prefixing it with a dot. Selection based on multiple classes on the same element must be written without a space, because a space in the selector means a descendent (such as child) of the previously selected element.

You can use waitForSelector() to wait for an element to appear incase the site is dynamically generated and then click it:

casper
    .start(url)
    .waitForSelector('.image.selectIcon')
    .thenClick('.image.selectIcon')
    .then(function(){
        // see what happened after the click
        this.capture("screenshot.png");
    })
    .run();