Casper prototyp

back()

具體樣式: back()

Moves back a step in browser’s history:

在瀏覽器歷史中回退一步:

casper.start('http://foo.bar/1')
casper.thenOpen('http://foo.bar/2');
casper.thenOpen('http://foo.bar/3');
casper.back();
casper.run(function() {
    console.log(this.getCurrentUrl()); // 'http://foo.bar/2'
});
Also have a look at forward().

同樣看一眼forward()方法

base64encode()

具體樣式: base64encode(String url [, String method, Object data])

Encodes a resource using the base64 algorithm synchronously using client-side XMLHttpRequest.

使用客戶端XMLHttpRequest對象的base64演算法編碼資源

Note:We cannot use window.btoa() because it fails miserably in the version of WebKit shipping with PhantomJS.

筆記:我們不能使用 window.btoa() ,因為該操作在裝載PhantomJS的WebKit版本中失敗.

Example: retrieving google logo image encoded in base64:

例如:使用base64編碼獲取谷歌logo圖:

var base64logo = null;
casper.start('http://www.google.fr/', function() {
    base64logo = this.base64encode('http://www.google.fr/images/srpr/logo3w.png');
});

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

// You can also perform an HTTP POST request to retrieve the contents to encode:  

// 你也可以使用HTTP的Post請求去得到一個內容去編碼:  

var base64contents = null;
casper.start('http://domain.tld/download.html', function() {
    base64contents = this.base64encode('http://domain.tld/', 'POST', {
        param1: 'foo',
        param2: 'bar'
    });
});

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

bypass()

New in version 1.1.

具體樣式: bypass(Numbr nb)

Bypasses a given number of defined navigation steps:

繞過一個定義好的瀏覽步驟:

casper.start();
casper.then(function() {
    // This step will be executed
    //這步將會執行
});
casper.then(function() {
    this.bypass(2);
});
casper.then(function() {
    // This test won't be executed
    //這步將不會執行
});
casper.then(function() {
    // Nor this one
    // 這個仍不會執行
});
casper.run();

click()

具體樣式: click(String selector, [Number|String X, Number|String Y])

Performs a click on the element matching the provided selector expression. The method tries two strategies sequentially:

執行一個點擊在匹配的給定表達式的元素上.這個方法嘗試連續2個步驟:

trying to trigger a MouseEvent in Javascript

1.試著去在javascript中觸發一個滑鼠事件

1. using native QtWebKit event if the previous attempt failed

2.如果先前的嘗試失敗,則會使用原生的QtWebKit事件

Example:

例如:

casper.start('http://google.fr/');
casper.thenEvaluate(function(term) {
    document.querySelector('input[name="q"]').setAttribute('value', term);
    document.querySelector('form[name="f"]').submit();
}, 'CasperJS');
casper.then(function() {
    // Click on 1st result link
    //在第一個結果鏈接上點擊
    this.click('h3.r a');
});
casper.then(function() {
    // Click on 1st result link
    //在第一個結果鏈接上點擊
    this.click('h3.r a',10,10);
});
casper.then(function() {
    // Click on 1st result link
    //在第一個結果鏈接上點擊
    this.click('h3.r a',"50%","50%");
});
casper.then(function() {
    console.log('clicked ok, new location is ' + this.getCurrentUrl());
});
casper.run();

clickLabel()

New in version 0.6.1.

具體樣式: clickLabel(String label[, String tag])

Clicks on the first DOM element found containing label text. Optionally ensures that the element node name is tag:

在第一個包含的的標簽文本的DOM節點點擊.可以選擇確認元素節點是個標簽:

// My link is beautiful
casper.then(function() {
    this.clickLabel('My link is beautiful', 'a');
});

// But my button is sexier
casper.then(function() {
    this.clickLabel('But my button is sexier', 'button');
});

capture()

具體樣式: capture(String targetFilepath, [Object clipRect, Object imgOptions])

Proxy method for PhantomJS’ WebPage#render. Adds a clipRect parameter for automatically setting page clipRect setting and reverts it back once done:

PhantomJS的WebPage的render的代理方法.為自動設置頁面剪裁矩陣,添加了一個剪裁矩陣參數並且一旦完成,就恢復:

