47
Упражнений

Формы и Inputs

Практика работы с формами и полями ввода

1. Простая форма регистрации

Easy

2. Форма с валидацией

Medium

3. Динамическая форма

Hard

Форма с динамическим добавлением и удалением полей. Практика работы с изменяющейся структурой DOM.

Таблицы

Работа с табличными данными

1. Статическая таблица

Easy
ID Name Email Status Actions
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Pending
3 Bob Johnson bob@example.com Inactive

2. Таблица с сортировкой

Medium

Кликните на заголовок колонки для сортировки

ID Name Age Salary
5 Alice Johnson 28 $75,000
2 Bob Smith 35 $92,000
1 Charlie Brown 42 $105,000
3 Diana Prince 31 $88,000
4 Evan Davis 25 $65,000

3. Таблица с фильтрацией

Medium
ID Name Email Status
1 Alice Cooper alice@example.com Active
2 Bob Wilson bob@example.com Inactive
3 Charlie Adams charlie@example.com Active
4 Diana Moore diana@example.com Pending
5 Eve Martinez eve@example.com Active
6 Frank Lopez frank@example.com Inactive

Показано: 6 из 6 записей

4. Таблица с пагинацией

Hard
Показано 1 - 5 из 20 записей
ID Product Category Price

Модальные окна

Работа с модальными диалогами

1. Простое модальное окно

Easy

2. Вложенные модальные окна

Medium

Модальные окна, которые открываются друг поверх друга. Практика работы со сложной структурой.

3. Динамические модальные окна

Hard

Модальные окна, которые создаются динамически с разным содержимым.

Alerts & Dialogs

JavaScript alerts, confirms и prompts

Drag & Drop

Перетаскивание элементов

1. Простой Drag & Drop

Medium

Перетащите элементы из списка "Доступные" в "Выбранные"

Доступные элементы

Элемент 1
Элемент 2
Элемент 3
Элемент 4

Выбранные элементы

2. Сортировка списка

Medium

Перетаскивайте элементы для изменения порядка

Позиция 1
Позиция 2
Позиция 3
Позиция 4
Позиция 5

3. Перетаскивание между контейнерами

Hard

Организуйте задачи по статусам: To Do, In Progress, Done

To Do

Создать дизайн

Разработать макеты

Написать тесты

Unit и E2E тесты

Код ревью

Проверить PR

In Progress

Разработка API

REST endpoints

Done

База данных

Настроена и готова

Динамический контент

Элементы, появляющиеся с задержкой

1. Появление элементов

Medium

Элементы появляются через 2 секунды после нажатия кнопки

2. AJAX загрузка данных

Medium

Загрузка данных имитирует запрос к API (3 секунды)

3. Infinite Scroll

Hard

Прокрутите вниз для загрузки новых элементов

Загружено элементов: 0

Дополнительные элементы

Другие полезные UI элементы

1. Исчезающие элементы

Medium

Элементы автоматически исчезают через несколько секунд

2. Календарь (Date Picker)

Medium

Выбор даты из календаря

3. Слайдеры (Range Inputs)

Medium

Настройка значений с помощью слайдеров

50%
75%
20°C
$500
$0 $1000

Элементы форм (Controls)

Чекбоксы, радио кнопки, дропдауны, и другие контролы

1. Чекбоксы (Checkboxes)

Easy

Работа с множественным выбором

Простой чекбокс:

Группа чекбоксов:

2. Радио кнопки (Radio Buttons)

Easy

Выбор одного варианта из нескольких

Способ оплаты:

План подписки:

3. Дропдауны (Select/Dropdown)

Medium

Различные типы выпадающих списков

4. Загрузка файлов и Progress Bar

Medium

Работа с файлами и индикаторами прогресса

Индикаторы прогресса:

Статический прогресс (75%)
Анимированный прогресс 0%

5. Toggle Switches и Color Picker

Medium

