Selenium Javascript教程 on 重定向学院

（一）初始化环境

Sun, 13 Aug 2017 05:24:16 +0800

MacOS

nodejs版本: 6.2.0
selenium-webdriver版本: 3.4.0
chrome版本: 版本 59.0.3071.86（正式版本）64位
chrome driver版本: ChromeDriver 2.30.477690

Windows

TODO

安装nodejs

TODO

安装selenium webdriver

mkdir se
cd se
cnpm install selenium-webdriver

[selenium-webdriver@*] installed at node_modules/.npminstall/selenium-webdriver/3.4.0/selenium-webdriver (20 packages, use 4s, speed 447.48kB/s, json 34.34kB, tarball 1.54MB)

All packages installed (20 packages installed from npm registry, use 4s, speed 446kB/s, json 22(34.34kB), tarball 1.54MB)

安装chrome driver

chrome driver建议通过科学上网的方式下载。

下载地址

下载完成后请将chromedriver.exe(windows)放到系统PATH中

验证chrome driver是否正确安装，请在命令行中输入

chromedriver -h
Usage: chromedriver [OPTIONS]

Options
 --port=PORT port to listen on
 --adb-port=PORT adb server port
 --log-path=FILE write server log to file instead of stderr, increases log level to INFO
 --verbose log verbosely
 --version print the version number and exit
 --silent log nothing
 --url-base base URL path prefix for commands, e.g. wd/url
 --port-server address of server to contact for reserving a port
 --whitelisted-ips comma-separated whitelist of remote IPv4 addresses which are allowed to connect to ChromeDriver

如能看到上述结果则证明安装成功

（二）实战: 最简单的自动化脚本

Sat, 12 Aug 2017 08:26:17 +0800

目的

熟悉selenium webdriver 代码套路
体验元素定位的最简单情形
学会如何模拟输入键盘按键

如何学习

将代码抄一遍，然后精读一遍，了解每一行代码的意义。

场景

本节我们需要使用selenium打开chrome浏览器，跳转到百度首页(http://www.baidu.com)，在搜索框中输入selenium并按下回车键。

代码

新建文件simple_automation_script.js，并键入下面的内容。


var webdriver = require('selenium-webdriver'),
 By = webdriver.By,
 Key = webdriver.Key;

var dr = new webdriver.Builder().forBrowser('chrome').build();

dr.get('http://www.baidu.com')
dr.findElement(By.id('kw')).sendKeys('selenium');
dr.findElement(By.id('kw')).sendKeys(Key.RETURN);

console.log('quit driver');
dr.quit();

运行

在命令行中运行

node simple_automation_script.js

常见错误

WebDriverError: unknown error: unhandled inspector error: {"code":-32000,"message":"Cannot navigate to invalid URL"}

这是get时url拼写错误导致的，检查dr.get('http://www.baidu.com')这一行url地址是否准确。

NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"*[id="www"]"}

selenium找不到元素时会报的错，这是selenium开发者最常见的错误，没有之一。上面错误提示中很明确的告诉我们，页面上没有id为www的元素。遇到这种问题时，我们需要多尝试几种定位元素的方式。

总结

new webdriver.Builder('browser name').build()语句可以打开我们指定的浏览器，另外使用Builder，我们还可以使用环境变量在运行时动态指定浏览器类型，这对于持续集成来说非常方便;
dr.findElement(By.id('element id'))语句使用id来定位具体的元素;
element.sendKeys('something')语句可以向文本框中输入具体的内容;
Key.RETURN代表回车键，这些具体的键值通常与sendKeys配合使用;

原始封面

（三）查看文档

Fri, 11 Aug 2017 07:33:35 +0800

官方文档

官方文档是最权威的参考资料。在绝大多数情况下我们应该首先从官方文档里获取帮助，如果实在是找不到结果，再考虑其他方式。

selenium javascript 版本的文档在这里

stackoverflow

除了官方文档，stackoverflow也是一个非常好的选择，很多时候去一些具体场景的使用问题，这里都有答案。

selenium javascript的问题一般都列在这里，我们可以通过google搜索或者直接在stackoverflow的站内进行搜索。

github

除了浏览源码之外，我们还可以在github上查看selenium的wiki以及查看selenium的已知问题。

