Проверяешь ли тестами расположение кнопок

Моя философия по тестированию расположения элементов в UI

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

Что я действительно проверяю в контексте расположения

1. Функциональное расположение в потоке документа

Я пишу тесты, которые проверяют, что кнопки находятся в правильном DOM-порядке и в нужных родительских контейнерах. Это важно для доступности и табуляции.

// Пример теста на расположение в потоке (Jest + Testing Library)
test('кнопка "Сохранить" должна быть последней в форме', () => {
  render(<PaymentForm />);
  const formButtons = screen.getAllByRole('button');
  const saveButton = screen.getByText('Сохранить');
  
  // Проверяем, что кнопка "Сохранить" последняя среди кнопок формы
  expect(formButtons[formButtons.length - 1]).toBe(saveButton);
});

2. Относительное расположение и соседние элементы

Чаще проверяю не абсолютные координаты, а отношения между элементами:

• Кнопка находится внутри определенного контейнера
• Кнопка следует за определенным полем ввода
• Между элементами правильные отступы (через CSS-классы)

/* CSS-классы для тестирования */
.button--primary {
  margin-top: 1rem;
  order: 2;
}

// Проверка CSS-классов, управляющих расположением
test('основная кнопка имеет правильные отступы', () => {
  const { container } = render(<SubmitButton />);
  const button = container.querySelector('.button--primary');
  
  expect(button).toHaveClass('button--primary');
  expect(window.getComputedStyle(button).marginTop).toBe('16px');
});

3. Адаптивное поведение и breakpoints

Для респонсив-дизайна я пишу тесты, которые проверяют изменение расположения при разных размерах экрана:

// Тестирование адаптивного поведения
describe('Расположение кнопок на мобильных устройствах', () => {
  beforeEach(() => {
    window.innerWidth = 375; // iPhone X
  });
  
  test('кнопки переносятся в вертикальный стек', () => {
    render(<Navigation />);
    const buttons = screen.getAllByRole('button');
    
    // Проверяем, что кнопки следуют друг за другом вертикально
    buttons.forEach((button, index) => {
      if (index > 0) {
        const prevButton = buttons[index - 1];
        const prevRect = prevButton.getBoundingClientRect();
        const currentRect = button.getBoundingClientRect();
        
        // Проверяем вертикальное расположение
        expect(currentRect.top).toBeGreaterThan(prevRect.bottom);
      }
    });
  });
});

Когда я НЕ тестирую точные координаты

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

1. Хрупкие тесты: Малейшее изменение верстки ломает такие тесты
2. Разный рендеринг: Браузеры могут рендерить элементы с отличиями в 1-2px
3. Низкая ценность: Пользователь не заметит разницы в 5px, но тест сломается

Мой подход к визуальному тестированию

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

// Пример использования Percy/Screenshot тестов
test('визуальное расположение элементов главной страницы', async () => {
  await page.goto('https://example.com');
  
  // Делаем скриншот для визуального сравнения
  expect(await page.screenshot()).toMatchImageSnapshot();
});

Практические кейсы для тестирования расположения

✅ Тестирую всегда:

• Порядок табуляции для доступности
• Наличие в DOM в определенных состояниях
• Видимость/скрытие при взаимодействиях
• Соответствие макету по основным структурным блокам

❌ Обычно не тестирую:

• Точные координаты X/Y
• Абсолютные значения margin/padding в пикселях
• Позиционирование в нестандартных, анимированных интерфейсах

Инструменты в моем стеке

1. Jest + Testing Library — для логического расположения в DOM
2. Cypress — для end-to-end проверок взаимодействия
3. Percy/Chromatic — для визуального сравнения
4. Storybook — для изолированного тестирования компонентов

Заключение

Я проверяю не расположение кнопок в геометрическом смысле, а их правильное место в пользовательском сценарии. Хороший тест отвечает на вопрос: "Может ли пользователь найти и использовать эту кнопку, когда она ему нужна?" а не на вопрос: "Находится ли эта кнопка на координатах (X: 150, Y: 200)?". Такой подход создает устойчивые, содержательные тесты, которые действительно защищают UX, а не просто проверяют пиксели.