Как использовал CSS на проекте

Моё использование CSS в проектах тестирования

Как QA Engineer, я использую CSS не для разработки стилей, а как мощный инструмент для веб-тестирования, особенно при работе с Selenium WebDriver, DevTools и при проведении визуального регрессионного тестирования. CSS позволяет мне точно находить элементы на странице, анализировать их состояние и проверять корректность отображения интерфейса.

1. Локация элементов с помощью CSS Selectors в Selenium

В автоматизированном тестировании (Selenium, Playwright) я активно применяю CSS Selectors для поиска элементов. Они часто более читаемы и эффективны, чем XPath, особенно для сложных структур.

# Пример использования CSS Selector в Selenium Python
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://example.com")

# Поиск по классу - проверка кнопки "Submit"
submit_button = driver.find_element(By.CSS_SELECTOR, ".btn.btn-primary")
assert submit_button.is_enabled()

# Поиск по атрибуту - проверка поля ввода с определенным data-атрибутом
email_input = driver.find_element(By.CSS_SELECTOR, "input[data-testid='email-field']")
email_input.send_keys("test@example.com")

# Комбинация селекторов - проверка конкретного элемента в списке
specific_item = driver.find_element(By.CSS_SELECTOR, "ul.product-list > li:nth-child(3)")
assert "Expected Product" in specific_item.text

# Проверка состояния через CSS свойства
assert submit_button.value_of_css_property("background-color") == "rgba(0, 123, 255, 1)"

Ключевые преимущества CSS Selectors в тестировании:

• Более высокая производительность в большинстве браузеров по сравнению с XPath
• Прямое соответствие с стилями разработчиков, что упрощает поддержку
• Возможность использования псевдо-классов (:disabled, :checked, :nth-child) для проверки состояния элементов

2. Анализ стилей через DevTools при ручном тестировании

При проведении ручного тестирования или исследовании дефектов, я использую Chrome DevTools (или аналоги) для анализа CSS:

• Проверка примененных стилей к конкретному элемению при различных состояниях (hover, active, focus)
• Выявление конфликтов стилей или переопределений, которые могут вызвать визуальные баги
• Эмуляция различных условий через изменение CSS (например, скрытие элементов для проверки логики или изменение цветов для тестирования доступности)

3. Проверка визуального оформления и регрессионное тестирование

CSS критически важен при проверке визуальных требований и проведении регрессионного визуального тестирования:

• Сравнение ожидаемых и фактических CSS свойств:

  // Пример в тесте с Playwright
  const buttonColor = await page.locator('.submit-btn').evaluate(element => {
    return window.getComputedStyle(element).backgroundColor;
  });
  expect(buttonColor).toBe('rgb(0, 123, 255)');
  

• Проверка соответствия дизайн-системе — контроль значений отступов, размеров, цветов из общего CSS-файла

• Тестирование адаптивности — проверка применения медиа-запросов (@media) при разных размерах окна

• Валидация CSS-анимаций и переходов — проверка времени, свойств и корректности работы

4. Использование CSS для тестирования Accessibility (A11y)

CSS помогает в тестировании доступности веб-интерфейсов:

• Проверка скрытия элементов для скринридеров через свойства visibility, display или aria-hidden
• Контроль достаточного цветового контраста через анализ color и background-color
• Валидация фокуса элементов через стили :focus и проверку их видимости

5. Инструменты и расширения, основанные на CSS

В своей работе я использую специализированные инструменты:

• Browser DevTools для инспектирования стилей
• CSS-ориентированные селекторы в фреймворках автоматизации (Selenium, Cypress, Playwright)
• Визуальные регрессионные инструменты (Applitools, Percy), которые анализируют рендеринг CSS

Пример реального случая из проекта

На одном проекте возник дефект: кнопка не меняла цвет при disabled состоянии. Используя CSS анализ в DevTools, я обнаружил:

/* Оригинальный стиль */
.btn {
  background-color: blue;
}

/* Состояние disabled - НЕ ПРИМЕНЯЛОСЬ из-за конфликта */
.btn:disabled {
  background-color: gray; /* Этот стиль переопределялся более специфичным селектором */
}

Я создал автоматизированный тест для проверки этого состояния:

def test_button_disabled_state():
    button = driver.find_element(By.CSS_SELECTOR, ".payment-btn")
    
    # Проверка активного состояния
    assert button.value_of_css_property("background-color") == "rgba(0, 0, 255, 1)"
    
    # Эмуляция disabled состояния через JavaScript
    driver.execute_script("arguments[0].disabled = true;", button)
    
    # Проверка применения disabled стилей
    disabled_color = button.value_of_css_property("background-color")
    assert disabled_color == "rgba(128, 128, 128, 1)", f"Disabled color is {disabled_color}, expected gray"

Таким образом, CSS для QA Engineer — это не инструмент стилизации, а инструмент инспектирования, контроля и валидации визуальной и функциональной корректности веб-интерфейса. Глубокое понимание CSS позволяет эффективно находить дефекты, связанные с отображением, создавать устойчивые локаторы для автоматизации и проводить комплексное визуальное тестирование.