Page 297 - AngularJS权威教程

19.20 编写测试 277

by.id by.id使我们能够通过CSS ID来搜索元素。例如，如果我们有一个带有如下id的<div>： 19

<div id="welcome_msg"></div>
可以通过如下代码来定位<div>： 20

element(by.id('welcome_msg'))
21
by.css 可以使用by.css来通过CSS选择符搜索元素。鉴于我们会经常使用CSS选择符来选
择，为方便起见，Protractor把全局变量$绑定到了函数element.by.css上。
22
带有如下HTML：

<div class="container"> 23
<h2>Header</h2>
</div>

可以用以下代码来定位<h2>标题： 24

element(by.css('.container h2'))
4. protractor 25
这个变量是从webdriver转来的Protractor命名空间。它包含静态变量和类，可以用来操作
Seleniun运行的浏览器的DOM实例。把这些全局变量组合成分度器实例，我们就能写出更高效的 26
端对端测试。
27
Protractor假定我们在测试Angular应用，并且期望页面上已有Angular。如果没有
发现，会抛出一个错误。使用browser.driver对象来深入底层的webdriver实例， 28
通过这种方式可以加载非Angular应用，不过这个已经超出本书范围了，此处不
再讨论。
29
例如，我们要测试AngularJS首页上的基础示例：

describe('angularjs homepage', function() { 30
it('should greet the named user', function() {
// 加载AngularJS首页
browser.get('http://www.angularjs.org'); 31

element(by.model('yourName'))
.sendKeys('Ari');
32
var greeting =
element(by.binding('yourName'));
33
expect(greeting.getText())
.toEqual('Hello Ari!');
}); 34
});
使用browser对象，我们可以取回AngularJS首页。我们从这里寻找通过ng-model指令绑定到
一个<input>字段的yourName变量。找到这个元素后，就让Selenium在里面输入Ari。然后我们寻 35
找yourName绑定的元素（这是包在{{ yourName }}模板标签里的元素），并且设置一个预期：它
应当包含文本“Hello Ari!”。 36