HTML и CSS селекторы
Тема дорожной карты · QA-инженер
HTML и CSS для QA — это рабочие знания веб-разметки и стилизации, позволяющие инженерам по качеству писать точные локаторы элементов, понимать поведение рендеринга и выявлять дефекты вёрстки как при ручном исследовательском тестировании, так и при разработке автоматизированных тестов. Знание структуры HTML непосредственно применяется при создании CSS-селекторов или XPath-выражений для Selenium WebDriver, Playwright или Cypress — понимание семантического значения элементов вроде <button>, <input>, <form>, <label> и их ARIA-атрибутов (role, aria-label, data-testid) позволяет инженерам выбирать стабильные локаторы, устойчивые к рефакторингу UI. CSS для QA важен потому, что дефекты вёрстки — перекрывающиеся элементы, невидимые кликабельные области, ошибки адаптивных брейкпоинтов — часто вызываются взаимодействиями свойств z-index, display, visibility, overflow или position, которые тестировщик, знакомый с CSS, может быстро диагностировать в browser DevTools без помощи разработчика. HTML и CSS для QA также лежат в основе тестирования доступности: понимание семантического HTML (<nav>, <main>, <header>, роли-ориентиры) и контрастных соотношений CSS необходимо для проверки соответствия WCAG с помощью инструментов Axe или Lighthouse, интегрированных в наборы тестов Playwright или Cypress.
Как это работает
HTML и CSS селекторы для QA: HTTP request/response (метод, статус, заголовки, тело), DOM (браузер парсит HTML → дерево элементов, которыми манипулирует JavaScript), DevTools (вкладки Elements, Network, Console, Application), cookies + localStorage, REST vs GraphQL, статус-коды. Не обязательно писать frontend-код, но нужно его читать достаточно для отладки. Browser-автоматизация работает с DOM, не с JS-runtime — понимание обоих делает Playwright/Selenium-тесты надёжными.
Когда применять
Освойте Chrome DevTools первым — 80% вопросов "почему не работает". Умейте инспектировать сетевой запрос, смотреть его ответ, ре-играть с другим cookie. Умейте смотреть + редактировать localStorage / cookies. Знайте CSS-селекторы (их использует каждый UI-automation фреймворк). Читайте HTML страницы, которую тестируете — страница сама говорит, какие локаторы стабильны.
Типичные ошибки
Ловушки HTML и CSS селекторы: не открывают DevTools — отрендеренная страница рассказывает только половину; CSS-селекторы зависят от автогенерированных имён классов (.css-xyz123) — они меняются на каждой сборке; игнор вкладки Network при "странице медленно" (ответ почти всегда там).