如果你想对selenium有进一步的了解，请看这里。

如果你遇到了一些无法解决的问题，不妨在这里搜索一下，可能这是官方的1个bug，在后续的版本中可能有所改进。

原始封面

（四）通过id去定位页面上的元素

Thu, 10 Aug 2017 07:27:57 +0800

关于定位

UI的自动化测试的主要操作就是找到页面上的元素并且操作元素。找到元素一般有2个目的

操作元素: 比如点击，输入内容之类的
获取这个元素的某些属性: 比如获取一个段落元素(p)的内容，通过这个内容去验证测试是否达到了预期的效果(断言)

定位方式

selenium的javascript binding支持下面一些定位方法

By.className( name )
By.css( selector )
By.id( id )
By.js( script, …var_args )
By.linkText( text )
By.name( name )
By.partialLinkText( text )
By.xpath( xpath )

在这些定位方式里，最简单最常用的定位方式就是通过元素的id进行定位

目的

熟悉selenium webdriver 定位方式
学会通过id属性去定位元素
学会使用sendKeys()方法

练习对象

我们使用html5-test-page作为我们的练习对象。

将html代码拷贝一份并保存到本地，文件名为index.html。

场景

我们将使用id定位下图所示的输入框，并输入一些内容

代码

新建文件by_id.js，并键入下面的内容。

var path = require('path');
var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var testFile = "file://" + path.join(__dirname, "index.html")

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile)

dr.findElement(By.id('input__text')).sendKeys('测试教程网');
dr.findElement(By.id('input__password')).sendKeys('password');
dr.findElement(By.id('input__webaddress')).sendKeys('http://www.itest.info');
dr.findElement(By.id('input__emailaddress')).sendKeys('service@itest.info');
dr.findElement(By.id('input__phone')).sendKeys('13888888888');
dr.findElement(By.id('input__search')).sendKeys('keywords');
dr.findElement(By.id('input__text2')).sendKeys('6666666');
dr.findElement(By.id('input__text3')).sendKeys('should be error');
dr.findElement(By.id('input__text4')).sendKeys('should be valid');

运行结果

如下图所示

（五）通过name去定位页面上的元素

Wed, 09 Aug 2017 01:45:25 +0800

表单元素

一般来说表单元素的标签大多出现在<form></form>标签中，比如

<input type="text">: 单行文本框
<input type="checkbox">: checkbox
<input type="radio">: radio
<select><option></option></select>: 下拉框
<textarea></textarea>: 多行文本

如果这样元素有name属性的话，建议使用name属性去定位，因为相比较其他属性，name属性更加稳定。

有一些元素比如checkbox和radio往往有多个name属性相同的元素，如下面的html代码所示

<ul class="list list--bare">
 <li><label for="radio1"><input id="radio1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>
 <li><label for="radio2"><input id="radio2" name="radio" type="radio" class="radio"> Option 2</label></li>
 <li><label for="radio3"><input id="radio3" name="radio" type="radio" class="radio"> Option 3</label></li>
</ul>

这时候也可以使用name属性定位，不过需要用到后面讲的定位一组元素的知识了。

目的

熟悉selenium webdriver 定位方式
学会通过name属性去定位元素

示例代码

// <input name="username" />
dr.findElement(By.name('username')).sendKeys('测试教程网');


// <input name="password" type="password" />
dr.findElement(By.name('password')).sendKeys('就不告诉你');

原始封面

（六）通过className去定位页面上的元素

Tue, 08 Aug 2017 02:28:40 +0800

为什么是className

用className定位实际上是通过元素的html属性class定位，由于最早的webdriver client版本是使用java实现的，java中class是一个保留字，class不给用，所以就使用了className来替代。

复合的class属性

selenium不支持复合的class属性。比如class="col-md-1 col-sm-2"，我们只能通过col-md-1或者是col-sm-2来定位，不能同时使用这2个class进行定位。

目的

熟悉selenium webdriver 定位方式
学会通过class属性去定位元素

练习对象

我们使用html5-test-page作为我们的练习对象。

将html代码拷贝一份并保存到本地，文件名为index.html。

场景

我们将使用className定位下面html代码所示的输入框，并输入一些内容

