Selectors
CasperJS makes an heavy use of selectors in order to work with the DOM, and can transparently use either CSS3 or XPath expressions.
All the examples below are based on this HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My page</title>
</head>
<body>
<h1 class="page-title">Hello</h1>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<footer><p>©2012 myself</p></footer>
</body>
</html>
CSS3
By default, CasperJS accepts CSS3 selector strings to check for elements within the DOM.
To check if the <h1 class="page-title"> element exists in the example page, you can use:
var casper = require('casper').create();
casper.start('http://domain.tld/page.html', function() {
if (this.exists('h1.page-title')) {
this.echo('the heading exists');
}
});
casper.run();
Or if you're using the :doc:`testing framework <testing>`:
casper.test.begin('The heading exists', 1, function suite(test) {
casper.start('http://domain.tld/page.html', function() {
this.assertExists('h1.page-title');
}).run(function() {
test.done();
});
});
Some other convenient testing methods are relying on selectors:
casper.test.begin('Page content tests', 3, function suite(test) {
casper.start('http://domain.tld/page.html', function() {
this.assertExists('h1.page-title');
this.assertSelectorHasText('h1.page-title', 'Hello');
this.assertVisible('footer');
}).run(function() {
test.done();
});
});
XPath
You can alternatively use XPath expressions instead:
casper.start('http://domain.tld/page.html', function() {
this.test.assertExists({
type: 'xpath',
path: '//*[@class="plop"]'
}, 'the element exists');
});
To ease the use and reading of XPath expressions, a selectXPath helper is available from the casper module:
var x = require('casper').selectXPath;
casper.start('http://domain.tld/page.html', function() {
this.test.assertExists(x('//*[@id="plop"]'), 'the element exists');
});
Warning
The only limitation of XPath use in CasperJS is in the :ref:`casper.fill() <casper_fill>` method when you want to fill file fields; PhantomJS natively only allows the use of CSS3 selectors in its uploadFile method, hence this limitation.