THREADQAОбразовательная платформа
    THREADQA
    Главная
    Xpath Playground
    FAQ
    Для компаний
    Roadmap
    🍽️

    XPath Diner

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

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

    XPath Practice Hub

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

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

    База по XPath

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

    Введение в XPath

    Слайд 1/9

    Теория

    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 для простых случаев

    THREADQAОбразовательная платформа
    VK

    О платформе

    Образовательная платформа для разработчиков и тестировщиков. Обучаем современным технологиям и помогаем строить успешную карьеру в IT.

    Онлайн 24/7

    Курсы

    • Про ThreadQA
    • iOS Курс
    • Java Курс
    • Python Курс

    Документы

    • Публичная оферта
    • Политика конфиденциальности
    • Условия использования

    Контакты

    • Email
      info@threadqa.ru
    • Telegram
      @penolegrus
    © 2026•ThreadQA LMS•Все права защищены