casper.start('http://www.google.fr/', function() {
    this.capture('google.png', {
        top: 100,
        left: 100,
        width: 500,
        height: 400
    });
});

casper.run();

New in version 1.1.

The imgOptions object allows to specify two options:

圖片選項對象允許指定兩個參數:

format to set the image format manually, avoiding relying on the filename

人工設定尾碼,避免依賴文件名

quality to set the image quality, from 1 to 100

設置圖片質量,從1-100

Example:

例如:

casper.start('http://foo', function() {
    this.capture('foo', undefined, {
        format: 'jpg',
        quality: 75
    });
});

captureBase64()

具體樣式: captureBase64(String format[, Mixed area])

New in version 0.6.5.

Computes the Base64 representation of a binary image capture of the current page, or an area within the page, in a given format.

計算當前頁面的二進位圖片的截圖,或者頁面內的一個區域,給出的格式.

Supported image formats are bmp, jpg, jpeg, png, ppm, tiff, xbm and xpm.

支持圖片格式是...

The area argument can be either of the following types:

區域的變數可以是如下類型:

String: area is a CSS3 selector string, eg. div#plop form[name='form'] input[type='submit']

區域可以是一個css選擇器,例如...

clipRect: area is a clipRect object, eg. {'top':0,'left':0,'width':320,'height':200}

可以是一個剪裁矩陣,例如...

Object: area is a selector object, eg. an XPath selector

區域可以是一個對象,例如...

Example:

例如:

casper.start('http://google.com', function() {
    // selector capture
    console.log(this.captureBase64('png', '#lga'));
    // clipRect capture
    console.log(this.captureBase64('png', {
        top: 0,
        left: 0,
        width: 320,
        height: 200
    }));
    // whole page capture
    console.log(this.captureBase64('png'));
});
casper.run();

captureSelector()

具體樣式: captureSelector(String targetFile, String selector [, Object imgOptions])

Captures the page area containing the provided selector and saves it to targetFile:

對一個選擇器頁面區域截圖並且保存目標文件:

casper.start('http://www.weather.com/', function() {
    this.captureSelector('weather.png', '#wx-main');
});
casper.run();

New in version 1.1.

The imgOptions object allows to specify two options:

圖片選項對象允許指定兩個選項:

format to set the image format manually, avoiding relying on the target filename

人工設定尾碼,避免依賴文件名

quality to set the image quality, from 1 to 100

設置圖片質量,從1-100

clear()

具體樣式: clear()

New in version 0.6.5.

Clears the current page execution environment context. Useful to avoid having previously loaded DOM contents being still active.

清除當前頁面執行的環境變數.對於避免之前引入的DOM內容仍是有效的.

Think of it as a way to stop javascript execution within the remote DOM environment:

想想這是一個方式在遠程DOM環境避免JavaScript執行:

casper.start('http://www.google.fr/', function() {
    this.clear(); 
    // javascript execution in this page has been stopped
    //在這個頁面javascript已經停止
});
casper.then(function() {
    // ...
});
casper.run();

debugHTML()

具體樣式: debugHTML([String selector, Boolean outer])

Outputs the results of getHTML() directly to the console. It takes the same arguments as getHTML().

直接輸出getHTML()方法的結果到控制台.跟getHtml參數一樣.

debugPage()

具體樣式: debugPage()

Logs the textual contents of the current page directly to the standard output, for debugging purpose:

為了調試,直接記錄當前頁面的文本內容到標準輸出:

casper.start('http://www.google.fr/', function() {
    this.debugPage();
});
casper.run();

die()

標準輸出: die(String message[, int status])

Exits phantom with a logged error message and an optional exit status code:

使用記錄錯誤信息和可選的退出狀態碼退出phantom:

casper.start('http://www.google.fr/', function() {
    this.die("Fail.", 1);
});
casper.run();

download()

具體樣式: download(String url, String target[, String method, Object data])

Saves a remote resource onto the filesystem. You can optionally set the HTTP method using the method argument, and pass request arguments through the data object (see base64encode()):

保存一個遠程資源到文件系統.你能夠用可選的參數去設置HTTP方法,並且傳入data對象的request變數(詳看base64encode()):

casper.start('http://www.google.fr/', function() {
    var url = 'http://www.google.fr/intl/fr/about/corporate/company/';
    this.download(url, 'google_company.html');
});

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

