带量角器的页面对象模式答案

【问题标题】：Page object pattern with protractor带量角器的页面对象模式
【发布时间】：2016-11-17 15:07:51
【问题描述】：

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

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

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;

我在测试脚本中按如下方式访问导航栏元素..

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

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

这是最好的方法吗？

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

还有什么好办法吗？

【问题讨论】：

如果您的代码正在运行并且此问题的目标是改进/优化，请将其发布到 CodeReviews。

标签： javascript selenium selenium-webdriver protractor pageobjects

【解决方案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

【讨论】：

【解决方案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;

【讨论】：