Проверка переводов

Cypress предоставляет мощный инструментарий для тестирования пользовательских интерфейсов, включая проверку корректности локализации и переводов. Для этого важно использовать структурированный подход, который сочетает работу с DOM и проверку данных из внешних файлов переводов.

Организация файлов переводов

На практике переводы хранятся в виде JSON-файлов, где ключи соответствуют элементам интерфейса, а значения — строкам на нужном языке. Пример структуры:

{
  "header": {
    "title": "Добро пожаловать",
    "subtitle": "Начните работу с нашим приложением"
  },
  "buttons": {
    "submit": "Отправить",
    "cancel": "Отмена"
  }
}

Для мульти-язычного приложения создается папка locales, внутри которой находятся файлы для каждого языка:

/locales
  /en.json
  /ru.json
  /de.json

Загрузка и использование переводов в Cypress

Cypress позволяет загружать JSON-файлы через команду cy.fixture(). Это упрощает доступ к переводу и сравнение с текстом на странице:

cy.fixture('locales/ru.json').then((translations) => {
  cy.get('h1').should('have.text', translations.header.title);
  cy.get('button.submit').should('contain.text', translations.buttons.submit);
});

Ключевое преимущество такого подхода — возможность централизованной проверки всех элементов интерфейса на соответствие переводу без жесткого хардкода текста.

Проверка динамических элементов

Для динамических элементов, таких как уведомления, подсказки или элементы списка, можно использовать итерацию по ключам JSON:

cy.fixture('locales/ru.json').then((translations) => {
  Object.entries(translations.notifications).forEach(([key, value]) => {
    cy.get(`[data-cy=notification-${key}]`).should('have.text', value);
  });
});

Использование атрибутов data-cy позволяет изолировать селекторы от изменений стилей и структуры DOM, делая тесты более стабильными.

Проверка нескольких языков

Для проверки интерфейса на разных языках целесообразно использовать циклы или параметризованные тесты. Cypress поддерживает библиотеку mocha для организации тестов с использованием describe и it. Пример:

const languages = ['en', 'ru', 'de'];

languages.forEach((lang) => {
  describe(`Проверка переводов на ${lang}`, () => {
    beforeEach(() => {
      cy.visit(`/?lang=${lang}`);
    });

    it('Заголовки и кнопки отображаются корректно', () => {
      cy.fixture(`locales/${lang}.json`).then((translations) => {
        cy.get('h1').should('have.text', translations.header.title);
        cy.get('button.submit').should('contain.text', translations.buttons.submit);
      });
    });
  });
});

Такой подход позволяет значительно сократить дублирование кода и сразу проверять все поддерживаемые языки.

Автоматизация проверки всех ключей переводов

Иногда требуется убедиться, что все ключи JSON перевода реально используются в интерфейсе и не содержат пустых значений. Для этого можно реализовать сканирование DOM и проверку соответствия:

cy.fixture('locales/ru.json').then((translations) => {
  const allValues = Object.values(translations).flatMap(obj => Object.values(obj));
  allValues.forEach((text) => {
    cy.contains(text).should('exist');
  });
});

Это позволяет выявить недостающие переводы или опечатки на ранней стадии разработки.

Интеграция с CI/CD

Для крупных проектов рекомендуется запускать проверку переводов в пайплайне CI/CD. Cypress поддерживает Headless режим, что позволяет выполнять тесты без открытия браузера:

npx cypress run --headless

В комбинации с проверкой всех языков это обеспечивает стабильное обнаружение проблем с локализацией при каждом коммите.