[英]Using Page Object Pattern Correctly in Protractor
我有一個Angular
應用,正在使用Protractor
進行測試。
HTML
<div id="all" class="row text-center">
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
<div class="dashboard-stat block panel padder-v bg-primary">
<div class="icon hidden-xs">
<img src="../assets/images/icon-ppt-inv.png">
</div>
<div>
<div id="value" class="font-thin h1 block">
{{summary.num | number:0}}
</div>
<div id="name" class="text-muted text-xs">
Albert
</div>
</div>
</div>
</div>
</div>
這是Page對象的代碼:
'use strict';
var history_page = function (){
this.getStat = function(){
return element.all(by.css('#all'));
};
this.getName = function(){
return element(by.css('#name')).getText();
};
this.getValue = function(){
return element(by.css('#value')).getText();
};
};
module.exports = new history_page();
測試代碼
var historyPage = require('./history_page.js');
it('Test', function(){
var history = historyPage.getStat().map(function (stat) {
return {
name: stat.historyPage.getName()
value: stat.historyPage.getValue(),
}
});
history.then(function (value) {
console.log(value);
});
});
由於某些原因,我一直收到錯誤消息,說未定義getName 。 如果我更改以下兩行
name: stat.historyPage.getName()
value: stat.historyPage.getValue(),
如
name: stat.element(by.css('#name')).getText(),
value: stat.element(by.css('#value')).getText()
工作正常。 我不確定是什么原因。 我真的想避免在測試頁上寫css定位符,因為它看起來不太好,而且是一種不好的做法。 我會很高興為您提供幫助的建議。
我將完整的map()
塊移到Page對象中:
var history_page = function () {
this.all = element.all(by.css('#all'));
this.getStat = function() {
return this.all.map(function (stat) {
return {
name: stat.element(by.css('#name')).getText(),
value: stat.element(by.css('#value')).getText()
}
});
};
};
module.exports = new history_page();
'use strict';
var history_page = function (){
this.getStat = function(){
return element.all(by.css('#all'));
};
this.getName = function(index){
return this.getStat().then(function(stats){
return stats[index].get(index).element(by.css('#name'));
};
};
module.exports = new history_page();
是的,定位器,函數(如@alecxe提及)和條件都屬於page對象。 否則,它將破壞他們的目的。
我會做類似的事情:
var historyPage = function() {
this.stats = $$('.row');
this.name = $('#name');
this.getValue = $('#value');
};
module.exports = new history_page();
和測試是這樣的:
var historyPage = require('./history_page.js');
it('Test', function() {
expect(historyPage.name.getText()).toBe('Albert');
});
使用地圖重復數據很酷...但是在您的示例中,我不確定是否遵循。 #all
將是唯一的,因此,如果要映射重復的數據,則可能要映射.row
嗎? 不確定。 但它可能看起來像這樣:
this.getStat = function() {
var that = this;
return this.stats.map(function(stat) {
return {
// not tested...
name: stat.that.name.getText(),
value: stat.that.value.getText()
}
});
};
和FWIW,我的protractor_example存儲庫中有一些頁面對象示例
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.