帶量角器的頁面對象模式

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;

我在測試腳本中按如下方式訪問導航欄元素..

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;