Какие знаешь селекторы в HTML?

Селекторы в HTML/CSS: Полное руководство

В контексте HTML и CSS под селекторами понимаются шаблоны, которые используются для выбора и стилизации элементов на веб-странице. Как QA Engineer, я использую их для написания автотестов (Selenium, Playwright, Cypress), проверки вёрстки и анализа DOM. Селекторы — основа стабильности UI-автоматизации.

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

1. Базовые селекторы

• По тегу (div, input, a):

  button { color: blue; }
  

• По классу (начинается с точки):

  .submit-btn { background: green; }
  

• По идентификатору (id, начинается с #):

  #login-form { width: 300px; }
  

• Универсальный селектор (*):

  * { margin: 0; }
  

2. Комбинаторы (составные селекторы)

• Пробел — потомок:

  div span { color: red; } /* Все span внутри div */
  

• > — прямой потомок:

  ul > li { list-style: none; } /* Только li, напрямую вложенные в ul */
  

• + — соседний элемент:

  h1 + p { font-size: 1.2em; } /* Первый p сразу после h1 */
  

• ~ — все соседние элементы:

  h2 ~ p { color: gray; } /* Все p после h2 на одном уровне */
  

3. Селекторы атрибутов (особенно важны для тестирования)

• [attr] — наличие атрибута:

  [disabled] { opacity: 0.5; }
  

• [attr="value"] — точное совпадение:

  input[type="email"] { border-color: blue; }
  

• [attr^="val"] — начинается с:

  a[href^="https"] { /* Все ссылки на HTTPS */ }
  

• [attr$=".pdf"] — заканчивается на:

  a[href$=".pdf"]::after { content: " (PDF)"; }
  

• [attr*="text"] — содержит подстроку:

  [class*="error"] { border: 2px solid red; }
  

4. Псевдоклассы и псевдоэлементы

• Псевдоклассы (:hover, :focus, :nth-child()):

  tr:nth-child(even) { background: #f2f2f2; }
  a:hover { text-decoration: underline; }
  

• Псевдоэлементы (::before, ::after, ::first-line):

  p::first-line { font-weight: bold; }
  

Практическое применение в QA-автоматизации

В тестировании стабильность локаторов критична. Рекомендуемая приоритетность:

1. data-testid или data-qa — специальные атрибуты для тестов:

   <button data-testid="login-submit">Войти</button>
   

   // Playwright
   await page.locator('[data-testid="login-submit"]').click();
   

2. Ролевые селекторы (ARIA):

   await page.locator('button[role="dialog"]').click();
   

3. Комбинации селекторов для точности:

   // Selenium (Java)
   driver.findElement(By.cssSelector("form#auth .primary:not(.disabled)"));
   

4. XPath (хотя вопрос о CSS, но как альтернатива):

   //button[contains(@class, 'submit') and text()='Save']
   

Рекомендации для QA

• Избегайте хрупких селекторов, зависящих от структуры (div > div > span).
• Используйте уникальные атрибуты (data-*) по согласованию с разработчиками.
• Проверяйте селекторы в DevTools: $$('селектор') в Console.
• Учитывайте динамические классы (генерируемые Angular/React):

  [class*="button--primary"]
  

Понимание селекторов позволяет не только писать надёжные автотесты, но и эффективно анализировать баги вёрстки, описывать шаги воспроизведения для разработчиков и проводить кросс-браузерное тестирование. В современных фреймворках (Playwright) добавлены extended селекторы (:has(), :text()), но основа всегда остается CSS-селекторами.