Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

148 lines (141 sloc) 9.765 kB
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, follow">
<link rel="canonical" href="http://casperjs.org/">
<title>Selectors | CasperJS 1.0.0-RC1</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta name="keywords" content="phantomjs, phantom, casperjs, casper, browser, javascript, navigation, scripting, test, testing, scrape, scraping">
<meta name="description" content="CasperJS is a browser navigation scripting &amp; testing utility written in Javascript on top of PhantomJS.">
<meta name="google-site-verification" content="SEcGmVv4IsGYP6-xMJquQcrUrYjIZNXyX0VGfly2m1o">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Asap:400,700,400italic,700italic&amp;subset=latin,latin-ext">
<link rel="stylesheet" href="prettify/prettify.css?1348764634138">
<link rel="stylesheet" href="css/casper.css?1348764634138">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<a href="http://github.com/n1k0/casperjs" class="contribute">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub">
</a>
<div class="navbar navbar-fixed-top" id="topbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="./index.html">CasperJS</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="installation.html">Install</a></li>
<li><a href="quickstart.html">Quickstart</a></li>
<li class="dropdown" id="api-menu">
<a class="dropdown-toggle" data-toggle="dropdown" data-target="#api-menu" href="api.html">
<abbr title="Application Programming Interface">API</abbr>
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="api.html#intro">Home</a></li>
<li class="divider"></li>
<li><a href="api.html#casper">Casper API</a></li>
<li><a href="api.html#client-utils">Client-side utils</a></li>
<li><a href="api.html#colorizer">Colorizer API</a></li>
<li><a href="api.html#tester">Tester API</a></li>
<li><a href="api.html#utils">Utils API</a></li>
</ul>
</li>
<li><a href="cli.html"><abbr title="Command Line Interface">CLI</abbr></a></li>
<li class="active"><a href="selectors.html">Selectors</a></li>
<li><a href="events-filters.html">Events</a></li>
<li><a href="logging.html">Logging</a></li>
<li><a href="extending.html">Extending</a></li>
<li><a href="testing.html">Testing</a></li>
<li><a href="debugging.html">Debugging</a></li>
<li><a href="faq.html"><abbr title="Frequently Asked Questions">FAQ</abbr></a></li>
<li><a href="https://groups.google.com/forum/#!forum/casperjs">Support</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="container" id="overview">
<div class="content"><section>
<div class="page-header">
<h1>
<span class="section-title">Selectors</span>
<small class="section-subtitle">transparently use CSS3 or XPath selectors</small>
</h1>
</div>
<div class="section-content"><p>CasperJS makes an heavy use of selectors in order to work with the
<a href="http://www.w3.org/TR/dom/">DOM</a>, and can transparently use either
<a href="http://www.w3.org/TR/selectors/">CSS3</a> or <a href="http://www.w3.org/TR/xpath/">XPath</a>
expressions.
</p>
<h2>CSS3 selectors</h2>
<p>By default, Casper will accept <a href="http://www.w3.org/TR/selectors/#selectors">CSS3 selector strings</a>
to check for elements within the DOM. For example, to check if a <code>&lt;div id="plop"&gt;</code>
element exists in a page, you can use:
</p>
<pre><code class="javascript">casper.start('http://domain.tld/page.html', function() {
casper.test.assertExists('#plop', 'the element exists');
});</code></pre>
<h2>XPath</h2>
<p><span class="label label-success">Added in 0.6.8</span>
You can alternatively use <a href="">XPath expression strings</a> instead:
</p>
<pre><code class="javascript">casper.thenOpen('http://domain.tld/page.html', function() {
this.test.assertExists({
type: 'xpath',
path: '//*[@id="plop"]'
}, 'the element exists');
});</code></pre>
<p>To ease the use and reading of XPath expressions, a <code>selectXPath</code> helper is
available from the <code>casper</code> module:
</p>
<pre><code class="javascript">var x = require('casper').selectXPath;
casper.thenOpen('http://domain.tld/page.html', function() {
this.test.assertExists(x('//*[@id="plop"]'), 'the element exists');
});</code></pre>
<p><span class="label label-warning">Warning</span> The only limitation of XPath use
in CasperJS is in the <a href="api.html#casper.fill"><code>fill()</code></a> method when you want to fill
<strong>file fields</strong>; PhantomJS natively only allows the use of CSS3 selectors in
<a href="http://code.google.com/p/phantomjs/wiki/Interface#uploadFile(selector,_fileName)">its
uploadFile method</a>, hence this limitation.
</p>
</div>
</section>
</div>
<footer>
<hr>
<p>
© 2011-2012 <a href="https://nicolas.perriault.net/">Nicolas Perriault</a> — get
the source code on GitHub: <a href="http://github.com/n1k0/casperjs">n1k0/casperjs</a> —
logo by <a href="http://www.forveillejeremy.com/">Jeremy Forveille</a> -
<a href="https://plus.google.com/106641872690063476159" rel="publisher">Google+</a> -
<a href="http://flattr.com/thing/586241/CasperJS-a-navigation-scripting-and-testing-utility-for-PhantomJS" class="flattr" target="_blank"><img src="http://api.flattr.com/button/flattr-badge-large.png" alt="Flattr this" title="Flattr this" border="0"></a>
</p>
</footer>
</div>
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js"></script><script src="https://apis.google.com/_/apps-static/_/js/gapi/plusone/rt=j/ver=zq4FcWYgLgE.fr./sv=1/am=!wIVbqfszG0CYZd2EOQ/d=1/rs=AItRSTN0vBDDJ0Mm089ZujtbYKaVCW0Geg/cb=gapi.loaded_0" async=""></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript" src="js/jquery.min.js?1348764634138"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js?1348764634138"></script>
<script type="text/javascript" src="prettify/prettify.js?1348764634138"></script>
<script type="text/javascript" src="js/application.js?1348764634138"></script>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-71239-7']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</body></html>
Jump to Line
Something went wrong with that request. Please try again.