Что такое селекторы?

Что такое селекторы в контексте автоматизации тестирования?

Селекторы — это локаторы, позволяющие автоматизированным тестам однозначно идентифицировать и находить элементы пользовательского интерфейса (UI) в веб-приложениях или нативных приложениях для взаимодействия с ними (клик, ввод текста, проверка атрибутов и т.д.). По сути, это "адреса" или "координаты" элементов (кнопок, полей ввода, контейнеров) в структуре документа (чаще всего DOM — Document Object Model для веба), которые инструменты автоматизации, такие как Selenium, Cypress, Playwright или Appium, используют для выполнения действий.

Основные типы и стратегии селекторов

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

1. Селекторы для веб-приложений (Selenium WebDriver, Playwright/Cypress)

• CSS-селекторы: Наиболее распространённый и производительный тип. Используют синтаксис каскадных таблиц стилей.

  /* По ID */
  #login-button
  /* По классу */
  .submit-btn.primary
  /* По атрибуту */
  input[name='email']
  /* Комбинаторы (потомок, дочерний) */
  div.container > form > input
  

• XPath: Мощный язык запросов к дереву XML/DOM. Позволяет искать по любому атрибуту, тексту, позиции в дереве. Менее производителен, чем CSS, но более гибок.

  // По тегу и атрибуту
  //button[@id='submit']
  // По тексту (осторожно с локализацией!)
  //a[text()='Выйти']
  // По частичному совпадению атрибута
  //input[contains(@class, 'search')]
  // Сложные пути
  //div[@role='dialog']//span[contains(text(), 'Подтвердить')]
  

• Селекторы по атрибутам (частный случай CSS/XPath):

  # Playwright пример
  page.locator("[data-qa='user-profile']").click()
  

    Здесь `data-qa` — специальный **пользовательский атрибут**, который команда разработки и тестирования добавляет для целей тестирования. Это **лучшая практика**.

2. Селекторы для мобильных приложений (Appium)

Используют схожие принципы, но адаптированные под нативные (iOS/Android) или гибридные приложения.

• Accessibility ID (предпочтительно): Уникальный идентификатор, связанный с accessibility-атрибутами элемента (accessibilityIdentifier в iOS, content-desc в Android).
• ID/Resource ID: Уникальные идентификаторы, предоставляемые фреймворками.
• XPath: Аналогично вебу, но для иерархии UI-элементов мобильного приложения.

Ключевые принципы выбора селекторов (Best Practices)

Создание стабильных и надёжных селекторов — критически важный навык QA-инженера по автоматизации.

1. Приоритетность стратегий: Выбирайте селекторы в следующем порядке (от наиболее стабильного к наименее):

    *   **Специальные атрибуты для тестов** (`data-qa`, `data-testid`, `test-id`) — **идеальный вариант**, так как они не меняются из-за рефакторинга стилей или логики.
    *   **`id`** — статичный и уникальный (если используется правильно).
    *   **`name`** и другие уникальные **статические атрибуты**.
    *   **CSS-селекторы** на основе класса, атрибутов (кроме динамически генерируемых).
    *   **XPath** (предпочитать относительные пути с использованием уникальных атрибутов).
    *   **Избегайте:** Селекторов, зависящих от структуры DOM (например, `div:nth-child(5)`), визуальных свойств (цвет, положение) и **неуникальных классов** (`.btn`, `.text`), которые часто меняются.

1. Устойчивость к изменениям:

    *   **Избегайте "хрупких" (brittle) селекторов,** которые ломаются при малейшем изменении вёрстки.

```css
/* ПЛОХО: Слишком жёсткая привязка к структуре */
#root > div > main > div.container-fluid > div.row > div.col-md-9 > div > div.panel-footer > button.btn.btn-success

/* ХОРОШО: Используем уникальный data-атрибут */
[data-test="save-changes-button"]
/* ИЛИ ХОРОШО: Комбинация близких уникальных свойств */
.modal-footer .btn-primary
```

3. Читаемость и поддерживаемость: Селектор должен быть понятным для коллег. Используйте Page Object Model (POM) или аналогичные паттерны, чтобы хранить селекторы в одном месте, а не "размазывать" их по тестовым скриптам.

```java
// Пример Page Object в Java + Selenium
public class LoginPage {
    private By usernameField = By.id("username");
    private By passwordField = By.cssSelector("[name='password']");
    private By submitButton = By.xpath("//button[@type='submit']");

    public void login(String user, String pass) {
        driver.findElement(usernameField).sendKeys(user);
        driver.findElement(passwordField).sendKeys(pass);
        driver.findElement(submitButton).click();
    }
}
```

Вывод

Понимание и грамотное применение селекторов — это фундамент эффективной автоматизации UI-тестирования. Ключ к успеху лежит в соблюдении best practices: договорённость с разработчиками о добавлении тестовых атрибутов, выбор устойчивых стратегий локации и организация поддерживаемой структуры кода тестового фреймворка. Нестабильные селекторы — одна из главных причин "хрупкости" и высоких затрат на поддержку автотестов.