Тестирование i18n

Тестирование интернационализации (i18n) является критически важным этапом в разработке приложений, рассчитанных на многоязычную аудиторию. Cypress предоставляет гибкие инструменты для проверки локализованных интерфейсов, текста, форматов дат, чисел и поведения приложения при смене языка.

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

Перед началом тестирования необходимо убедиться, что приложение поддерживает смену языка через URL, куки или локальное хранилище. В Cypress это реализуется через:

Cypress.Commands.add('setLanguage', (lang) => {
  cy.visit(`/${lang}`);
});

Команда setLanguage позволяет централизованно менять язык приложения в тестах, что упрощает поддержку множества языков. Альтернативно, можно модифицировать локальное хранилище:

cy.window().then((win) => {
  win.localStorage.setItem('i18nLanguage', 'fr');
});
cy.reload();

Важно удостовериться, что данные изменения корректно инициируют ререндер интерфейса на выбранном языке.

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

Текстовые элементы на странице должны быть проверены для каждой поддерживаемой локали. Используется подход с хранением ожидаемых значений в JSON-файлах:

import translations from '../fixtures/translations.json';

describe('Проверка текста на разных языках', () => {
  ['en', 'fr', 'de'].forEach((lang) => {
    it(`Отображение текста на языке ${lang}`, () => {
      cy.setLanguage(lang);
      cy.get('.welcome-message').should('have.text', translations[lang].welcomeMessage);
    });
  });
});

Ключевые моменты:

  • Тесты должны быть параметризованы для всех поддерживаемых языков.
  • Элементы DOM проверяются с учётом точного текста, включая пробелы и спецсимволы.

Тестирование форматов данных

i18n затрагивает не только текст, но и форматирование чисел, дат и валют. Проверка этих элементов требует особого внимания:

cy.get('.price').then(($el) => {
  const text = $el.text();
  expect(text).to.match(/\d{1,3}(,\d{3})*\.\d{2}/); // Проверка формата en-US
});

При смене языка форматы могут меняться. Для дат важно использовать библиотеку, поддерживающую локали (например, date-fns):

import { format } from 'date-fns';
import { fr } from 'date-fns/locale';

cy.get('.date').should(($el) => {
  const formattedDate = format(new Date(), 'dd MMMM yyyy', { locale: fr });
  expect($el.text()).to.eq(formattedDate);
});

Проверка компонентов с динамическим контентом

Если приложение использует динамические данные с сервера, необходимо проверять их локализованные значения. Например, при получении списка товаров с API:

cy.intercept('/api/products', { fixture: 'products.json' }).as('getProducts');
cy.visit('/products?lang=fr');
cy.wait('@getProducts');
cy.get('.product-name').each(($el, index) => {
  expect($el.text()).to.eq(translations.fr.products[index].name);
});

Тестирование переключения языков

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

cy.get('.language-selector').select('Deutsch');
cy.get('body').should('contain', translations.de.welcomeMessage);

Проверка должна охватывать:

  • обновление текста на всех видимых элементах;
  • сохранение выбранного языка после перезагрузки страницы;
  • корректное обновление URL или локального хранилища, если приложение использует их для хранения состояния.

Проверка контента, зависящего от языка

Некоторые интерфейсы могут менять структуру или видимость элементов в зависимости от языка. Например, длинные строки на немецком или французском могут требовать переноса текста:

cy.get('.header-title').invoke('text').then((text) => {
  expect(text.length).to.be.lessThan(50); // Проверка на переполнение
});

Другой пример — динамическая адаптация календарей и сортировок, где локаль определяет первый день недели или формат даты.

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

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

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

languages.forEach((lang) => {
  describe(`Тесты для языка ${lang}`, () => {
    beforeEach(() => {
      cy.setLanguage(lang);
    });

    it('Проверка приветственного текста', () => {
      cy.get('.welcome-message').should('have.text', translations[lang].welcomeMessage);
    });
  });
});

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

  • Хранение всех текстов и форматов в отдельных JSON/fixtures файлах.
  • Использование кастомных команд Cypress для смены языка и проверки локализованных элементов.
  • Проверка как статического, так и динамического контента.
  • Тестирование форматов дат, чисел и валют отдельно от текстовых элементов.
  • Автоматизация запуска тестов для всех языков через CI/CD.

Тщательное покрытие i18n тестами позволяет предотвращать ошибки локализации, баги отображения текста и некорректное поведение динамического контента в многоязычных приложениях.

Оглавление