[英]Using Page Object Pattern Correctly in Protractor
I have an Angular
app and I am using Protractor
to test it. 我有一个
Angular
应用,正在使用Protractor
进行测试。
HTML 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>
Here is the code for the Page Object: 这是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();
Test Code 测试代码
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);
});
});
For some reason I keep getting an error saying getName is not defined. 由于某些原因,我一直收到错误消息,说未定义getName 。 If I change the following two lines
如果我更改以下两行
name: stat.historyPage.getName()
value: stat.historyPage.getValue(),
as 如
name: stat.element(by.css('#name')).getText(),
value: stat.element(by.css('#value')).getText()
It works fine. 工作正常。 I am not sure what the reason is.
我不确定是什么原因。 I really want to avoid writing css locators on my test page as it does not look good and it is a bad practice.
我真的想避免在测试页上写css定位符,因为它看起来不太好,而且是一种不好的做法。 I will appreciate suggestions to help me.
我会很高兴为您提供帮助的建议。
I would move the complete map()
block into the Page Object: 我将完整的
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();
Yup, locators, functions (like @alecxe mentions), and conditions belong in the page object. 是的,定位器,函数(如@alecxe提及)和条件都属于page对象。 Otherwise it defeats the purpose of them.
否则,它将破坏他们的目的。
I would do something like: 我会做类似的事情:
var historyPage = function() {
this.stats = $$('.row');
this.name = $('#name');
this.getValue = $('#value');
};
module.exports = new history_page();
And the test to be something like: 和测试是这样的:
var historyPage = require('./history_page.js');
it('Test', function() {
expect(historyPage.name.getText()).toBe('Albert');
});
Using a map for repeated data is cool... but in your example, I'm not sure I follow. 使用地图重复数据很酷...但是在您的示例中,我不确定是否遵循。
#all
would be unique, so if you're going to map repeated data, you'd probably want to map off of .row
? #all
将是唯一的,因此,如果要映射重复的数据,则可能要映射.row
吗? Not sure. 不确定。 But it might look something like this:
但它可能看起来像这样:
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()
}
});
};
And FWIW, I have some page object examples in my protractor_example repo 和FWIW,我的protractor_example存储库中有一些页面对象示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.