THREADQA
THREADQA
🍽️

XPath Diner

Интерактивная игра для изучения XPath

Практика
UI Тестирование
XPath Гайд
Продвинутые элементы

XPath Practice Hub

Интерактивная площадка для отработки навыков поиска элементов и создания UI автотестов. Изучайте XPath, CSS селекторы и практикуйтесь на реальных элементах с продвинутыми сценариями.

50+
Элементов
15+
Компонентов
100+
XPath примеров
∞
Практики
Интерактивный гайд

База по XPath

Полное руководство по поиску элементов на веб-страницах

Введение в XPath

Теория

XPath (XML Path Language) - это мощный язык запросов для навигации по XML/HTML документам. Он позволяет точно находить элементы на веб-странице используя путь к элементу.

Пример

XPath Expression
//div[@id='example']

Найти все div элементы с id='example'

Начало11% пройденоКонец
Практика

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

Коллекция стандартных UI элементов с готовыми локаторами для изучения

Элементы форм
Интерактивные элементы

Кнопки

Уведомления

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

Типы уведомлений

Ссылки

Внешняя ссылка (новое окно)Якорная ссылка (на элемент)

Совет по тестированию

Используйте data-testid атрибуты для более стабильных локаторов. Они не зависят от изменений в стилях или структуре DOM.

Прогресс и загрузка
Прогресс загрузки
0%
Перетаскивание
Область перетаскивания
🥒

Перетащите элемент в эту область

Позиция:x=50, y=50
Загрузка файлов

Работа с файлами в тестах

•

Загрузка: Выбор файла через input[type="file"]

•

Скачивание: Клик по ссылке с download атрибутом

•

Проверка: Контроль папки Downloads в тестах

Продвинутый уровень

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

Реальные компоненты и сложные взаимодействия для профессиональной практики

E-commerce компоненты

Рейтинг товара

Не оценено

Избранное

Корзина покупок

0
товаров

Категории товаров

💻Электроника
👕Одежда
📚Книги
⚽Спорт
🏠Дом
Примеры локаторов:
//span[@data-testid='product-category-0']
//span[text()='Электроника']
//span[contains(@class, 'border-slate-600')]
Таблица данных с фильтрацией

Управление пользователями

Поиск в таблице

Найдено: 4
Выбрано:0
Имя
Email
Роль
СтатусПоследний входДействия
Елена Волковаelena@example.com
Пользователь
Активен
2024-01-16
Иван Петровivan@example.com
Администратор
Активен
2024-01-15
Кукумбер Тестовичcucumber@example.com
Модератор
Неактивен
2024-01-10
Мария Сидороваmaria@example.com
Пользователь
Активен
2024-01-14
Медиа контролы

Управление видео и аудио

Видеоплеер

Симуляция видеоплеера

1920x1080 • 16:9

Управление громкостью

50%

Тестирование медиа элементов

  • •Проверка воспроизведения видео/аудио
  • •Тестирование управления громкостью
  • •Взаимодействие с кнопками управления
  • •Проверка состояний muted/unmuted
Системные индикаторы

Мониторинг системы

Состояние сети

Онлайн

Соединение установлено

Уровень батареи

Заряд батареи75%

Тема оформления

🌙 Темная

Активная тема

Системная информация

  • •Мониторинг состояния системы в реальном времени
  • •Динамические индикаторы и переключатели
  • •Адаптивная цветовая схема
Shadow DOM элементы

Изолированное дерево элементов

Shadow DOM создает изолированное дерево элементов, недоступное через обычные селекторы.

Работа с Shadow DOM

•Selenium: Используйте getShadowRoot()

•Playwright: Поддержка из коробки

•Cypress: Команда .shadow()

Примеры кода:
// Selenium:
WebElement host = driver.findElement(By.id("shadow-host"));
SearchContext root = host.getShadowRoot();
root.findElement(By.id("shadow-button")).click();
// Playwright:
await page.locator('#shadow-host').locator('#shadow-button').click();
// Cypress:
cy.get('#shadow-host').shadow().find('#shadow-button').click();
iframe элементы

Отдельный документ в рамке

iframe содержит отдельный документ, требующий переключения контекста для взаимодействия.

Работа с iframe

•Переключение: driver.switchTo().frame()

•Возврат: driver.switchTo().defaultContent()

•По индексу: switchTo().frame(0)

•По элементу: switchTo().frame(element)

Примеры кода:
// Selenium:
driver.switchTo().frame("test-iframe");
driver.findElement(By.id("iframe-button")).click();
driver.switchTo().defaultContent();
// Playwright:
const frame = page.frame('test-iframe');
await frame.locator('#iframe-button').click();
// Cypress:
cy.get('#test-iframe').then(($iframe) => {
  const body = $iframe.contents().find('body');
  cy.wrap(body).find('#iframe-button').click();
});
Календарь и время

Работа с датами и временем

Работа с датами в тестах

•Формат даты: YYYY-MM-DD (ISO 8601)

