Question

我正在尝试使用量角器创建页面对象文件。

我的应用程序具有以下布局。和页面对象文件..

navbar_po.js

var NavBar = function() {
    // define navbar elements and operations
    //  .
    //  .   
};
module.exports = NavBar;

subNavbar_po.js

var SubNavBar = function() {
    // define subnavbar elements and operations
    //  .
    //  .   
};
module.exports = SubNavBar;

page1_po.js

var Page1 = function() {

    this.navbar = function(){
        var navbar = require('./navbar_po.js');
        return new navbar();
    }
    this.subnavbar = function(){
        var subnavbar = require('./subNavbar_po.js');
        return new subnavbar();
    }

    // define Page1 particular elements and operations
    //  .
    //  .
};
module.exports = Page1;

我在测试脚本中按如下方式访问navbar元素。

var page1 = new require('./page1_po.js');   

page1.navbar.something_method();
page1.subnavbar.something_method();

这是最好的方式吗？

我不想为每个网页对象文件定义相同的导航栏元素。

还有其他好方法吗？

Answer 1

好的，很棒的问题，超级详细的信息呢！

让我们开始吧。我们将使用ES6语法！

小的结构约定将使项目更易于维护，并且不需要为每个页面对象文件定义相同的导航栏（或任何其他）元素。

此外，建议的文件名kebab-case样式将有助于在项目增长时保持可识别性：）

navbar_po.js //建议重命名为nav-bar.pageObject.js

export default class NavBar {
  constructor() {
    this.homePageButton = element(by.id('home-button'))
    // more element locators
  }

  function clickHomePageButton() {
    this.homePageButton.click()
  }

  // more operations
}

subNavbar_po.js //建议重命名为sub-nav-bar.pageObject.js

export default class SubNavBar {
  constructor() {
    this.aboutPageButton = element(by.id('about-button'))
    // more element locators
  }

  function clickAboutPageButton() {
    this.aboutPageButton.click()
  }

  // more operations
}

page1_po.js //建议重命名为page-one.pageObject.js

import SubNavBar from './sub-nav-bar.pageObject' // the .js at the end can be omitted, it will know it's JS!
import navBar from './nav-bar.pageObject'

export default class pageOne {
  constructor() {
    this.NavBar = NavBar
    this.SubNavBar = SubNavBar
    // more element locators
  }

  function visitHomePageThenAboutPage() {
    const navBar = new NavBar()
    const subNavBar = new SubNavBar

    navBar.clickHomePageButton()
    subNavBar.clickAboutPageButton()
  }

  // more operations
}

您的测试脚本

pageOne.spec.js

如果您的任何元素发生更改，您只需要在相关的pageObject文件中更改它们。没有别的东西需要改变，甚至不是你的测试脚本！

import PageOne from './page-one.pageObject');   

describe('navigating', () => {
   it('should go to home and about', () => {
     const pageOne = new PageOne()
     pageOne.visitHomePageThenAboutPage()
     // expect statement
   }
}

pageObject概念

想象一下，您的测试脚本模仿人与您网站的互动。而pageObjects是你如何抽象出来并隐藏那些用户行为与你的页面交互所需要做的事情。

资源

以下是一个很棒的风格指南，有助于保持可管理性✨

https://github.com/CarmenPopoviciu/protractor-styleguide

另外，请查看这个（免责声明：我的）精选列表，了解Protractor的所有功能！如果您想要添加任何内容，请提出拉取请求！

祝你好运测试！

https://github.com/chowdhurian/awesome-protractor

Answer 2

也许为此写一个实用程序：

// navbarutil.js
var NavbarUtil = {
    create: function(page) {
        page.navbar = function() {
            return new require('./navbar_po.js')();
        }

        page.subnavbar = function() {
            return new require('./subNavbar_po.js')();
        }
    }
};

module.exports = NavbarUtil;

在您的页面中使用：

var Page1 = function() {
    require('./navbarutil.js').create(this);

    // Define other things here...
}
module.exports = Page1;

带有量角器的页面对象模式

2 个答案: