使用protractor操作頁面元素 - huang0925－IT工程師數位筆記本

文章出處

Protractor是為Angular JS應用量身打造的端到端測試框架。它可以真實的驅動瀏覽器，自動完成對web應用的測試。Protractor驅動瀏覽器使用的是WebDriver標準，所以使用起來與其他語言實現的WebDriver庫大體相同。當然，我說大體相同那肯定還是有不同的地方。一旦不注意這些不同的地方就會坑到你（我就被成功坑過，所以才有了這篇文章）。

Protractor編寫測試的核心是查找DOM元素，與其交互，然后查看交互后的狀態與你的期望是否一致。所以查找DOM元素并與之交互顯的非常重要。Protractor提供了一個全局函數element，其接受一個Locator對象并返回一個ElementFinder對象。該函數會返回單個元素。如果你想返回多個元素，可以使用element.all函數，其接受一個Locator對象并返回ElementArrayFinder對象。ElementFinder對象有一組方法，用于元素交互，比如click()，getText(),sendKeys等。

Locator對象的創建主要使用全局的by對象，其提供一些API來生成Locator對象以供element或element.all函數使用。

比如：

//根據class名來查找元素
by.css(‘myclass')

//根據id來查找元素
by.id(‘myid')

//根據ng-model名來查找元素
by.model(’name')

//查找綁定了指定名的元素
by.binding(‘bindingname')

//查找指定repeater中的元素
by.repeater(‘myrepeater')

可以看出前兩個Locator的創建方法與其他語言實現的WebDriver的用法基本一樣，而后幾個則專為AngularJS應用設計的，方便在基于AngualrJS框架下寫的web應用中查找頁面元素。這是第一處不同。

另一處不同其他語言實現的WebDriver庫使用Locator找到的元素類型是WebElement，而Protractor則返回的是ElementFinder對象。兩者不同之處是在于ElementFinder對象不會立即與瀏覽器交互，根據指定的Locator來查找到頁面上的元素；而只有當你調用了ElementFinder對象的方法時，它才會真正的與瀏覽器進行交互。一些常用的方法有以下所示。

//這時不會與瀏覽器交互獲取元素信息
var el = element(by.css(‘mycss’));

//點擊元素
el.click();

//給該元素輸入內容
el.sendKeys(’text’);

//清空元素內內容
el.clear();

//獲取指定屬性的值
el.getAttribute(‘value’);

//獲取元素的文本值
el.getText();

請注意這些方法都是異步的。所有的方法返回的是一個promise（我就吃過這個虧，以為返回的是值）。所以比如你想輸出一個元素的值，應該這么寫：

element(by.css(‘myclass’)).getText().then(function(text) {
     console.log(text);
}):

如果你使用expect方法來驗證元素的值時，expect方法會幫你取出promise中值，所以你只用這么寫:

expect(element(by.css(‘myclass’)).getText()).toEqual('確定’);

還有不同的地方在于Protractor支持對元素查找時進行鏈式調用。這樣的功能相當實用。你可以組合element和element.all兩個函數來定位元素。并且Protractor還提供了幾個輔助方法來更方便你的使用。

element.all(locator1).first().element(locator2);
element(locator1).all(locator2);
element.all(locator1).get(index).all(locator2);

element.all函數提供的輔助方法有：

filter：提供一個過濾器過濾其中的元素。

element.all(by.css(‘myclass’)).filter(function(ele, index) {
return ele.getText().then(function(text) {
     return text == ‘確定';
});
});

get：根據索引獲取指定元素。如 element.all(by.css(‘myclass’)).get(0);
first: 獲取第一個元素。 element.all(by.css(’myclass’)).first();
last: 獲取最后一個元素，用法同上。
count：獲取元素個數。

此外還提供了each，map,reduce等方法對列表進行各種操作。

element函數提供的輔助方法有：

locator: 返回locator對象。
getWebElement：返回該ElementFinder包裹的WebElement對象。
all: 查找其一組子元素。
element: 查找其子元素。
isPresent: 元素是否在頁面上展示。

總結起來，Protractor與其它的WebDriver語言實現的區別如下：

Protractor專為AngualrJS應用定制，其自身包含了很多wait操作，保證AngularJS腳本執行完畢后才進行下一步操作，保證了測試的穩定性與健壯性。
Protractor設計的By對象針對AngularJS應用提供了很多實用方法，在定義AngularJS應用頁面時更加輕松。
element函數返回的是ElementFinder對象，其不會立即與瀏覽器交互，除非調用ElementFinder對象的方法。
調用ElementFinder對象的方法返回的是一個promise。（這點很重要）
Protractor在定位元素時支持鏈式調用。