选择器

CasperJS大量使用选择器来处理DOM，并且可以透明地使用CSS3或XPath表达式。

接下来的例子都基于下面的HTML代码：

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>My page</title>
  6. </head>
  7. <body>
  8.     <h1 class="page-title">Hello</h1>
  9.     <ul>
  10.         <li>one</li>
  11.         <li>two</li>
  12.         <li>three</li>
  13.     </ul>
  14.     <footer><p>©2012 myself</p></footer>
  15. </body>
  16. </html>

CSS3

在默认情况下，CasperJS接受CSS3的选择器字符串来检查元素。

如果你想检查<h1 class="page-title">元素是否存在，你可以这样写：

  1. var casper = require('casper').create();
  3. casper.start('http://domain.tld/page.html', function() {
  4.     if (this.exists('h1.page-title')) {
  5.         this.echo('the heading exists');
  6.     }
  7. });
  9. casper.run();

如果你使用的是测试框架，你应该这样写：

  1. casper.test.begin('The heading exists', 1, function suite(test) {
  2.     casper.start('http://domain.tld/page.html', function() {
  3.         test.assertExists('h1.page-title');
  4.     }).run(function() {
  5.         test.done();
  6.     });
  7. });

其他方便的测试方法都依赖于选择器：

  1. casper.test.begin('Page content tests', 3, function suite(test) {
  2.     casper.start('http://domain.tld/page.html', function() {
  3.         test.assertExists('h1.page-title');
  4.         test.assertSelectorHasText('h1.page-title', 'Hello');
  5.         test.assertVisible('footer');
  6.     }).run(function() {
  7.         test.done();
  8.     });
  9. });

XPath

版本0.6.8新增
同样的，你可以使用XPath表达式作为选择器。

  1. casper.start('http://domain.tld/page.html', function() {
  2.     this.test.assertExists({
  3.         type: 'xpath',
  4.         path: '//*[@class="plop"]'
  5.     }, 'the element exists');
  6. });

为了简化XPath表达式的阅读，CasperJS提供了一个selectXPath助手模块来帮助你：

  1. var x = require('casper').selectXPath;
  3. casper.start('http://domain.tld/page.html', function() {
  4.     this.test.assertExists(x('//*[@id="plop"]'), 'the element exists');
  5. });
警告

CasperJS中唯一对XPath的限制是当你想在casper.fill()方法中填写文件字段时；PhantomJS本身只允许在其uploadFile方法中使用CSS3选择器，这加强了这个限制。