Ruby PageObject Design для похожих разделов страницы - PullRequest
Новая
       27

Ruby PageObject Design для похожих разделов страницы

2 голосов
/ 18 октября 2019

Я использую драгоценный камень Cheezy Page Object (что также означает, что я использую Watir, что также означает, что я использую Selenium). У меня также есть явно загруженный драгоценный камень.

В любом случае, у меня есть сайт, который я моделирую с пользовательским интерфейсом, написанным на угловом изображении, где есть 1 страница, содержание которой изменяется в зависимости от выпадающего списка. Страница имеет несколько разделов, но она одинакова для каждого выпадающего списка. Единственное отличие состоит в том, что я использую локаторы xpath, чтобы добраться туда (в разделах нет уникального идентификатора).

Так, например, у меня есть xpath, например html/body/div[1]/div/div[1]/div/**green**/div/div[1]

, а другой - 

html/body/div[1]/div/div[1]/div/**red**/div/div[1]

Элементы в разделах, как ни странно, имеют одинаковый атрибут ID и одинаковое имя класса. Поэтому я использовал xpath для элементов, поскольку это делает его уникальным локатором.

Проблема в том, что в настоящее время существует семь выпадающих вариантов, каждый из которых имеет несколько разделов, подобных этому. И они имеют явно одинаковые элементы и структуру (с точки зрения конечного пользователя), но когда вы смотрите на html, единственная разница заключается в локаторе, который выглядит так для элементов:

html/body/div[1]/div/div[1]/div/green/div/div[1]/**<element>**

и другоекак 

html/body/div[1]/div/div[1]/div/red/div/div[1]/**<element>**

В моем текущем дизайне я создал одну страницу и создал разделы страницы для каждого раздела на странице. Умножьте количество разделов страницы на количество выпадающих вариантов, и вы увидите, что это много. Некоторые из вариантов действительно генерируют дополнительные элементы, но все же есть общие элементы между всеми разделами. Я также должен продублировать все эти элементы на семи разных страницах, потому что xpath отличается. Есть ли какой-то способ для меня передать какой-то инициализатор в Page_bject page_section, например строку типа a или type-b, а затем на основе этого я также могу выбрать правильный xpath для всех элементов?

Так, если у меня естьтекстовое поле, например, в виде объекта базовой страницы page_section:

text_field(:team, xpath: "...#{type_variable}")

Можно ли сделать что-то вроде section = SomePageObject.page_section_name(type_variable)?

РЕДАКТИРОВАТЬ: Добавление кода объекта страницы для запроса

class BasePO
  include PageObject

  #Option S1 Cards
  page_section(:options_red_card, OptionRedCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red/div[2]/div[2]/div/div/div/div")
  page_section(:options_green_card, OptionGreenCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/green/div[2]/div[2]/div/div/div/div")
  page_section(:options_yellow_card, OptionYellowCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/yellow/div[2]/div[2]/div/div/div/div")

  #Detail S2 Cards
  page_section(:detail_red_card, DetailRedCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red/div[1]/div/div/div")
  page_section(:detail_green_card, DetailGreenCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/green/div[1]/div/div/div")
  page_section(:detail_yellow_card, DetailYellowCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/yellow/div[1]/div/div/div")

end

EDIT2: добавление содержимого page_section для каждого запроса. Все карты опций разделяют эти элементы как минимум. Различные элементы в Карточках с подробностями, но такая же структура, как и у Карточек с вариантами.

1 Ответ

0 голосов
/ 22 октября 2019

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

Вариант 1 - использовать initialize_accessors

Обычно средства доступа выполняются во время компиляции. Однако вы можете использовать метод #initialize_accessors, чтобы отложить выполнение до инициализации объекта страницы (или раздела). Это позволит вам определить ваши методы доступа в базовом классе, который при инициализации вставляет цветовой тип в пути: 

class BaseCard
  include PageObject

  def initialize_accessors
    # Accessors defined with placeholder for the color type
    self.class.text_field(:field1_limit, xpath: "/html/body/some/path/#{color_type}/more/path/input")      
  end
end

# Each card class would define its color for substitution into the accessors
class OptionRedCard < BaseCard
  def color_type
    'red'
  end
end

class OptionGreenCard < BaseCard
  def color_type
    'green'
  end
end

class BasePO
  include PageObject

  page_section(:options_red_card, OptionRedCard, xpath: '/html/body/path')
  page_section(:options_green_card, OptionGreenCard, xpath: '/html/body/path')
end

Вариант 2 - Использование относительных путей

Мой предложенный подход заключается в том, чтобы использовать относительные пути так, чтобы цвет можно было удалить из пути раздела страницы. Из предоставленных объектов вы можете сделать что-то вроде: 

class OptionCard
  include PageObject

  element(:unit) { following_sibling(tag_name: "#{root.tag_name}-unit") }
  div(:field1_limit) { unit_element.tr(index: 1).text_field(index: 0) }
  div(:field1_agg) { unit_element.tr(index: 1).text_field(index: 1) }
  div(:field2_limit) { unit_element.tr(index: 2).text_field(index: 0) }
  div(:field2_agg) { unit_element.tr(index: 2).text_field(index: 1) }
end

class BasePO
  include PageObject

  # Page sections only defined to the top most element of the section (the color element)
  page_section(:options_red_card, OptionCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/red")
  page_section(:options_green_card, OptionCard, xpath: "/html/body/app-component/app-page/div[2]/div/div/div[1]/div/div/div/ngb-tabset/div/div/green")
end
...