Локаторы (XPath, CSS)
Тема дорожной карты · QA-инженер
Селекторы UI-элементов — это выражения, которые фреймворки автоматизации тестирования используют для нахождения конкретных элементов в DOM веб-страницы, и выбор надёжных селекторов — один из наиболее критичных факторов в построении поддерживаемых наборов тестов Selenium, Playwright или Cypress. Доступные стратегии выбора включают CSS-селекторы (например, button[data-testid="submit"]), XPath-выражения, атрибуты ID и name, текст ссылки и специфические для фреймворков локаторы — такие как getByRole(), getByText() и getByTestId() в Playwright, следующие семантике дерева доступности. Лучшая практика для селекторов UI-элементов — предпочитать стабильные, семантически значимые атрибуты — data-testid, aria-label, role — вместо хрупких позиционных XPath или визуальных имён классов, меняющихся при редизайне UI; этот принцип поддерживается в Cypress через конвенции cy.get('[data-cy="..."]'). Плохо выбранные селекторы UI-элементов являются главной причиной нестабильных тестов в CI/CD-пайплайнах, поэтому QA-команды должны устанавливать стратегию выбора селекторов как часть стандартов проектирования тестов и проверять локаторы вместе с кодом автоматизации в pull request.
Как это работает
Локаторы (XPath, CSS) использует browser-automation тулы (Playwright, Cypress, Selenium) для управления реальными браузерами. Стабильные локаторы критичны: предпочитайте data-testid-атрибуты (добавляют разработчики), затем ARIA-роли + accessible names, потом текст, в крайнем случае CSS-селекторы. Используйте явные wait (await page.waitForSelector(...)), никогда sleep. Изоляция тестов: каждый создаёт свои данные или гонится на свежем state. Параллельно для скорости; в CI с retry-on-flake.
Когда применять
Playwright — для новых проектов (лучший DX, быстро, multi-browser, скриншоты/видео встроены). Мокайте сеть на границе (msw, Playwright route) — UI-тесты не должны зависеть от надёжности реального backend. Visual regression (Percy, Chromatic, Playwright snapshot) — для design-sensitive флоу. Тегайте тесты по скорости + критичности (@smoke, @regression); smoke — на каждый PR, regression — еженочно.
Типичные ошибки
Ловушки Локаторы (XPath, CSS): локаторы через автогенерированные CSS-классы (следующий деплой их ломает); общий test-state даёт зависимость от порядка; UI-тесты без параллелизма в CI (1-часовые прогоны тормозят команду); flake-тесты оставлены — один flake подрывает доверие ко всему suite (чините или удаляйте).