<p>
 <label for="input__text3" class="error">Error</label>
 <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
</p>
<p>
 <label for="input__text4" class="valid">Valid</label>
 <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p>

代码

var path = require('path');
var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var testFile = "file://" + path.join(__dirname, "index.html")

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile)

dr.findElement(By.className('is-error')).sendKeys('should be error');
dr.findElement(By.className('is-valid')).sendKeys('should be valid');

运行结果

如下图所示

原始封面

（七）通过linkText去定位页面上的元素

Mon, 07 Aug 2017 02:59:32 +0800

链接的定位

链接可以使用By.linkText和By.partialLinkText的方式去定位。

链接的html标签是<a></a>。

看这个html代码<a href="http://www.itet.info">这就是linkText<a>，这里**[这就是linkText]** 便是这个链接的linkText，partialLinkText指的是部分的链接文本，如果链接的文本过长的时候，使用partialLinkText会起到简化代码的作用。

目的

熟悉selenium webdriver 定位方式
学会通过linkText和partialLinkText属性去定位元素
学会使用getAttribute()方法获取html元素的属性
学会使用then()方法传入回调函数来搞定Thenable的Promise

练习对象

我们使用html5-test-page作为我们的练习对象。

将html代码拷贝一份并保存到本地，文件名为index.html。

场景

定位下面html代码所示的a元素，并打印这些元素的href属性

<ul>
 <li><a href="#text__headings">Headings</a></li>
 <li><a href="#text__paragraphs">Paragraphs</a></li>
 <li><a href="#text__blockquotes">Blockquotes</a></li>
 <li><a href="#text__lists">Lists</a></li>
 <li><a href="#text__hr">Horizontal rules</a></li>
 <li><a href="#text__tables">Tabular data</a></li>
 <li><a href="#text__code">Code</a></li>
 <li><a href="#text__inline">Inline elements</a></li>
</ul>

代码

var path = require('path');
var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var testFile = "file://" + path.join(__dirname, "index.html");

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile);

dr.findElement(By.linkText('Headings')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.linkText('Paragraphs')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.linkText('Blockquotes')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.linkText('Lists')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.linkText('Horizontal rules')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.linkText('Tabular data')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.linkText('Code')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.findElement(By.partialLinkText('Inline')).getAttribute('href').then(function(href) {
 console.log(href);
});

dr.quit();

运行结果

xxxx代表你的本机index.html的路径

（八）通过css选择器去定位页面上的元素

Sun, 06 Aug 2017 03:41:18 +0800

css选择器

火狐的css教程应该是比较权威的css入门教程了。

对于selenium自动化测试来说，大家只需要掌握一些必备的css选择器知识就好了。

目的

熟悉selenium webdriver 定位方式
学会通过css选择器去定位元素

练习对象

我们使用html5-test-page作为我们的练习对象。

将html代码拷贝一份并保存到本地，文件名为index.html。

场景

定位下面html代码所示的输入框，并使用sendKeys输入一些内容。

<p>
 <label for="input__search">Search</label>
 <input id="input__search" type="search" placeholder="Enter Search Term">
</p>
<p>
 <label for="input__text2">Number Input</label>
 <input id="input__text2" type="number" placeholder="Enter a Number">
</p>
<p>
 <label for="input__text3" class="error">Error</label>
 <input id="input__text3" class="is-error" type="text" placeholder="Text Input">
</p>
<p>
 <label for="input__text4" class="valid">Valid</label>
 <input id="input__text4" class="is-valid" type="text" placeholder="Text Input">
</p>

代码

var path = require('path');
var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var testFile = "file://" + path.join(__dirname, "index.html");

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile);

// id selector
dr.findElement(By.css('#input__search')).sendKeys('测试教程网');
// attribute selector
dr.findElement(By.css('input[type="number"]')).sendKeys('66666');
// class selector
dr.findElement(By.css('.is-error')).sendKeys('should be error');
// class selector
dr.findElement(By.css('.is-valid')).sendKeys('should be valid');

运行结果

如下图所示

（九）通过xpath去定位页面上的元素

Sat, 05 Aug 2017 02:49:18 +0800

xpath教程

自学xpath

xpath语法要点