•Формат времени: HH:MM (24-часовой)

•DateTime: YYYY-MM-DDTHH:MM

•Валидация: Проверка min/max значений

Примеры кода:
// Selenium - установка даты:
WebElement dateInput = driver.findElement(By.id("date-picker"));
dateInput.sendKeys("2024-12-25");
// Установка времени:
WebElement timeInput = driver.findElement(By.id("time-picker"));
timeInput.sendKeys("14:30");
// Дата и время:
WebElement datetimeInput = driver.findElement(By.id("datetime-picker"));
datetimeInput.sendKeys("2024-12-25T14:30");
// Получение значения:
String selectedDate = dateInput.getAttribute("value");
// Playwright примеры:
await page.fill('#date-picker', '2024-12-25');
await page.fill('#time-picker', '14:30');
await page.fill('#datetime-picker', '2024-12-25T14:30');
// Проверка значения:
const value = await page.inputValue('#date-picker');
expect(value).toBe('2024-12-25');
Автокомплит

Динамический поиск с подсказками

Базовые локаторы:
// Поле ввода:
//input[@data-testid='autocomplete-input']
// Выпадающий список:
//div[@data-testid='autocomplete-dropdown']
// Первая опция:
//div[@data-testid='autocomplete-option-0']
// По роли:
//div[@role='option']
// По тексту:
//div[contains(text(), 'Москва')]

Тестирование автокомплита

•Ввод текста: Постепенный ввод символов

•Ожидание: Появление выпадающего списка

•Выбор: Клик по опции из списка

•Проверка: Значение установлено в поле

Примеры кода:
// Selenium - ввод текста:
WebElement input = driver.findElement(By.id("city-autocomplete"));
input.sendKeys("Мос");
// Ожидание списка:
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(
  By.id("autocomplete-dropdown")));
// Выбор первой опции:
WebElement option = driver.findElement(
  By.xpath("//div[@data-testid='autocomplete-option-0']"));
option.click();
// Проверка значения:
String value = input.getAttribute("value");
Assert.assertEquals("Москва", value);
// Playwright пример:
await page.fill('#city-autocomplete', 'Мос');
await page.waitForSelector('[data-testid="autocomplete-dropdown"]');
await page.click('[data-testid="autocomplete-option-0"]');
// Проверка:
const value = await page.inputValue('#city-autocomplete');
expect(value).toBe('Москва');
Многошаговая форма

Заполните форму по шагам

Личная информация
Настройки
Подтверждение
Прогресс заполнения
0%

Личная информация

Шаг 1 из 3
Контекстное меню

Правый клик для вызова

Кликните правой кнопкой мыши по области ниже:

Правый клик здесь

Для открытия контекстного меню

Тестирование контекстных меню

•Вызов: Правый клик мыши (contextmenu event)

•Позиционирование: Координаты x, y курсора

•Закрытие: Клик вне меню или Escape

•Навигация: Клавиши стрелок и Enter

Примеры кода:
// Selenium - правый клик:
WebElement area = driver.findElement(By.id("context-menu-area"));
Actions actions = new Actions(driver);
actions.contextClick(area).perform();
// Ожидание меню:
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(5));
wait.until(ExpectedConditions.visibilityOfElementLocated(
  By.id("context-menu")));
// Клик по пункту:
driver.findElement(By.id("context-copy")).click();
// Playwright пример:
await page.click('#context-menu-area', { button: 'right' });
await page.waitForSelector('#context-menu');
await page.click('#context-copy');
// Cypress пример:
cy.get('#context-menu-area').rightclick();
cy.get('#context-menu').should('be.visible');
cy.get('#context-copy').click();
Сложные селекторы

Динамические элементы и продвинутый поиск

Элементы с динамическими ID

ID меняется каждые 3 секунды:
dynamic-element-1

ID: 1

Используйте starts-with() или contains()

Элементы с изменяющимися классами

Класс меняется каждые 2 секунды:
status-active

active

Класс: status-active

Поиск по соседним элементам

preceding-sibling
parent
child
following-sibling

Поиск по содержимому (text content)

🎯 Точный текст для поиска
🔍 Элемент с частичным совпадением текста
🔄 Исходный текст
📏 Текст с пробелами
▶️ Начало строки и продолжение

Советы по работе со сложными селекторами

•

Динамические ID:

Используйте starts-with() или contains()

•

Изменяющиеся классы:

Ищите по стабильной части класса

•

Соседние элементы:

Оси XPath: following-sibling, preceding-sibling

•

Поиск по тексту:

normalize-space() убирает пробелы

Псевдо-классы и nth-child селекторы

Продвинутые CSS и XPath селекторы

Список с nth-child селекторами

  • Первый элемент списка
    Позиция: 1
    :first-child
    🔥 High
  • Второй элемент списка
    Позиция: 2
    :nth-child(even)
    ⚡ Medium
  • Третий элемент списка
    Позиция: 3
    :nth-child(odd)
    ✅ Low
  • Четвертый элемент списка
    Позиция: 4
    :nth-child(even)
    🔥 High
  • Пятый элемент списка
    Позиция: 5
    :nth-child(odd)
    ⚡ Medium
  • Последний элемент списка
    Позиция: 6
    :last-child
    ✅ Low

