Переключение языков

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

Работа с элементами интерфейса для смены языка

Большинство сайтов реализует переключение языков через выпадающие списки, кнопки или ссылки. Cypress позволяет взаимодействовать с этими элементами через команды cy.get(), cy.click() и cy.select().

Пример выбора языка через выпадающий список:

cy.get('select#language-selector')
  .select('English') // выбор языка по видимому тексту
  .should('have.value', 'en'); // проверка корректного применения

Если переключение реализовано через кнопки:

cy.get('.language-button[data-lang="fr"]')
  .click();

cy.url().should('include', '/fr'); // проверка URL после смены языка

Ключевой момент — точная идентификация элементов. Рекомендуется использовать атрибуты data-*, чтобы тесты были устойчивы к изменениям верстки.

Проверка локализации контента

После переключения языка важно убедиться, что текст и элементы интерфейса отображаются корректно. Cypress позволяет проверять содержимое через команды cy.contains() и cy.get().should('contain').

Пример проверки заголовка на выбранном языке:

cy.get('h1.page-title')
  .should('contain', 'Bienvenue'); // заголовок на французском

Для масштабного тестирования разных языков удобно хранить локализованные строки в объекте:

const translations = {
  en: { welcome: 'Welcome' },
  fr: { welcome: 'Bienvenue' },
  es: { welcome: 'Bienvenido' },
};

Object.entries(translations).forEach(([lang, texts]) => {
  cy.get(`.language-button[data-lang="${lang}"]`).click();
  cy.get('h1.page-title').should('contain', texts.welcome);
});

Такой подход упрощает поддержку и расширение тестов для новых языков.

Работа с локализацией через API

Некоторые приложения меняют язык через AJAX-запросы или API. В этом случае полезно использовать команды cy.intercept() для перехвата запросов и проверки корректного ответа.

Пример:

cy.intercept('POST', '/api/set-language').as('setLanguage');

cy.get('.language-button[data-lang="de"]').click();
cy.wait('@setLanguage').its('response.statusCode').should('eq', 200);

cy.get('h1.page-title').should('contain', 'Willkommen');

Использование cy.intercept() позволяет не только убедиться, что запрос прошел успешно, но и проверить содержание ответа, что повышает точность тестов.

Управление локальными настройками браузера

Некоторые приложения сохраняют язык в localStorage или cookies. Cypress предоставляет команды cy.setCookie(), cy.getCookie(), cy.window() для прямого взаимодействия с этими хранилищами.

Пример установки языка через localStorage:

cy.window().then((win) => {
  win.localStorage.setItem('lang', 'it');
});

cy.reload(); // обновление страницы для применения изменений
cy.get('h1.page-title').should('contain', 'Benvenuto');

Этот метод особенно полезен для тестирования страниц без UI переключателя языка.

Асинхронные и динамические элементы

Переключение языков иногда сопровождается динамическим перерендером компонентов. Cypress автоматически ждет загрузки элементов через встроенный механизм ожидания, но для сложных случаев можно использовать cy.wait() или проверку состояния DOM:

cy.get('.page-content', { timeout: 10000 })
  .should('contain', 'Добро пожаловать');

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