Note:If you have some troubles downloading files, try to disable web security.

筆記:如果你在下載文件遇到一些問題,試著去禁用網頁安全

each()

具體樣式: each(Array array, Function fn)

Iterates over provided array items and execute a callback:

給定數組迭代並且執行一個回調:

var links = [
    'http://google.com/',
    'http://yahoo.com/',
    'http://bing.com/'
];
casper.start().each(links, function(self, link) {
    self.thenOpen(link, function() {
        this.echo(this.getTitle());
    });
});
casper.run();

Hint:Have a look at the googlematch.js sample script for a concrete use case.

提示:看一下Googlematch.js的例子作為一個綜合的使用案例.

eachThen()

具體樣式: eachThen(Array array, Function then)

New in version 1.1.

Iterates over provided array items and adds a step to the stack with current data attached to it:

給定數組迭代並且並且向堆棧添加附加到當前數據的步驟:

casper.start().eachThen([1, 2, 3], function(response) {
    this.echo(response.data);
}).run();

//Here’s an example for opening an array of urls:
//這是一個打開url數組的例子
var casper = require('casper').create();
var urls = ['http://google.com/', 'http://yahoo.com/'];

casper.start().eachThen(urls, function(response) {
  this.thenOpen(response.data, function(response) {
    console.log('Opened', response.url);
  });
});

casper.run();

Note:Current item will be stored in the response.data property.

筆記:當前項目將會保存在response.data屬性中

echo()

具體樣式: echo(String message[, String style])

Prints something to stdout, optionally with some fancy color (see the colorizer module for more information):

列印一些東西到標準輸出,可用一些花哨的顏色(去看colorizer模塊去獲取更多信息):

casper.start('http://www.google.fr/', function() {
    this.echo('Page title is: ' + this.evaluate(function() {
        return document.title;
    }), 'INFO'); // Will be printed in green on the console
});
casper.run();

evaluate()

具體樣式: evaluate(Function fn[, arg1[, arg2[, …]]])

Basically PhantomJS’ WebPage#evaluate equivalent. Evaluates an expression in the current page DOM context:

基礎的PhantomJS的WebPage的evaluate的標配.計算一個表達式在當前DOM:

casper.evaluate(function(username, password) {
    document.querySelector('#username').value = username;
    document.querySelector('#password').value = password;
    document.querySelector('#submit').click();
}, 'sheldon.cooper', 'b4z1ng4');

Understanding evaluate():

The concept behind this method is probably the most difficult to understand when discovering CasperJS. As a reminder, think of the evaluate() method as a gate between the CasperJS environment and the one of the page you have opened; everytime you pass a closure to evaluate(), you’re entering the page and execute code as if you were using the browser console.

理解 evaluate():

在學習casperjs的時候,這個方法的概念很有可能是最困難的.作為提醒,思考evaluate()方法作為一個在casperjs環境和一個你打開頁面的敲門磚.每次當你傳入一個表達式到evaluate()時,你進入到頁面,仿佛你正在使用瀏覽器控制台執行代碼.

Here’s a quickly drafted diagram trying to basically explain the separation of concerns:

這是快速起草的圖表嘗試去基礎的解釋關係的分類:

evaluateOrDie()

具體樣式: evaluateOrDie(Function fn[, String message, int status])

Evaluates an expression within the current page DOM and die() if it returns anything but true:

在當前頁面DOM執行一個表達式,並且如果沒有返回ture,就die掉:

casper.start('http://foo.bar/home', function() {
    this.evaluateOrDie(function() {
        return /logged in/.match(document.title);
    }, 'not authenticated');
});
casper.run();

exit()

具體樣式: exit([int status])

Exits PhantomJS with an optional exit status code.

用一個可選的退出狀態碼退出PhantomJS.

Note: You can not rely on the fact that your script will be turned off immediately, because this method works asynchronously. It means that your script may continue to be executed after the call of this method. More info here.

筆記:你不能依靠你腳本會立即退出的事實,因為這個方法是非同步執行的.意味著你的腳本在調用這個方法後仍會執行.更多信息

exists()

具體樣式: exists(String selector)

Checks if any element within remote DOM matches the provided selector:

