RTL layouts

Тестирование интерфейсов с поддержкой Right-to-Left (RTL) языков требует особого внимания к деталям, которые часто остаются незамеченными при работе с LTR интерфейсами. RTL-верстка встречается в приложениях, поддерживающих арабский, иврит, персидский и другие языки. Cypress предоставляет возможности для автоматизированного контроля таких интерфейсов, однако подход к тестированию должен учитывать специфику направления текста и элементов.

Настройка окружения для RTL

Для корректного тестирования интерфейсов RTL необходимо:

  1. Установить язык приложения: Многие приложения поддерживают динамическое переключение языка через конфигурацию или контекст. В Cypress это можно делать через cy.visit() с параметром query string или через локальные настройки:

    cy.visit('/?lang=ar');

  2. Добавить атрибут dir к корневому элементу: HTML-атрибут dir="rtl" управляет направлением текста и расположением блоков. В некоторых приложениях достаточно добавить его на <html> или <body>:

    cy.get('html').invoke('attr', 'dir', 'rtl');

  3. Убедиться, что CSS корректно применяет RTL-стили: Многие библиотеки используют отдельные классы или CSS-файлы для RTL. Проверка правильного подключения CSS — обязательный шаг перед тестированием.

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

RTL-верстка меняет расположение элементов по горизонтали. В тестах важно контролировать:

  • Порядок элементов в flex-контейнерах: Использование CSS-свойств flex-direction и justify-content может влиять на порядок элементов. Проверку можно делать с помощью Cypress и jQuery-подобного API:

    cy.get('.menu-item').first().should('contain.text', 'الإعدادات'); // первый элемент должен быть "Настройки"

  • Позиционирование с помощью offset() и position(): Для сложных макетов проверка визуального расположения элементов через их координаты:

    cy.get('.button-prev').then($el => {
  expect($el.position().left).to.be.greaterThan(0);
});

  • Перевернутые иконки и стрелки: В RTL интерфейсах стрелки навигации или иконки могут быть зеркально отражены. Проверку можно автоматизировать через классы CSS или атрибуты transform: scaleX(-1).

Проверка текста и контента

  • Выравнивание текста: Свойство CSS text-align меняется на right для RTL. Cypress позволяет проверять это:

    cy.get('.header-title').should('have.css', 'text-align', 'right');

  • Длинные строки и переносы: В RTL языках слова могут быть длиннее, что приводит к переносу текста. В тестах можно проверять высоту блока и количество строк:

    cy.get('.paragraph').invoke('height').should('be.lessThan', 200);

  • Локализация контента: Проверка текста на правильный язык особенно важна для динамических данных:

    cy.get('.welcome-message').should('contain.text', 'مرحبا');

Взаимодействие с элементами

RTL влияет на позицию клика и поведение drag-and-drop. Cypress использует координаты относительно элемента, поэтому нужно учитывать:

  • Клики по элементам:

    cy.get('.slider').click('right'); // для RTL может соответствовать логическому "вперед"

  • Перетаскивание элементов: События drag-and-drop требуют учёта направления:

    cy.get('.item')
  .trigger('mousedown', { button: 0 })
  .trigger('mousemove', { clientX: -100, clientY: 0 }) // движение влево для RTL
  .trigger('mouseup', { force: true });

Скриншоты и визуальное тестирование

RTL интерфейсы особенно чувствительны к визуальным ошибкам. Использование Cypress с инструментами визуального тестирования помогает выявлять:

  • Неправильное выравнивание блоков
  • Перекрытия элементов
  • Некорректное отображение иконок

Пример интеграции с cypress-image-snapshot:

cy.get('.main-container').toMatchImageSnapshot({
  failureThreshold: 0.01,
  failureThresholdType: 'percent'
});

Лучшие практики

  1. Всегда тестировать интерфейсы в обеих ориентациях (LTR и RTL).
  2. Использовать селекторы, независимые от визуального порядка (data-testid или data-cy).
  3. Проверять как текст, так и визуальное расположение блоков.
  4. Автоматизировать проверки минимального и максимального размера окна, так как RTL-макеты часто ломаются на малых экранах.
  5. При изменении CSS-фреймворков повторно проверять зеркальное отображение элементов.

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

Оглавление