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

Xpath Practice Hub

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

База по XPath

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

Введение в XPath

Теория

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

Пример

//div[@id='example']
Найти все div элементы с id='example'
Слайд 1 из 9

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

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

Элементы форм
Интерактивные действия

Браузерные диалоги

Alert: Простое информационное сообщение

Confirm: Диалог с кнопками OK/Отмена

Prompt: Диалог для ввода текста

driver.switchTo().alert().accept() // OK
driver.switchTo().alert().dismiss() // Отмена
driver.switchTo().alert().sendKeys("текст") // Ввод в prompt
Прогресс и загрузка
Прогресс загрузки
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
Медиа контролы

Видеоплеер

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

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

50%
Системные индикаторы

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

Онлайн

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

75%

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

Текущая: Темная
Shadow DOM элементы

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

Работа с Shadow DOM

Selenium: Используйте JavaScriptExecutor

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

Cypress: .shadow() команда

// Selenium пример:
WebElement shadowHost = driver.findElement(By.id("shadow-host"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowButton = shadowRoot.findElement(By.id("shadow-button"));

// 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(webElement)

// Selenium пример:
driver.switchTo().frame("test-iframe");
driver.findElement(By.id("iframe-button")).click(); // Основная кнопка
driver.findElement(By.id("iframe-increment")).click(); // Увеличить счетчик
driver.findElement(By.id("iframe-reset")).click(); // Сбросить
driver.switchTo().defaultContent(); // Возврат к основному документу

// Playwright пример:
const frame = page.frame('test-iframe');
await frame.locator('#iframe-button').click();
await frame.locator('#iframe-increment').click();
await frame.locator('#iframe-reset').click();

// Cypress пример:
cy.get('#test-iframe').then(($iframe) => {
  const body = $iframe.contents().find('body');
  cy.wrap(body).find('#iframe-button').click();
  cy.wrap(body).find('#iframe-increment').click();
  cy.wrap(body).find('#iframe-reset').click();
});
Календарь и время

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

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

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

DateTime: YYYY-MM-DDTHH:MM

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


// Установка даты
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');
Автокомплит
//input[@data-testid='autocomplete-input']
//div[@data-testid='autocomplete-dropdown']
//div[@data-testid='autocomplete-option-0']
//div[@role='option']
//div[contains(text(), 'Москва')]

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

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

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

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

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


// Ввод текста для автокомплита
WebElement autocompleteInput = driver.findElement(By.id("city-autocomplete"));
autocompleteInput.sendKeys("Мос");

// Ожидание появления выпадающего списка
WebDriverWait wait = new WebDriverWait(driver, Duration.ofSeconds(10));
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("autocomplete-dropdown")));

// Выбор первой опции
WebElement firstOption = driver.findElement(By.xpath("//div[@data-testid='autocomplete-option-0']"));
firstOption.click();

// Проверка выбранного значения
String selectedValue = autocompleteInput.getAttribute("value");
Assert.assertEquals("Москва", selectedValue);

// Playwright пример:
await page.fill('#city-autocomplete', 'Мос');
await page.waitForSelector('[data-testid="autocomplete-dropdown"]');
await page.click('[data-testid="autocomplete-option-0"]');
Многошаговая форма
Прогресс
0%

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

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

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

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

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

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

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

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

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


// Правый клик для вызова контекстного меню
WebElement contextArea = driver.findElement(By.id("context-menu-area"));
Actions actions = new Actions(driver);
actions.contextClick(contextArea).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() убирает лишние пробелы, contains() для частичного поиска

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

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

  • Первый элемент списка
    high
  • Второй элемент списка
    medium
  • Третий элемент списка
    low
  • Четвертый элемент списка
    high
  • Пятый элемент списка
    medium
  • Последний элемент списка
    low
Сложные 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
Товары с комплексными селекторами

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

Смартфон Galaxy

Бренд:
Samsung
4.5(128 отзывов)
5G
128GB
Triple Camera
50000₽45000₽
-10%

Ноутбук ThinkPad

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

Наушники AirPods

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

FAQ секции

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

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

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

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

Самые популярные паттерны поиска элементов для 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 для простых случаев