Одномерная структура объекта страницы

Question

Я столкнулся с ситуацией, когда стандартный дизайн объекта страницы является одномерным. Эти страницы очень большие и содержат много (в основном уникальных) разделов страниц.

Существующего свод объектов страницы выглядит следующим образом:

this.pageHeaderLogin = $$('div.header > a.login'); 
this.pageHeaderSignUp = $$('div.header > a.signup'); 
this.pageHeaderContact = $$('div.header > a.contact'); 
this.pageIntroSectionTitle = $$('div.intro > span.title'); 
this.pageIntroSectionText = $$('div.intro > span.description'); 

и так далее, с целыми 50-100 элементов, все непосредственными детьми this.

Мне кажется, что гораздо лучшая структура не будет одномерной, а скорее разделенной на части, подобной структуре страницы. Поэтому я бы предпочел сделать такой объект страницы, как:

this.pageHeader.login = $$('div.header > a.login'); 
this.pageHeader.signUp = $$('div.header > a.signup'); 
... 
this.pageIntroSection.title = $$('div.intro > span.title'); 

и так далее.

К сожалению, мне сказали, что это слишком сложно. Я хотел бы аргументировать, что он не только не сложный, но и более организованный, но все примеры для объектов страницы слишком малы, чтобы проиллюстрировать что-либо за пределами одномерной структуры.

Может ли кто-нибудь указать мне на хорошие примеры не одномерного объекта страницы, который я могу использовать в качестве ссылки, чтобы показать преимущества этого дизайна?

Answer 1

Плоскость всегда лучше, чем вложенная в теорию, и только до тех пор, пока вложенные вещи не станут полезными для чтения, модульности и ремонтопригодности. Я не вижу ничего плохого в том, что внутри объектов страницы есть объекты подстраницы. Делает совершенный смысл, когда объект страницы становится чрезмерно сложным и нуждается в разделении на части.

Мы сделали это для нескольких объектов страницы в нашей тестовой кодовой базе. Мы определили эти виды объектов страницы, как пакеты - каталоги с index.js внутри, образец структуры страницы объекта каталога:

- po 
    -- somepage.po.js 
    -- someotherpage.po.js 
    -- page.po 
    -- index.js 
    -- subpage.po.js 

Где внутри index.js что-то вроде:

var SubPage = require("./subpage.po"), 
var Page = function() { 
    this.somefield = element(by.id("myid")); 

    this.subPage = new SubPage(this); 
} 

module.exports = new Page(); 

Обратите внимание, что мы передаем this в конструктор SubPage здесь - для доступа к полям объекта страницы родителя - может быть удобно в определенных ситуациях.

А вот как это вложенная объект страница может быть использована внутри теста:

var page = requirePO("page"); 

describe("Some Test", function() { 
    it("should do something good", function() { 
     page.somefield.click(); 
     page.subPage.someotherfield.sendKeys("test"); 
    }); 
}); 

requirePO() является функция полезности, которую мы используем для «импорта» объекты на странице, смотрите на:

• Using require with relative paths