問題描述

我有一個 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 id="value" class="font-thin h1 block">{{summary.num |號碼:0}}</div><div id="name" class="text-muted text-xs">阿爾伯特</div></div></div></div></div>

這是頁面對象的代碼:

 '使用嚴格';var history_page = function (){this.getStat = 函數(){return element.all(by.css('#all'));};this.getName = 函數(){return element(by.css('#name')).getText();};this.getValue = 函數(){return element(by.css('#value')).getText();};};module.exports = new history_page();

測試代碼

 var historyPage = require('./history_page.js');它('測試'，函數(){var history = historyPage.getStat().map(function (stat) {返回 {名稱:stat.historyPage.getName()值:stat.historyPage.getValue()，}});history.then(函數(值){控制臺.log(值)；});});

由于某種原因，我不斷收到錯誤消息，提示 getName 未定義.如果我更改以下兩行

名稱:stat.historyPage.getName()值:stat.historyPage.getValue()，

作為

name: stat.element(by.css('#name')).getText(),值:stat.element(by.css('#value')).getText()

它工作正常.我不確定是什么原因.我真的想避免在我的測試頁面上編寫 css 定位器，因為它看起來不太好，而且這是一種不好的做法.我會感謝對我有幫助的建議.

我會將完整的 map() 塊移動到頁面對象中:

var history_page = function () {this.all = element.all(by.css('#all'));this.getStat = function() {返回 this.all.map(function (stat) {返回 {名稱:stat.element(by.css('#name')).getText(),值:stat.element(by.css('#value')).getText()}});};};module.exports = new history_page();

I have an Angular app and I am using Protractor to test it.

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:

    '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. 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. I will appreciate suggestions to help me.

I would move the complete map() block into the Page Object:

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

這篇關于在量角器中正確使用頁面對象模式的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！