Примеры селекторов

•
li:first-childили//li[1]
•
li:last-childили//li[last()]
•
li:nth-child(odd)или//li[position() mod 2 = 1]
•
li:nth-child(even)или//li[position() mod 2 = 0]
Примеры использования в тестах:
// Selenium - выбор первого элемента:
driver.findElement(By.cssSelector("li:first-child"));
driver.findElement(By.xpath("//li[1]"));
// Выбор последнего элемента:
driver.findElement(By.cssSelector("li:last-child"));
driver.findElement(By.xpath("//li[last()]"));
// Выбор нечетных элементов:
driver.findElements(By.cssSelector("li:nth-child(odd)"));
driver.findElements(By.xpath("//li[position() mod 2 = 1]"));
// Playwright примеры:
await page.locator('li:first-child').click();
await page.locator('li:last-child').click();
await page.locator('li:nth-child(3)').click();
// Cypress примеры:
cy.get('li').first();
cy.get('li').last();
cy.get('li:nth-child(odd)');
Сложные XPath выражения

Комплексная фильтрация данных

Блог посты с комплексной фильтрацией

Теги:

Изучение XPath селекторов

👤 Алексей Петров📅 2024-01-15
published
#xpath
#testing
#automation
42
15
1250

Продвинутые техники автотестирования

👤 Мария Сидорова📅 2024-01-10
published
#selenium
#testing
#advanced
38
22
980

CSS селекторы vs XPath

👤 Дмитрий Иванов📅 2024-01-05
draft
#css
#xpath
#comparison
56
8
1500
Товары с комплексными селекторами

E-commerce каталог с фильтрами

Каталог товаров

Смартфон Galaxy

🔥 -10%
Бренд:
Samsung
4.5(128 отзывов)
✨ 5G
✨ 128GB
✨ Triple Camera
50 000₽45 000₽

Ноутбук ThinkPad

❌ Нет в наличии
Бренд:
Lenovo
4.8(64 отзывов)
✨ Intel i7
✨ 16GB RAM
✨ SSD 512GB
85 000₽

Наушники AirPods

🔥 -17%
Бренд:
Apple
4.3(256 отзывов)
✨ Wireless
✨ Noise Cancelling
✨ 24h Battery
18 000₽15 000₽
Аккордеон с вложенными элементами

Динамические раскрывающиеся секции

FAQ секции

XPath - это язык запросов для выбора узлов в XML документах.

CSS селекторы позволяют выбирать элементы по их атрибутам и структуре.

XPath более мощный, но CSS селекторы быстрее и проще.

Примеры XPath для аккордеона

•//div[@data-expanded='true']- раскрытые секции

•//button[@aria-expanded='true']- активные триггеры

•//div[@data-visible='true']//button- кнопки в видимом контенте

Справочник

Быстрый справочниклокаторов

Самые популярные паттерны поиска элементов для UI автотестов

Базовые XPath селекторы
//div

Все div элементы

//div[@id='myId']

Div с конкретным ID

//div[@class='myClass']

Div с конкретным классом

//*[@data-testid='element']

По data-testid (рекомендуется)

Поиск по тексту
//button[text()='Нажми']

Точное совпадение текста

//button[contains(text(), 'Нажми')]

Частичное совпадение

//a[normalize-space()='Ссылка']

Игнорирует пробелы

//span[starts-with(text(), 'Начало')]

Начинается с текста

Сложные селекторы
//div[contains(@class, 'btn')]

Частичное совпадение класса

//input[@type='text'][1]

Первый элемент типа

//div[@id='parent']//button

Потомок элемента

//input[@required and @type='email']

Логические операторы

CSS селекторы
#myId

По ID

.myClass

По классу

input[type="email"]

По атрибуту

div > button:first-child

Первый дочерний элемент

Динамические элементы
//div[@data-testid and @style]

Элементы со стилями

//button[not(@disabled)]

Активные кнопки

//div[contains(@class, 'visible')]

Видимые элементы

//input[@value != '']

Заполненные поля

Лучшие практики
[data-testid="user-button"]

Используйте data-testid

//button[contains(@aria-label, 'Save')]

Accessibility атрибуты

//form[@name='login']//input

Контекстный поиск

//div[@role='dialog']

Семантические роли

Советы для эффективного тестирования

Стабильные локаторы

Используйте data-testid атрибуты вместо классов CSS для более стабильных тестов

Ожидания

Всегда используйте явные ожидания для динамических элементов

Читаемость

Делайте локаторы понятными и самодокументируемыми

Устойчивость

Избегайте хрупких селекторов, зависящих от структуры DOM

Тестирование

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

Производительность

CSS селекторы обычно быстрее XPath для простых случаев