capserjs-prototype(上)

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().

同样看一眼方法

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().

看一眼方法.

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':      '[e-mail]',
        '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"]':      '[e-mail]',
        '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:         '[e-mail]',
        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"]':      '[e-mail]',
        '//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();