javascript - 带 Protractor 的页面对象模式

Question

我正在尝试使用 Protractor 创建分页对象文件。

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

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

这是最好的方法吗？

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

还有什么好的方法吗？

Answer 1

好的，很好的问题，还有 super 详细的信息!

🛠 让我们开始吧。我们将使用 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