Практика работы с формами и полями ввода
Форма с динамическим добавлением и удалением полей. Практика работы с изменяющейся структурой DOM.
Работа с табличными данными
| ID | Name | Status | Actions | |
|---|---|---|---|---|
| 1 | John Doe | john@example.com | Active | |
| 2 | Jane Smith | jane@example.com | Pending | |
| 3 | Bob Johnson | bob@example.com | Inactive |
Кликните на заголовок колонки для сортировки
| 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 |
| ID | Name | 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 записей
| ID | Product | Category | Price |
|---|
Работа с модальными диалогами
Модальные окна, которые открываются друг поверх друга. Практика работы со сложной структурой.
Модальные окна, которые создаются динамически с разным содержимым.
JavaScript alerts, confirms и prompts
Перетаскивание элементов
Перетащите элементы из списка "Доступные" в "Выбранные"
Перетаскивайте элементы для изменения порядка
Организуйте задачи по статусам: To Do, In Progress, Done
Разработать макеты
Unit и E2E тесты
Проверить PR
REST endpoints
Настроена и готова
Элементы, появляющиеся с задержкой
Элементы появляются через 2 секунды после нажатия кнопки
Загрузка данных имитирует запрос к API (3 секунды)
Прокрутите вниз для загрузки новых элементов
Загружено элементов: 0
Другие полезные UI элементы
Элементы автоматически исчезают через несколько секунд
Выбор даты из календаря
Настройка значений с помощью слайдеров
Чекбоксы, радио кнопки, дропдауны, и другие контролы
Работа с множественным выбором
Выбор одного варианта из нескольких
Различные типы выпадающих списков
Работа с файлами и индикаторами прогресса
Современные переключатели и выбор цвета
#3B82F6
Frames, hovers, клавиатура, контекстное меню, окна
Работа с фреймами - одна из самых частых проблем в автоматизации
Всплывающие подсказки и элементы, появляющиеся при наведении
При наведении появится скрытый элемент
Кастомное контекстное меню по правому клику
Кликните правой кнопкой мыши здесь
Появится кастомное контекстное меню
Работа с несколькими окнами и вкладками
Подсказка: После открытия новых окон/вкладок используйте driver.switch_to.window() для переключения между ними
Горячие клавиши и навигация с клавиатуры
Попробуйте нажать эти комбинации:
Accordion, Tabs, Carousel, Autocomplete, Rating
Раскрывающиеся блоки с контентом
Переключение между вкладками с разным контентом
Python — самый популярный язык для автоматизации тестирования благодаря простоте синтаксиса и мощным библиотекам.
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
driver.find_element(By.ID, "submit").click()
Карусель с навигацией стрелками и индикаторами
Автодополнение при вводе текста
Выбор рейтинга звездами
Спасибо за оценку!
Поля ввода для одноразового кода с автоматическим переходом между цифрами
# Ввод OTP кода:
code = "123456"
for i, digit in enumerate(code, 1):
driver.find_element(By.ID, f"otp{i}").send_keys(digit)
# Проверка что все поля заполнены:
for i in range(1, 7):
value = driver.find_element(By.ID, f"otp{i}").get_attribute("value")
assert len(value) == 1
# Получение полного кода:
full_code = "".join([driver.find_element(By.ID, f"otp{i}").get_attribute("value") for i in range(1, 7)])
Многошаговая форма с индикатором прогресса и навигацией между шагами
# Шаг 1:
driver.find_element(By.ID, "wizardFirstName").send_keys("Иван")
driver.find_element(By.ID, "wizardLastName").send_keys("Иванов")
driver.find_element(By.XPATH, "//button[contains(text(), 'Далее')]").click()
# Шаг 2:
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.ID, "wizardStep2")))
driver.find_element(By.ID, "wizardEmail").send_keys("ivan@example.com")
driver.find_element(By.ID, "wizardPhone").send_keys("+7 900 123-45-67")
driver.find_element(By.XPATH, "//button[contains(text(), 'Далее')]").click()
# Шаг 3:
WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.ID, "wizardStep3")))
driver.find_element(By.XPATH, "//button[contains(text(), 'Отправить')]").click()
Элементы внутри Shadow DOM, требующие специального подхода для автоматизации
# Selenium:
shadow_host = driver.find_element(By.ID, "shadowHost")
shadow_root = driver.execute_script("return arguments[0].shadowRoot", shadow_host)
button = shadow_root.find_element(By.CSS_SELECTOR, "button")
button.click()
# Playwright (встроенная поддержка):
await page.locator("#shadowHost >> button").click()
# Cypress:
cy.get('#shadowHost').shadow().find('button').click()
Кнопка для копирования текста в буфер обмена
pip install selenium pytest playwright
# Клик по кнопке копирования:
driver.find_element(By.ID, "copyButton").click()
# Проверка изменения текста кнопки:
button_text = driver.find_element(By.ID, "copyText").text
assert "Скопировано" in button_text or "Скопировать" in button_text
# Проверка сообщения об успехе:
success = driver.find_element(By.ID, "copySuccess")
assert "hidden" not in success.get_attribute("class")
# Примечание: Проверка буфера обмена в Selenium сложна
# Рекомендуется проверять UI индикаторы копирования
Элементы, реагирующие на двойной клик мышью
Дважды кликни на меня!
Количество двойных кликов: 0
Двойной клик по этому тексту выделит слово. Тройной клик выделит весь параграф. Это полезно для тестирования выделения текста в редакторах и текстовых полях.
# Selenium:
from selenium.webdriver import ActionChains
element = driver.find_element(By.ID, "doubleClickBox")
ActionChains(driver).double_click(element).perform()
# Проверка счетчика:
count = driver.find_element(By.ID, "doubleClickCount").text
assert int(count) > 0
# Playwright:
await page.locator("#doubleClickBox").dblclick()
# Cypress:
cy.get('#doubleClickBox').dblclick()
Простой редактор rich text с форматированием (жирный, курсив, подчеркнутый)
Начните печатать здесь... Используйте кнопки выше для форматирования текста.
# Ввод текста в редактор:
editor = driver.find_element(By.ID, "wysiwygEditor")
editor.send_keys("Тестовый текст")
# Клик по кнопке форматирования:
driver.find_element(By.XPATH, "//button[@title='Жирный']").click()
editor.send_keys(" жирный текст")
# Получение HTML содержимого:
html_content = driver.execute_script("return arguments[0].innerHTML", editor)
assert "<strong>" in html_content or "<b>" in html_content
# Очистка редактора:
driver.find_element(By.XPATH, "//button[@title='Очистить']").click()
Изображения, которые загружаются по мере прокрутки страницы
Загрузка...
Загрузка...
Загрузка...
Загрузка...
# Прокрутка к изображениям для их загрузки:
container = driver.find_element(By.ID, "lazyLoadContainer")
driver.execute_script("arguments[0].scrollTop = arguments[0].scrollHeight", container)
# Ожидание загрузки изображений:
WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.CSS_SELECTOR, ".lazy-image-wrapper img"))
)
# Проверка что изображения загружены:
images = driver.find_elements(By.CSS_SELECTOR, ".lazy-image-wrapper img")
assert len(images) > 0
for img in images:
assert img.get_attribute("src").startswith("https://")
Навигационная цепочка (хлебные крошки) для отображения текущего местоположения
Добро пожаловать в интернет-магазин!
HTML5 Canvas для рисования - проверка взаимодействий с canvas элементом
Кликните и перетаскивайте мышь для рисования
# Рисование на canvas через ActionChains:
from selenium.webdriver import ActionChains
canvas = driver.find_element(By.ID, "drawingCanvas")
# Рисование линии:
actions = ActionChains(driver)
actions.move_to_element_with_offset(canvas, 50, 50)
actions.click_and_hold()
actions.move_by_offset(100, 100)
actions.release()
actions.perform()
# Проверка что canvas изменился:
canvas_data = driver.execute_script(
"return arguments[0].toDataURL()", canvas
)
# Можно сравнить с пустым canvas или сохранить screenshot
Кнопки для скачивания различных типов файлов
# Настройка Chrome для автоматического скачивания:
options = webdriver.ChromeOptions()
prefs = {"download.default_directory": "/path/to/downloads"}
options.add_experimental_option("prefs", prefs)
driver = webdriver.Chrome(options=options)
# Клик по кнопке скачивания:
driver.find_element(By.XPATH, "//button[contains(text(), 'sample.txt')]").click()
# Проверка что файл скачался:
import os, time
time.sleep(2) # Ждем скачивания
assert os.path.exists("/path/to/downloads/sample.txt")
# Playwright - автоматическое ожидание скачивания:
async with page.expect_download() as download_info:
await page.click("button:has-text('sample.txt')")
download = await download_info.value
await download.save_as("/path/to/save/file.txt")