Page object pattern with protractor

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

Может написать утилиту для этого:

// 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; 

Answer 2

Хорошо, большой вопрос, супер подробную информацию тоже!

Пойдем к нему. Мы будем использовать синтаксис ES6!

Небольшие структурные соглашения облегчат обслуживание проекта и не будут нуждаться в определении одного и того же навигационного (или любого другого) элемента для каждого объекта объекта объекта.

Кроме того, предлагаемое имя файл кебаб случай стиль поможет сохранить вещи узнаваемых как ваш проект растет :)

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

Кроме того, проверка этого (отказ от ответственности: мой) Куратор список по всем удивительным для транспортир! Сделайте запрос на тяну, если вы когда-нибудь захотите что-нибудь добавить!

Испытание удачи!

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