nodename 选取此节点的所有子节点。
/ 从根节点选取。
// 从匹配选择的当前节点选择文档中的节点，而不考虑它们的位置。
. 选取当前节点。
.. 选取当前节点的父节点。
@ 选取属性。

示例代码

// <input id="input__text2" type="number" placeholder="Enter a Number">
dr.findElement(By.xpath('//input[@type="number"]')).sendKeys('66666');

总结

css和xpath选择器大家只需要精通其中一种就可以了。

原始封面

（十）模拟键盘按键

Fri, 04 Aug 2017 02:49:18 +0800

sendKeys

sendKeys()方法可以用来模拟用户按下键盘，组合键比如ctrl+c等也可以模拟。

目的

学会使用sendKeys方法
学会使用模拟特殊按钮

场景

测试中我们经常会打开一个页面，然后一下往下拉，直到滚动条拉到最底部，这怎么用selenium来实现呢？

其实我们可以用模拟按空格键的方式实现。大家都知道，在页面上一直按空格键，页面就会到达最底部，当然这并不精确，但大多数时候都是管用的。

下面我们就用代码实现打开qq首页，然后模拟按10下空格键，使页面滚动到最最底部。

代码

var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var Key = webdriver.Key;

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get('http://www.qq.com');

// 把页面的body找到，在body上模拟按钮，这是整页面模拟按键事件的小技巧
var body = dr.findElement(By.css("body"));

// 每隔1.5s按一次空格键
// setTimeout在js binding中相当于其他binding中的sleep功能
for (var i = 0; i < 10; i++) {
 setTimeout(function() {
 body.sendKeys(Key.SPACE);
 }, i * 1500);
}

运行结果

页面会缓慢的滚到最底部，如果你的页面滚到中间就停住了，增加滚动次数即可。

原始封面

（十一）ActionSequence

Thu, 03 Aug 2017 02:49:18 +0800

组合事件

当页面的交互比较复杂的时候，我们可能会使用到组合事件。比如先把鼠标移动到某个元素上，然后按住鼠标，将该元素拖到另一个地方。为了完成这种操作，我们就需要使用组合事件ActionSequence

组合事件中，我们可以组合鼠标和键盘的操作，这些操作将根据我们组合的顺序依次执行。

基本用法

直接使用WebDriver.actions()进行调用，不需要额外的初始化工作;
只有显示调用了perform()方法才让所有动作真正得到执行；简而言之，一定要调用perform();

driver.actions().
 keyDown(Key.SHIFT).
 click(element1).
 click(element2).
 dragAndDrop(element3, element4).
 keyUp(Key.SHIFT).
 perform();

实例方法

click( opt_elementOrButton, opt_button ): 单击，相当于把鼠标移动到元素的中心，然后点击左键
doubleClick( opt_elementOrButton, opt_button ): 双击, 相当于把鼠标移动到元素的中心，然后双击左键
this.dragAndDrop( element, location ): 拖拽，第1个参数是拖谁(WebElement)，第2个参数是拽到哪里，可以是WebElement，也可以是坐标{x: number, y: number}
this.keyDown( key ): 按下一个键，必须是{ALT, CONTROL, SHIFT, COMMAND, META}中的一个，会一直按着，除非调用keyUp()进行松开
this.keyUp( key ): 松开一个键，必须是{ALT, CONTROL, SHIFT, COMMAND, META}中的一个
this.mouseDown( opt_elementOrButton, opt_button ): 按下鼠标，除非mouseUp，否则不松开
this.mouseMove( location, opt_offset ): 把鼠标移动到元素的中心或者具体位置，当然，第2个参数可以也可以增加1个偏移量, {x: number, y: number}
this.mouseUp( opt_elementOrButton, opt_button ): 松开鼠标

（十二）定位一组元素

Wed, 02 Aug 2017 07:27:57 +0800

定位一组元素

定位一组元素一般有如下的作用

找到一组属性部分相同的元素，遍历元素，做一些批量操作
找到一组属性部分相同的元素，遍历元素，返回1个或几个特定的元素，做更精确的定位

findElements方法可以定位一组元素。该方法的参数跟findElement方法一致。

目的

学会使用findElements方法
学会使用getAttribute方法

场景

打印测试教程网中所有的selenium javascript教程的链接

