javascript - Page object pattern with protractor -

i trying creat page object files protractor.

my app has following layout. , page object files..

navbar_po.js

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

subnavbar_po.js

var subnavbar = function() {     // define subnavbar elements , 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 , operations     //  .     //  . }; module.exports = page1; 

and access navbar elements follows in test script..

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

is best way?

i don't want define same navbar elements each page object file.

is there other way?

ok, great question, super detailed information too!

🛠 let's it. we'll using es6 syntax!

small structural conventions make project easier maintain , won't need defining same navbar (or other) elements each page object file.

also, suggested filename kebab-case style keep things recognizable project grows :)

navbar_po.js // suggest renaming 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 // suggest renaming 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 // suggest renaming page-one.pageobject.js

import subnavbar './sub-nav-bar.pageobject' // .js @ end can omitted, know it's js! import navbar './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 } 

your test script

pageone.spec.js

if of elements change, ever need change them in relevant pageobject file. nothing else needs changing, not test script!

import pageone './page-one.pageobject');     describe('navigating', () => {    it('should go home , about', () => {      const pageone = new pageone()      pageone.visithomepagethenaboutpage()      // expect statement    } } 

💡 pageobject concept

imagine test script mimics human interaction site. , pageobjects how abstract away , hide needs done user behaviours interact page.

📚 resources

the following great styleguide helps keep things manageable ✨

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

also, checkout (disclaimer: my) curated list on things awesome protractor! make pull request if ever want add anything!

good luck testing!

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