檢測是否給定選擇器在遠程DOM中匹配:

casper.start('http://foo.bar/home', function() {
    if (this.exists('#my_super_id')) {
        this.echo('found #my_super_id', 'INFO');
    } else {
        this.echo('#my_super_id not found', 'ERROR');
    }
});
casper.run();

fetchText()

具體樣式: fetchText(String selector)

Retrieves text contents matching a given selector expression. If you provide one matching more than one element, their textual contents will be concatenated:

檢索一個給的選擇器表達式的文本內容.如果你提供了的一個表達式匹配了不止一個元素,他們將會被多行索引:

casper.start('http://google.com/search?q=foo', function() {
    this.echo(this.fetchText('h3'));
}).run();

forward()

具體樣式: forward()

Moves a step forward in browser’s history:

從瀏覽器歷史中前移一步:

casper.start('http://foo.bar/1')
casper.thenOpen('http://foo.bar/2');
casper.thenOpen('http://foo.bar/3');
casper.back();    // http://foo.bar/2
casper.back();    // http://foo.bar/1
casper.forward(); // http://foo.bar/2
casper.run();

Also have a look at back().

看一眼forward方法.

log()

具體樣式: log(String message[, String level, String space])

Logs a message with an optional level in an optional space. Available levels are debug, info, warning and error. A space is a kind of namespace you can set for filtering your logs. By default, Casper logs messages in two distinct spaces: phantom and remote, to distinguish what happens in the PhantomJS environment from the remote one:

在一個可選位置,使用一個可選的等級記錄一個信息.可選等級為debug, info, warning和 error.space變數是你能為你過濾你的日誌設置的.預設情況下,casper日誌文件在兩個獨立的空間:phantom和remote,去辨別從遠程的PhantomJS環境發生了什麼:

casper.start('http://www.google.fr/', function() {
    this.log("I'm logging an error", "error");
});
casper.run();

fill()

具體樣式: fill(String selector, Object values[, Boolean submit])

Fills the fields of a form with given values and optionally submits it. Fields are referenced by their name attribute.

使用values變數填入欄位到一個表格,並且可選是否提交.欄位參考他們的name屬性.

Changed in version 1.1:

To use CSS3 or XPath selectors instead, check the fillSelectors() and fillXPath() methods.Example with this sample html form:

使用CSS3或者XPath選擇器替代,查看fillSelectors()和fillXPath()方法.用這個html表格樣例做例子:

<form action="/contact" id="contact-form" enctype="multipart/form-data">
    <input type="text" name="subject">
    <textearea name="content"></textearea>
    <input type="radio" name="civility" value="Mr"> Mr
    <input type="radio" name="civility" value="Mrs"> Mrs
    <input type="text" name="name">
    <input type="email" name="email">
    <input type="file" name="attachment">
    <input type="checkbox" name="cc"> Receive a copy
    <input type="submit">
</form>

A script to fill and submit this form:

腳本將會填入並且提交表單:

casper.start('http://some.tld/contact.form', function() {
    this.fill('form#contact-form', {
        'subject':    'I am watching you',
        'content':    'So be careful.',
        'civility':   'Mr',
        'name':       'Chuck Norris',
        'email':      '[email protected]',
        'cc':         true,
        'attachment': '/Users/chuck/roundhousekick.doc'
    }, true);
});
casper.then(function() {
    this.evaluateOrDie(function() {
        return /message sent/.test(document.body.innerText);
    }, 'sending message failed');
});
casper.run(function() {
    this.echo('message sent').exit();
});

The fill() method supports single selects in the same way as text input. For multiple selects, supply an array of values to match against:

fill方法支持單個select的操作.對於複合select,提供一個數組去匹配:

<select multiple="" name="category"> <option value="0">Friends<option> <option value="1">Family</option> <option value="2">Acquitances</option> <option value="3">Colleagues<option> </select>

A script to select multiple options for category in this form:

表格中複合文本框分類選項:

casper.then(function() {
   this.fill('form#contact-form', {
       'categories': ['0', '1'] 
        // Friends and Family
   });
});

Warning
The fill() method currently can’t fill file fields using XPath selectors; PhantomJS natively only allows the use of CSS3 selectors in its uploadFile() method, hence this limitation.
Please Don’t use CasperJS nor PhantomJS to send spam, or I’ll be calling the Chuck. More seriously, please just don’t.

