Какие знаете Web elements?qa-88

Основные веб-элементы и их свойства

1. Элементы форм

Текстовые поля:

  • <input type="text"> - однострочное текстовое поле
  • <textarea> - многострочное текстовое поле
  • <input type="password"> - поле для пароля

Пример локатора в Selenium:

By usernameField = By.id("username");

Кнопки:

  • <button> - универсальная кнопка
  • <input type="submit"> - кнопка отправки формы
  • <input type="button"> - обычная кнопка

Чекбоксы и радиокнопки:

  • <input type="checkbox"> - флажок (множественный выбор)
  • <input type="radio"> - радиокнопка (одиночный выбор)

Выпадающие списки:

  • <select> с <option> - стандартный выпадающий список
  • Кастомные дропдауны (часто реализованы через div + JavaScript)

2. Навигационные элементы

Ссылки:

  • <a href="..."> - гиперссылки
  • Особые случаи: якорные ссылки (#section), mailto:, tel:

Меню и навигационные панели:

  • Часто реализованы через <nav>, <ul>, <li>
  • Могут быть кастомными (div с JavaScript)

3. Медиа элементы

Изображения:

  • <img src="..."> - статические изображения
  • <picture> - адаптивные изображения
  • SVG-графика

Видео и аудио:

  • <video> - встроенное видео
  • <audio> - аудио контент

4. Структурные элементы

Таблицы:

  • <table>, <tr>, <td>, <th>
  • Используются для данных (не для верстки!)

Списки:

  • <ul> - маркированный список
  • <ol> - нумерованный список
  • <dl> - список определений

5. Современные элементы HTML5

Семантические элементы:

  • <header>, <footer>, <article>, <section>
  • <main>, <aside>, <nav>

Элементы прогресса:

  • <progress> - индикатор выполнения
  • <meter> - скалярное значение в диапазоне

6. Сложные/кастомные элементы

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

  • Обычно реализованы через <div> с CSS/JS
  • Могут использовать <dialog> (HTML5)

Вкладки (Tabs):

  • Часто используют <div> с атрибутами role="tab"

Карусели (Sliders):

  • Сложные компоненты, обычно кастомные

Как находить элементы в автотестах?

Основные стратегии локации в Selenium/Playwright:

// По ID (самый надежный способ)
By.id("elementId")

// По имени
By.name("username")

// По классу
By.className("btn-primary")

// По CSS-селектору
By.cssSelector("input[type='submit']")

// По XPath (мощно, но хрупко)
By.xpath("//button[contains(text(),'Submit')]")

Особенности тестирования веб-элементов

  1. Валидация состояний:

    • Видимый/скрытый
    • Активный/неактивный
    • Выбранный/невыбранный (для чекбоксов)

  2. Проверка атрибутов:

    • value, disabled, readonly, checked
    • data-* атрибуты
    • aria-* атрибуты для accessibility

  3. Тестирование взаимодействия:

    • Клики, ввод текста
    • Drag-and-drop
    • Hover эффекты

  4. Визуальное тестирование:

    • Соответствие макету
    • Адаптивность
    • Перекрытие элементов

Резюмируем:

знание веб-элементов и их свойств критически важно для QA-инженеров, особенно при автоматизации тестирования. Современные веб-приложения используют как стандартные HTML-элементы, так и сложные кастомные компоненты, требующие особых подходов к тестированию.

Вопросы

Собеседования