CSS селекторы

Урок: CSS селекторы (базово)

Введение

Когда ты работаешь с веб-страницей — неважно, пишешь ли ты стили или автоматические тесты — тебе постоянно нужно находить элементы.

Представь, что ты открываешь страницу интернет-магазина и хочешь нажать кнопку «Купить». Но на странице десятки кнопок. Как понять, какую именно нажать?

Ты начинаешь ориентироваться:

  • по тексту;
  • по расположению;
  • по внешнему виду;
  • по структуре страницы.

В коде роль такого «ориентира» выполняют CSS селекторы.

Они позволяют точно указать, какой элемент на странице тебе нужен. И это базовый навык не только для frontend-разработки, но и для автоматизации в Playwright.

Что такое CSS селектор

CSS селектор — это способ выбрать элемент (или группу элементов) на странице.

Например:

await page.click('button');

Здесь 'button' — это селектор. Он означает: «найди все кнопки».

Playwright:

  • находит элементы;
  • выполняет действие над первым подходящим.

Важно: селектор — это не элемент, а правило поиска.

Выбор по тегу

Самый простой селектор — по тегу.

await page.click('button');

Это означает:

  • найти все элементы <button>;
  • кликнуть по первому.

HTML пример:

<button>Войти</button>

Но такой селектор слишком общий — на странице может быть много кнопок.

Выбор по классу

Класс обозначается через точку .

await page.click('.btn');

HTML:

<button class="btn">Войти</button>

Здесь:

  • .btn — означает «элемент с классом btn».

Можно комбинировать:

await page.click('.btn.primary');

Это значит:

  • элемент с классами btn и primary.

Выбор по id

ID обозначается через #

await page.click('#login-button');

HTML:

<button id="login-button">Войти</button>

Особенность:

  • id должен быть уникальным;
  • это один из самых точных селекторов.

Выбор по атрибуту

Можно искать по атрибутам:

await page.click('[type="submit"]');

HTML:

<button type="submit">Отправить</button>

Это означает:

  • найти элемент с атрибутом type="submit".

Ещё пример:

await page.fill('[name="email"]', 'test@mail.com');

Комбинирование селекторов

Можно комбинировать несколько условий:

await page.click('button.btn');

Это значит:

  • найти кнопку (button);
  • у которой есть класс btn.

HTML:

<button class="btn">Войти</button>

Вложенность (поиск внутри)

Можно искать элементы внутри других:

await page.click('.form button');

HTML:

<div class="form">
  <button>Отправить</button>
</div>

Здесь:

  • .form button означает «кнопка внутри .form».

Это очень полезно, когда структура сложная.

Псевдоклассы (базово)

Иногда нужно выбрать конкретный элемент из группы.

await page.click('li:first-child');

Это значит:

  • первый элемент списка.

Или:

await page.click('li:nth-child(2)');

Это значит:

  • второй элемент.

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

Пример из реального теста

Допустим, у нас есть форма:

<div class="login-form">
  <input name="email" />
  <input name="password" />
  <button type="submit">Войти</button>
</div>

Тест:

await page.fill('.login-form [name="email"]', 'test@mail.com');
await page.fill('.login-form [name="password"]', '1234');
await page.click('.login-form button');

Что происходит:

  • мы ограничиваем поиск внутри .login-form;
  • точно выбираем нужные элементы;
  • выполняем действия.

Почему CSS селекторы могут быть проблемой

CSS селекторы — мощный инструмент, но есть нюанс.

Плохо:

await page.click('.container > div:nth-child(2) > button');

Почему:

  • зависит от структуры;
  • любое изменение сломает тест.

Лучше:

await page.getByRole('button', { name: 'Войти' }).click();

В Playwright предпочтение отдаётся:

  • getByRole
  • getByText
  • getByTestId

CSS селекторы используются, когда других вариантов нет.

Где это используется на практике

CSS селекторы используются:

  • в стилях (CSS);
  • в JavaScript (querySelector);
  • в Playwright;
  • в DevTools (инспектор браузера).

Например:

  • найти элемент;
  • проверить его состояние;
  • взаимодействовать с ним.

Итоговое понимание

CSS селекторы — это способ находить элементы на странице по их свойствам и структуре.

Они позволяют:

  • точно указывать нужный элемент;
  • работать с DOM;
  • автоматизировать действия.

Ключевая идея в том, что селектор — это не просто строка, а правило поиска.

Важно не просто знать синтаксис, а понимать:

  • насколько селектор устойчив;
  • будет ли он работать при изменениях;
  • понятен ли он другим разработчикам.

Хорошие селекторы — это основа стабильных тестов и качественного кода.