https://practicetestautomation.com/practice-test-exceptions/
(Вставити форму з функціонавлом замість тексту "Here will be functionality with fields and buttons")
Сторінка завантажується з 1 input field і двома кнопками.
Стиль кнопок і полів такий же як і https://practicetestautomation.com/practice-test-login/
Поле уже містить текст, Pizza, і юзер не може його змінити
Юзер може натиснути кнопки "Add" and "Edit"
При натиску на кнопку Add, появляэться другий ряд, схожий на перший.
Поле в другому ряду пусте і юзер може туди вписати щось.
Важливо щоб другий ряд зявлявся не одразу.
Потрібно додати якусь "Loading" іконку, яка через 5 секунд пропаде і зявиться другий ряд.
(зразок на фото, але мені всерівно на графіку, можна будь яку іконку яка впишеться в тему сайту)
<div id="loading">Loading... <img src="/img/ajax-loader.gif"></div>
Після завантаження цей елемент може лишитися в html, але з style="display: none;"
Коли зявляється ікконка завантаження, кнопка Edit в першому ряду має стати невидимою. Але при цьому остатись в html на сторінці. (style="display: none;")
Кнопка Add повинна взагалі пропасти з html
Елементи другого ряду не повинні бути в html при загрузці сторінки. Вони повинні там зявитися тільки коли ряд стає видимий.
Також, коли зявляється другий ряд, має зявитися текст підтвердження. Щось типу "Row 2 was added."
Цей елемент має бути в html з самого початку, але бути невидимим. <div id="confirmation" style="display: none;"
Другий ряд містить кнопки "Save" і "Remove"
Save повинна зберегти введений текст, зробити поле не активним (як перший ряд) і пропасти, а на її місце зявитися кнопка Edit
При цьому кнопка Save лишається в коді, але стає не видимою.
Remove - видалити другий ряд, перший рад стає таким же як був при початковому завантаженню сторінки
Текст підтвердження змінюється після натисків на "Save" і "Remove"
"Row 2 was saved." "Row 2 was removed."
Деталі:
Кожен ряд засунути в <div id="row1"> і <div id="row2">
Кожна кнопка повинна мати class="btn"
Кожне поле class="input-field"
Кнопкам дати name атрибут який відповідає назві кнопки <button class="btn" name="Edit">Edit</button> (якось так)
Стиль сторінки (кнопки, текст) такий же як https://practicetestautomation.com/practice-test-login/
