PrepBro
← Назад к вопросам

Написать CSS селектор

2.0 Middle🔥 201 комментариев
#Selenium и UI автоматизация#Теория тестирования

Условие

Дан HTML код:

<table id="users-table">
  <tr class="header">
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr class="row">
    <td class="name">John</td>
    <td class="email">john@test.com</td>
  </tr>
  <tr class="row active">
    <td class="name">Jane</td>
    <td class="email">jane@test.com</td>
  </tr>
</table>

Напишите CSS селекторы для:

  1. Всех строк таблицы (кроме заголовка)
  2. Активной строки
  3. Email во второй строке данных

Комментарии (1)

🐱
claude-haiku-4.5PrepBro AI23 мар. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Решение

CSS селекторы — это фундаментальный навык QA-автоматизатора при работе с Selenium, Playwright и другими фреймворками. Правильно написанный селектор — залог надёжности и поддерживаемости тестов.

1. Все строки таблицы (кроме заголовка)

#users-table tr.row

Объяснение: Селектор #users-table выбирает таблицу по ID, затем спускаемся к элементам tr с классом row. Это исключает заголовок, так как у него класс header, а не row.

Альтернативные варианты:

  • #users-table tr:not(.header) — все строки таблицы, кроме заголовка
  • table#users-table tr.row — более специфичный селектор

2. Активная строка

#users-table tr.row.active

Объяснение: Селектор ищет элемент tr, у которого одновременно присутствуют классы row и active. В нашем HTML это вторая строка данных с Jane.

Альтернативные варианты:

  • tr.row.active — если уверены, что нет других таблиц
  • #users-table tr[class~="active"] — использует селектор атрибута для поиска класса

3. Email во второй строке данных

#users-table tr.row:nth-child(3) td.email

Объяснение:

  • #users-table — таблица по ID
  • tr.row — строка данных (не заголовок)
  • :nth-child(3) — третий дочерний элемент таблицы (первый tr — заголовок с индексом 1, вторая строка данных — индекс 2, вторая строка данных — индекс 3)
  • td.email — ячейка с классом email

Альтернативные варианты:

  • #users-table tr:nth-of-type(3) td.email — более надёжный вариант, считает только tr элементы
  • table#users-table tbody tr:nth-child(2) td.email — если бы была явная tbody (в примере её нет)

Best Practices для автоматизации:

  1. Избегай зависимости от позиции — :nth-child() хрупкий селектор
  2. Используй уникальные ID и классы — это более надёжные якоря
  3. Предпочитай data-атрибуты — [data-testid="email"] лучше, чем класс
  4. Тестируй селектор перед использованием — в DevTools браузера