Современные переключатели и выбор цвета

Toggle переключатели:

Color Picker:

Выбранный цвет:
#3B82F6
Пример текста

Продвинутые интеракции

Frames, hovers, клавиатура, контекстное меню, окна

1. Frames & iFrames

Hard

Работа с фреймами - одна из самых частых проблем в автоматизации

Простой iframe:

Вложенные iframes (Frame в frame):

2. Hovers & Tooltips

Medium

Всплывающие подсказки и элементы, появляющиеся при наведении

Простой Tooltip:

Это всплывающая подсказка!
Я снизу! 👇

Выпадающее меню при наведении:

Скрытый элемент появляется при hover:

Наведите курсор на эту карточку

При наведении появится скрытый элемент

Секретный элемент! 🎉

Вы нашли скрытый контент

3. Context Menu / Right Click

Medium

Кастомное контекстное меню по правому клику

Кликните правой кнопкой мыши здесь

Появится кастомное контекстное меню

4. Multiple Windows & Tabs

Hard

Работа с несколькими окнами и вкладками

Подсказка: После открытия новых окон/вкладок используйте driver.switch_to.window() для переключения между ними

5. Keyboard Events

Medium

Горячие клавиши и навигация с клавиатуры

Горячие клавиши:

Попробуйте нажать эти комбинации:

  • Ctrl + S — Сохранить
  • Ctrl + Enter — Отправить
  • Escape — Закрыть
  • Alt + H — Помощь

Навигация клавишами (Tab, Enter):

UI Компоненты

Accordion, Tabs, Carousel, Autocomplete, Rating

1. Accordion / Collapsible

Easy

Раскрывающиеся блоки с контентом

2. Tabs / Tabbed Interface

Easy

Переключение между вкладками с разным контентом

Python для автоматизации

Python — самый популярный язык для автоматизации тестирования благодаря простоте синтаксиса и мощным библиотекам.

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://example.com")
driver.find_element(By.ID, "submit").click()

3. Carousel / Image Slider

Medium

Карусель с навигацией стрелками и индикаторами

Текущий слайд: 1 из 4

4. Autocomplete / Typeahead

Medium

Автодополнение при вводе текста

5. Rating / Star Rating

Easy

Выбор рейтинга звездами

Оцените курс по автоматизации:

0/5

Оцените сложность материала:

0/5

OTP / Code Input

Medium

Поля ввода для одноразового кода с автоматическим переходом между цифрами

Multi-step Forms / Wizard

Hard

Многошаговая форма с индикатором прогресса и навигацией между шагами

1
Личные данные
2
Контакты
3
Подтверждение

Шаг 1: Личные данные

Shadow DOM

Hard

Элементы внутри Shadow DOM, требующие специального подхода для автоматизации

Copy to Clipboard

Easy

Кнопка для копирования текста в буфер обмена

pip install selenium pytest playwright

Double Click

Easy

Элементы, реагирующие на двойной клик мышью

Дважды кликни на меня!

Количество двойных кликов: 0

Двойной клик по этому тексту выделит слово. Тройной клик выделит весь параграф. Это полезно для тестирования выделения текста в редакторах и текстовых полях.

WYSIWYG Editor

Hard

Простой редактор rich text с форматированием (жирный, курсив, подчеркнутый)

Начните печатать здесь... Используйте кнопки выше для форматирования текста.

Lazy Loading Images

Medium

Изображения, которые загружаются по мере прокрутки страницы

Загрузка...

Загрузка...

Загрузка...

Загрузка...

Breadcrumbs

Easy

Навигационная цепочка (хлебные крошки) для отображения текущего местоположения

Главная страница

Добро пожаловать в интернет-магазин!

Canvas / Drawing

Medium

HTML5 Canvas для рисования - проверка взаимодействий с canvas элементом

Кликните и перетаскивайте мышь для рисования

File Download

Easy

Кнопки для скачивания различных типов файлов