代码

var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get('http://www.testclass.net/selenium_javascript/');

dr.findElements(By.css('.post-stub a')).then(function(links){
 for (var i = 0; i < links.length; i++) {
 links[i].getAttribute('href').then(function(href) {
 console.log(href);
 });
 }
});
dr.quit();

运行结果

如下所示

http://www.testclass.net/selenium_javascript/init/
http://www.testclass.net/selenium_javascript/simple_automation_scripts/
http://www.testclass.net/selenium_javascript/view_document/
http://www.testclass.net/selenium_javascript/by_id/
http://www.testclass.net/selenium_javascript/by_name/
http://www.testclass.net/selenium_javascript/by_classname/
http://www.testclass.net/selenium_javascript/by_link_text/
http://www.testclass.net/selenium_javascript/by_css/
http://www.testclass.net/selenium_javascript/by_xpath/
http://www.testclass.net/selenium_javascript/keyboard/
http://www.testclass.net/selenium_javascript/action_sequence/
......
......
......
......

原始封面

（十三）切换frame

Tue, 01 Aug 2017 07:27:57 +0800

为什么要切换

当我们要定位的元素位于页面中的iframe或frame标签中时，我们必须将定位的上下文切换到对应的frame中去，否则我们将没有办法定位到frame中的元素，这是套路，可以先无脑记住。

目的

学会使用switchTo().frame(id)方法

switchTo().frame(id)方法详解

id可以是1个数字，从0开始。switchTo().frame(0)表示切换到页面上的第1个frame，依此类推;
id也可以是1个WebElement对象，也就是需要切换到的frame;
id可以是null，等于是调用了switchTo().defaultContent()方法;

switchTo().defaultContent()方法

切换回到主页面，调用这个方法会将定位的上下文切回主页面，此后就可以继续定位主页面上的元素了。

示例代码

var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get('some url');

// 切换到第2个frame进行元素定位
dr.switchTo().frame(1).then(function() {
 dr.findElement(By.id('this-element-is-in-frame'));
});

// 切换到第id==example-frame的frame中进行元素定位
dr.findElement(By.id('example-frame')).then(function(iframe) {
 dr.switchTo().frame(iframe).then(function() {
 dr.findElement(By.id('this-element-is-in-frame'));
 });
});

// 切换回主页面
dr.switchTo().defaultContent();

原始封面

（十四）处理下拉列表 select

Tue, 01 Aug 2017 01:49:18 +0800

什么是下拉列表

<select id="select">
 <optgroup label="Option Group">
 <option>Option One</option>
 <option>Option Two</option>
 <option>Option Three</option>
 </optgroup>
</select>

下拉列表的标签是select，如上所示，其中

select表示下拉列表
option表示列表里的子项

上面的html里，这个下拉列表中一共有3项，分别是Option One, Option Two和Option Three。

目的

学会选择下拉列表里的特定项目
学会使用层级定位

场景

选择上面html代码所示的下拉列表的最后一项，也就是Option Three。

代码


var path = require('path');
var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var testFile = "file://" + path.join(__dirname, "index.html")

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(testFile)

dr.findElement(By.id('select')).then(function(select) {
 dr.findElements(By.css('option')).then(function(options) {
 options[options.length - 1].click();
 });
});

运行结果

原始封面

（十五）切换窗口(标签)

Mon, 31 Jul 2017 23:49:18 +0800

切换窗口

有时候我们点击链接会弹出新窗口，我们需要去新窗口继续定位和操作元素，这时候就需要用到切换窗口的操作了。

switchTo().window(name_or_handle)方法可以切换到目标窗口。

一般来说，不建议大家直接使用上面的方法去切换，更明智的做法是获取要打开的窗口的链接，然后直接用get访问该链接，这样就不需要写切换窗口的代码了。

switchTo().window(name_or_handle)

该方法的参数有可以是

窗口的name，这是为了兼容以前的实现，至于窗口的name是什么，我不太清楚
窗口句柄，使用driver.getAllWindowHandles()句柄就可以返回浏览器中所有的打开的标签句柄了

目的

学会使用switchTo().window(name_or_handle)方法

示例代码

下面代码演示了如何遍历浏览器所有的标签，并逐一切换过去

