Правильное использование шаблона объекта страницы в Транспортире


У меня есть приложение 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 локаторов на моей тестовой странице, как это происходит не выглядит хорошо, и это плохая практика. Я буду признателен за предложения, которые помогут мне.

3 2

3 ответа:

Я бы переместил полный блок 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();
'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) и условия принадлежат объекту страницы. В противном случае это разрушает их цель.

Я бы сделал что-то вроде:

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, у меня есть некоторые примеры объектов страницы в моем транспортировщик_эксперимент РЕПО