[US-12-4] Другой вариант объявления ПО для вивидуса (vividus)

[AlexeyGirin]

Description

##AS-IS
PO объявляется через переменные вида

variables.OnlineShopPage.url=/
variables.OnlineShopPage.TextField.empfehlungenFurDichTextfield=By.xPath(//*[@class='reco_entrypage_skeleton_injection_container' and @data-index='0'])

которые хранятся в файле pages.properties в директории \src\main\resources\properties\suite\web_app

TO-BE

Новый формат ПО - Pizza-Test-main.zip

Нужен дизайн переключения формата представления ПО - видимо комбобокс наподобии выбора аннотации на панели сетапа создания ПО. Но вот как назвать этот комбик и какие у него значения?
PO Type: [Variables | Tables ] ? - ПОДУМАТЬ

Судя по всему они создают файлы ПО в директории \src\main\resources\data\tables\web_app\locators\patternSet
По одному файлу на ПО где файл именуется %ИМЯ_ПЭЙДЖ_ОБЪЕКТА%_page.table
Например:

landing_page.table
loginSignup_page.table

• Поддерживается разбиение страницы на секции (т.е. описание страницы не одним пэйдж обжектом, а несколькими пэйдж объектами которые называют секции). В этом случае формат наименования файов - %ИМЯ_ПЭЙДЖ_ОБЪЕКТА%_fragment.table.
  Например:

footer_fragment.table
productList_fragment.table

Потом - нам придётся к этому вернуться.

• Внутри файла в заголовке присутствует строчка:
  {transformer=FROM_LANDSCAPE} - НЕПОНЯТНО!!! УЗНАТЬ!!!
  и локаторы перечислены в формате:
  |%ИМЯ_ЛОКАТОРА% {тут пробелы} |By.xpath(%ЛОКАТОР%) {тут пробелы}|

• При этом: пробелов в каждой колонке должно быть столько что бы сумма длинны имени локатора (или самого локатора в объвязке) + количество пробелов было равно длинне самого длинного имени в ПО (или самого локатора в обвязке) + 1 (2 - если колонка локаторов)
  Например:

|cartProductByNo              |By.xpath(//*[@class='product-list' or contains(@class,'bag-slice')]//*[@class='product-card' or contains(@class,'product-simple-info')][<productNo>])  |
|cartProduct                  |By.xpath(//*[@class='product-list' or contains(@class,'bag-slice')]//*[@class='product-card' or contains(@class,'product-simple-info')])               |
|deleteProductByNo            |By.xpath((//*[@class='icon-delete' or contains(@class, 'remove-btn')])[<productNo>])                                                                   |
|deselectCheckboxByNo         |By.xpath((//*[@class='product-card-wrapper'])[<productNo>]//*[@id='checkbox-'])                                                                        |
|selectAllNotSelectedCheckbox |By.xpath(//header//*[@data-testid='data-testid']//../*[contains(@class,'checkbox-label') and not(contains(@class,'active'))])                          |
|couponInput                  |By.xpath(//*[@class='apply-discount-input']//input)                                                                                                    |

Definitions of Done:

• Для создания РО в Вивидус - можно переключить формат представления РО
• Формат PO должен быть изменён на табличный

Design:

figma

1. Выбор типа. Когда мы выбираем фреймворк Vividus, под его инпутом появляется новый Radio-Button сдвигая остальные вниз. Значение по умолчанию - Table

2. Колонки

• Таблица из 2 колонок с дефолтным соотношением 3:7
• у обоих колонок должна быть указана минимальная ширина в 100 px, чтобы нельзя было её уменьшить и потерять (100 px - вариативно)

3. Для иерархии локаторов внутри таблицы сдвигаем только значения из первых колонок, сдвигаем так же, как и обычно

4. у каждой колонки снизу скролл бар на белом бэкграунде внутри общего фрейма
   закруглённый, D9D9D9, 5px в толщину, чтобы было консистентно с остальными в плагине

скроллбар прикреплён к последнему локатору, если локаторов мало

5. Дивайдер (между колонками и между скроллом)
   Default - Neutral/4 F0F0F0 1px
   Hover - Neutral/6 BFBFBF 1px
   Active (когда мы зажали мышкой и начали двигать) - Neutral/6 BFBFBF 2px

6. От стандартного РО наследуем всё остальное:

• Размер строк
• Все состояния (ховер, выбор чекбокса, выделение в группу)

• Иконки копирования, меню (само меню тоже)

7. Результат РО

К тому что есть добавляем колонки+дивайдер между ними и скроллбары под последним локатором в списке

Если строк много, то скроллы по нижнему краю поверх локаторов

MVP вариант на основе 5 анта:

figma

[Iogsotot]

примеры ПО в табличном виде