在量角器中正确使用页面对象模式答案

【问题标题】：Using Page Object Pattern Correctly in Protractor在量角器中正确使用页面对象模式
【发布时间】：2017-10-13 16:45:24
【问题描述】：

我有一个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>

这是页面对象的代码：

    '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 定位器，因为它看起来不太好，而且这是一种不好的做法。我会感谢对我有帮助的建议。

【问题讨论】：

这并不能直接回答你的问题，但我推荐页面对象的星盘框架。在我看来，它会让你的事情变得更容易。
可以举个例子吗？

标签： javascript angularjs protractor

【解决方案1】：

我会将完整的 map() 块移动到页面对象中：

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();

【讨论】：

那么我的测试会是什么样子？这意味着如果我有 3 个地图，那么我会移动所有 3 个内部页面对象？
@Dinero 您的测试将使用这个解析为对象数组的getStat() 函数。你还有哪些地图？谢谢。
我会有类似的东西 name: stat.element(by.css('#name1')).getText(), value: stat.element(by.css('#value1') ).getText() 我可能有大约 5 个这样的地图。
@Dinero 它们是否都与同一个历史页面相关并且都可以位于#all 下？
@Dinero 如果您在页面对象中有 all 作为单独的字段怎么办，请查看更新。

【解决方案2】：

'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();

【讨论】：

【解决方案3】：

是的，定位器、函数（如@alecxe 提及）和条件都属于页面对象。否则就违背了他们的目的。

我会这样做：

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 repo 中有一些页面对象示例

【讨论】：