Лучшие практики в транспортире для больших файлов pageObject

Question

В моем предыдущем проекте транспортира JS (в этом новом я сделаю это с TS) я создал один класс для всех моих элементов и еще один для моих функций, что-то вроде этого:

specs
|_reportPage
  |_lib
    |_pageElements.js
    |_pageFunctions.js

Затем я импортировал файлы по мере необходимости, таким образом было легко найти информацию, поскольку список элементов был длинным.

До сих пор все примеры онлайн для проектов транспортировщиков TS - это короткие файлы pageObject с парой элементов и методы, но я хотел бы знать, как правильно действовать, когда странице требуется много элементов и функций / методов.

Например, допустим, у нас есть 5 спецификаций в одной папке, которые тестируют одну и ту же страницу и эта страница полна полей и таблиц.

Что было бы лучшим вариантом здесь? создать 1 объект страницы для каждого элемента c, создать один длинный класс со всеми элементами и функциями ...?

Спасибо за потраченное время!

Answer 1

Чтобы расширить мой ответ, вы можете добавить дополнительный слой как сервис , который может выполнять несколько действий из потока на разных страницах.

Пример кода:

export class E2EService {
    mainPage: MainPage = new MainPage();
    innerPage: InnerPage = new InnerPage();

    doSomethingE2E() {
        this.mainPage.headerPage.weDoSomething();
        this.mainPage.contentPage.weDoSomething()

        this.innerPage.somethingComplicated();
    }
}
export class MainPage {
    public readonly headerPage: HeaderPage;
    public readonly contentPage: ContentPage;

}

export class InnerPage {
    headerPage: InnerHeaderPage;
    contentPage: InnerContentPage;

    public somethingComplicated() {
        this.headerPage.weDoSomething();
        this.contentPage.weDoSomething();
    }
}

export class ContentPage {
    private readonly elements = {
        // elements
    };

    public weDoSomething() {
        // code
    }

    public getElements() {
        return this.elements;
    }
}

export class HeaderPage {
    private readonly elements = {
        btn1: element(by.id('')),
        div: element(by.id('')),
        h2: element(by.id(''))
    };

    public weDoSomething() {
        // code
    }

    public getElements() {
        return this.elements;
    }
}

Answer 2

Основываясь на ответе Infern0, я сделал внедрение зависимостей в классы:

class HeaderElements {
  foo = element(by.id("foo"));
  //List goes on...
}

class HomePageElements {
  foo = element(by.id("foo"));
  //List goes on...
}


export class MainCommonElementsPage {
  headerElements: HeaderElements;
  homePageElements: HomePageElements;
  constructor() {
    this.headerElements = new HeaderElements();
    this.homePageElements = new HomePageElements();
  }    

}

Answer 3

Рекомендации, даже для больших Page Objects, таковы:

Каждая страница должна иметь только 1 класс объекта страницы. Все инструменты, необходимые для доступа к этой странице, должны быть расположены здесь. Думайте о своем объекте страницы как о API.

Не разбивайте PO на разные части, особенно для больших страниц. В конечном итоге вам нужно будет изменить PO, чтобы приспособиться к изменениям контента. Вы бы предпочли изменить 1 файл или 12? Это также гарантирует, что каждый из ваших тестов e2e останется работоспособным после обновления ПО.

У меня есть одно ПО, которое обрабатывает страницу с длинной формой. Форма имеет 12 элементов управления и три кнопки (отменить, сбросить и отправить). У меня есть около 30 функций, которые имеют дело с формой. Мне не нравится иметь более 1-2 методов в моем тесте, поэтому, если он усложняется, я добавляю в ПО.