dr.getAllWindowHandles().then(function(handles) }{
 for (var i = 0; i < handles.length; i++) {
 dr.switchTo().window(handles[i]);
 }
});

原始封面

（十六）执行javascript

Mon, 31 Jul 2017 02:49:18 +0800

执行javascript

使用driver.executeScript(js)方法会在当前的定位上下文里执行相应的js脚本。

传参

executeScript方法支持向脚本中传入参数，所有参数的参数都可以在脚本中通过arguments对象来引用。我们可以传入下列类型的参数:

boolean
number
string
WebElement:也就是我们定位到的页面对象
Array或者是Object: 只要里面的每一项都是上面的类型就好了

返回值

同样的，我们可以接收js脚本的返回值，返回值有下面一些情况

如果js返回HTML元素，那么该元素会自动被封装成WebElement
null 或者 undefined会被转成null
boolean, number, string 不做转换
function会被转成相应的字符串表示
Array和Object中的每一项都按照上面的规则转换

目的

学会使用executeScript(js)方法
学会向js脚本中传参
学会从js脚本中接收返回值

场景

打开百度首页

先隐藏掉百度一下按钮
然后返回页面上所有导航链接的文本
最后把页面背景变成黑色

代码

var path = require('path');
var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var url = "http://www.baidu.com/";

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get(url)

// 先隐藏掉百度一下按钮
// 通过arguments[0]传入百度一下按钮
var hideBtn = "arguments[0].style.display='none';"

dr.executeScript(hideBtn, dr.findElement(By.id('su')));


// 然后返回页面上所有导航链接的文本
// 通过return返回需要的结果
var linkTexts = "return $('.mnav').text()"
dr.executeScript(linkTexts).then(function(texts) {
 console.log(texts);
});

// 最后把页面背景变成黑色

dr.executeScript("document.body.style.backgroundColor='black'");

运行结果

浏览器

（十七）alert confirm 和 prompt

Mon, 31 Jul 2017 01:49:18 +0800

alert confirm prompt

原生的javascript弹出框，各个浏览器的实现不一样，外观也不太一样。

这些弹出框会阻止页面上的所有操作，因此每次这些框弹出来以后，我们必须想办法让这些东西消失掉，否则脚本无法往下进行下去。

一般的处理方式

当alert弹出之后，我们可以通过类似下面的代码去处理alert

driver.switchTo().alert().dismiss();
driver.switchTo().alert().accept();

切换到alert/confirm/prompt之后，我们可以进行如下的后续动作

accept(): 接受,点ok
dismiss(): 点取消
getText(): 拿到提示文本
sendKeys( text ): 如果是prompt的话，可以用该方法输入一些内容
authenticateAs( username, password ): 如果是basic authentication的话，可以通过该方法来输入用户名和密码

一劳永逸的处理方式

如果我们不在乎alert上提示的内容，只想页面上不弹出alert/confirm/prompt的话，可以通过js来覆盖这些方法的原生实现，从而达到禁用弹出框的效果，比如下面的代码就演示了如何禁用alert。

var banAlert = 'window.alert = function(msg){}'
driver.executeScript(banAlert);

这样在测试过程中，所有的alert都不会弹出。

原始封面

（十八）截图

Sun, 30 Jul 2017 02:49:18 +0800

截图

在测试用例失败的时候进行截图，这是大家经常会遇到的需求。

目的

学会使用takeScreenshot()方法

场景

下面我们就用代码实现打开测试教程网 selenium javascript教程，然后截图的功能

代码

var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var Key = webdriver.Key;

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get('http://www.testclass.net/selenium_javascript/');
dr.takeScreenshot().then(function(data) {
 require('fs').writeFile('pic.png', data, 'base64');
 dr.quit();
})

运行结果

脚本目录下会出现pic.png文件。

原始封面

（十九）wait和sleep

Sat, 29 Jul 2017 02:48:18 +0800

wait( condition, opt_timeout, opt_message )

wait方法一般用来等待页面上某些条件得到满足后才继续执行脚本。比如等待页面上某个弹出框出现，等某个元素可以被定位到之类。

wait方法中可以传入Condition表示一般性条件和WebElementCondition。