警告
fill方法目前不能使用Xpath選擇器填入file的文本.原生PhantomJS只允許在uploadFile方法中使用css選擇器,
所以有這個限制.
請既不要使用casperjs,也不要使用phantomjs去發送垃圾,否則我們將會給Chuck打電話.很嚴肅的,別這麼做
.

fillSelectors()

具體樣式: fillSelectors(String selector, Object values[, Boolean submit])

New in version 1.1.

Fills form fields with given values and optionally submits it. Fields are referenced by CSS3 selectors:

使用values變數填入欄位到一個表格,並且可選是否提交.欄位參考他們的name屬性.

casper.start('http://some.tld/contact.form', function() {
    this.fillSelectors('form#contact-form', {
        'input[name="subject"]':    'I am watching you',
        'input[name="content"]':    'So be careful.',
        'input[name="civility"]':   'Mr',
        'input[name="name"]':       'Chuck Norris',
        'input[name="email"]':      '[email protected]',
        'input[name="cc"]':         true,
        'input[name="attachment"]': '/Users/chuck/roundhousekick.doc'
    }, true);
});

fillLabels()

具體樣式: fillLabels(String selector, Object values[, Boolean submit])

New in version 1.1.

Fills a form with provided field values using associated label text Fields are referenced by label content values:

使用values變數填入欄位到一個表格使用關聯的標簽文本框參考標簽內容的值:

casper.start('http://some.tld/contact.form', function() {
    this.fillLabels('form#contact-form', {
        Email:         '[email protected]',
        Password:      'chuck',
        Content:       'Am watching thou',
        Check:         true,
        No:            true,
        Topic:         'bar',
        Multitopic:    ['bar', 'car'],
        File:          fpath,
        "1":           true,
        "3":           true,
        Strange:       "very"
    }, true);
});
fillXPath()

具體樣式: fillXPath(String selector, Object values[, Boolean submit])

New in version 1.1.

Fills form fields with given values and optionally submits it. While the form element is always referenced by a CSS3 selector, fields are referenced by XPath selectors:

用values變數填寫到表格並且可選擇是否提交.然而表格元元素經常和css3關聯,欄位經常跟xPath選擇器關聯:

casper.start('http://some.tld/contact.form', function() {
    this.fillXPath('form#contact-form', {
        '//input[@name="subject"]':    'I am watching you',
        '//input[@name="content"]':    'So be careful.',
        '//input[@name="civility"]':   'Mr',
        '//input[@name="name"]':       'Chuck Norris',
        '//input[@name="email"]':      '[email protected]',
        '//input[@name="cc"]':         true,
    }, true);
});

Warning:The fillXPath() method currently can’t fill file fields using XPath selectors; PhantomJS natively only allows the use of CSS3 selectors in its uploadFile() method, hence this limitation.

警告:fillXPath方法目前不能使用Xpath選擇器填入file的文本.原生PhantomJS只允許在uploadFile方法中使用css選擇器,所以有這個限制.

getCurrentUrl()

具體樣式: getCurrentUrl()

Retrieves current page URL. Note that the url will be url-decoded:

獲取當前網頁的URL.註意URL將會是url-decoded過的:

casper.start('http://www.google.fr/', function() {
    this.echo(this.getCurrentUrl()); // "http://www.google.fr/"
});
casper.run();

getElementAttribute()

具體樣式: getElementAttribute(String selector, String attribute)

New in version 1.0.

Retrieves the value of an attribute on the first element matching the provided selector:

獲取給定的選擇器的第一個元素的屬性值:

var casper = require('casper').create();
casper.start('http://www.google.fr/', function() {
    require('utils').dump(this.getElementAttribute('div[title="Google"]', 'title')); // "Google"
});
casper.run();

getElementsAttribute()

具體樣式: getElementsAttribute(String selector, String attribute)

New in version 1.1.

Retrieves the values of an attribute on each element matching the provided selector:

獲取給的選擇器所有的元素的屬性值:

var casper = require('casper').create();
casper.start('http://www.google.fr/', function() {
    require('utils').dump(this.getElementsAttribute('div[title="Google"]', 'title')); // "['Google']"
});
casper.run();