如果传入的元素级条件被满足，那么wait方法会返回 WebElementPromise，也就是说可以直接返回满足条件的元素。

如果在规定的时间内(也就是第2个参数)没有等到条件被满足，那么该方法会抛出异常。

一般性用法示例：

// 在10s内id是foo的元素被定位到，然后点击之
var button = driver.wait(until.elementLocated(By.id('foo')), 10000);
button.click();

另外wait还可以将执行中的脚本暂停住一段时间，直到第1个参数中的异步操作处理完毕，如下所示

var started = startTestServer();
driver.wait(started, 5 * 1000, 'Server should start within 5 seconds');
driver.get(getServerUrl());

sleep

sleep可以不管任何情况直接将执行中的脚本直接暂停一段时间。

console.log('start')
driver.findElement(By.css('.kls')).click();
// 等待3s
driver.sleep(3000)
driver.quit()

sleep在某些时候非常好用，但是希望大家不要乱用，因为这会拖慢脚本的执行速度。

原始封面

（二十）until

Thu, 27 Jul 2017 02:49:18 +0800

until

until一般跟wait一起用，用于等待页面上的一些条件被满足

条件一览

ableToSwitchToFrame(frame): 直到selenium可以将定位上下文切换到frame里
alertIsPresent(): 直到alert出现
elementIsDisabled(element): 直到元素灰掉，不能被点击
elementIsEnabled(element): 直到元素可以被点击
elementIsNotSelected(element): 直到元素不可选
elementIsNotVisible(element): 直到元素不可见
elementIsSelected(element): 直到元素可选
elementIsVisible(element): 直到元素可见
elementLocated(locator): 最常用，直到元素可以被定位
elementTextContains(element, substr): 直到元素的text包含substr
elementTextIs(element, expected_text): 直到元素的text是expected_text
elementTextMatches(element,regex): 直到元素的text满足正则表达式regex
elementsLocated(locator): 直到一组元素被定位
stalenessOf(element): 直到元素被dom树移除或页面刷新
titleContains(substr): 直到页面title包含substr
titleIs(expected_title): 直到页面的title是expected_title
titleMatches(regex): 直到页面的title满足正则表达式regex
urlContains(substrUrl): 直到页面url包含substrUrl
urlIs(expected_url): 直到页面的url是expected_url
urlMatches(regex): 直到页面的url满足正则表达式regex

自定义条件

until还允许我们自定义条件。我们只需要传入1个回调，该回调返回真值(true)就代表等待的条件被满足。

在javascript，真值表示所有不是null, undefined, false, 0, 或空字符串的值。

driver.wait(function() {
 return driver.getTitle().then(function(title) {
 return title === '测试教程网';
 });
}, 1000);

原始封面

（二十一）断言

Thu, 20 Jul 2017 02:49:18 +0800

测试用例与断言

测试用例中至少需要包含1个断言，没有断言的测试脚本不能称为测试用例。

断言就是预期和实际的比较，如果预期不等于实际，脚本将会报错。

selenium 自带断言

selenium 自带了一些断言，具体看断言。

场景

我们下面实现打开测试教程网并做2个断言

页面title包含测试教程网几个字
页面url包含testclass几个字

代码

var webdriver = require('selenium-webdriver'),
 By = webdriver.By;

var assert = require('selenium-webdriver/testing/assert');

var dr = new webdriver.Builder().forBrowser('chrome').build();
dr.get('http://www.testclass.net/');

dr.getTitle().then(function(title) {
 assert(title).contains('测试教程网');
});

dr.getCurrentUrl().then(function(url) {
 assert(url).contains('testclass');
});

dr.quit()

运行结果

上面断言全部通过的时候看不到任何的结果，大家可以试着修改一下断言，让断言失败，这时候就应该可以看到类似下面的信息

AssertionError: 测试教程网 · 测试教程网.indexOf(测试教程网12443) !== -1

测试框架

在做真实的测试时，我们一般会用测试框架配合selenium一起来实现复杂的场景测试和测试报告的生成，在这里向大家推荐一些测试框架

mocha: 强烈推荐，灵活简单，可以配合selenium断言一起用
qunit: 简单好用
jest: facebook出品，大树底下好乘凉
tape: 足够简单

原始封面