Проверка переводов является важным этапом в тестировании локализованных веб-приложений. Она позволяет убедиться в корректности отображаемых текстов в разных языковых версиях сайта. В WebdriverIO можно эффективно автоматизировать этот процесс, обеспечив полноту тестирования интерфейса на всех языках. Рассмотрим, как реализовать проверку переводов с использованием WebdriverIO.
Перед тем как приступить к написанию тестов для проверки переводов, необходимо убедиться, что приложение поддерживает механизмы локализации, такие как использование файлов с переводами или интеграция с сервисами перевода. Обычно переводы загружаются из JSON или других форматов файлов, которые хранят ключи и соответствующие строки для различных языков.
Для реализации тестов потребуется создать базовую структуру WebdriverIO, включающую:
Существует несколько способов загрузки и использования локализованных данных в тестах. Одним из распространённых является использование специального плагина для работы с файлами JSON, в которых хранится информация о переводах. Например, такой файл может выглядеть следующим образом:
{
"login": "Войти",
"password": "Пароль",
"submit": "Отправить"
}
Для использования таких данных можно подключить библиотеку, которая будет считывать файл с переводами и передавать эти данные в тесты.
Для проверки корректности перевода в WebdriverIO можно использовать подход, который будет переключать язык на странице и проверять наличие нужных переводов.
Для начала необходимо создать конфигурационный файл WebdriverIO, в котором будут прописаны параметры для тестирования на различных языках. Пример конфигурации может выглядеть следующим образом:
exports.config = {
user: 'your-user',
key: 'your-key',
specs: ['./test/specs/**/*.js'],
capabilities: [
{
browserName: 'chrome',
'goog:chromeOptions': {
args: ['--headless', '--disable-gpu'],
},
},
],
baseUrl: 'https://your-website.com',
services: ['selenium-standalone'],
};
Здесь важно указать правильные браузеры и настройки для работы в разных языках.
Следующий шаг — создание теста, который будет проверять корректность перевода для конкретной страницы.
describe('Проверка переводов', () => {
it('Проверка перевода кнопки Войти на русский', () => {
// Устанавливаем язык на русский
browser.url('/?lang=ru');
// Получаем текст с кнопки
const loginButton = $('#loginButton');
// Проверяем, что текст на кнопке соответствует переводу
const buttonText = loginButton.getText();
expect(buttonText).toBe('Войти');
});
it('Проверка перевода кнопки Submit на английском', () => {
// Устанавливаем язык на английский
browser.url('/?lang=en');
// Получаем текст с кнопки
const submitButton = $('#submitButton');
// Проверяем, что текст на кнопке соответствует переводу
const buttonText = submitButton.getText();
expect(buttonText).toBe('Submit');
});
});
В данном примере проверяется, что тексты кнопок корректно
отображаются на разных языках в зависимости от установленного параметра
lang в URL.
Для проверки всех переводов на странице или в приложении можно использовать динамическое сравнение переведённого текста с ожидаемым значением. Для этого можно создать файл с ключами переводов, которые должны быть проверены на каждой странице.
Пример структуры файла с переводами:
{
"header": {
"home": "Главная",
"about": "О нас"
},
"footer": {
"contact": "Контакты",
"privacy": "Политика конфиденциальности"
}
}
Для каждого ключа можно создать отдельный тест, который будет переключать язык, получать текст элемента и проверять его с ожидаемым значением.
const translations = require('./translations.json');
describe('Проверка всех переводов', () => {
for (const section in translations) {
for (const key in translations[section]) {
it(`Проверка перевода для ${key}`, () => {
// Переключаем язык на русский
browser.url(`/page?lang=ru`);
// Получаем элемент
const element = $(`#${key}`);
// Сравниваем текст с переводом
const text = element.getText();
expect(text).toBe(translations[section][key]);
});
}
}
});
Этот подход позволяет проверять все элементы интерфейса на разных языках, гарантируя корректность перевода для всех частей интерфейса.
В случае, когда приложение использует динамическую загрузку контента (например, с помощью JavaScript), переводы могут подгружаться асинхронно. В таких случаях важно подождать, пока все элементы не будут загружены, прежде чем выполнять проверку текста.
Для этого можно использовать функции ожидания WebdriverIO, такие как
waitForExist или waitForDisplayed, чтобы
убедиться, что элементы видимы и готовы для проверки.
Пример с ожиданием появления элемента:
it('Проверка перевода кнопки после загрузки', () => {
browser.url('/page?lang=ru');
// Ожидаем появления кнопки
const button = $('#dynamicButton');
button.waitForExist();
// Проверяем текст
const buttonText = button.getText();
expect(buttonText).toBe('Отправить');
});
Для упрощения процесса проверки переводов можно использовать интеграцию с инструментами для локализации, такими как сторонние API (например, Google Translate API), для автоматической генерации списка переводов и их последующей проверки. Однако такой подход может быть полезен только для проверки качества перевода, а не для его точности.
Обработка пустых переводов: Важно предусмотреть возможность отсутствия перевода для некоторых элементов интерфейса. Это поможет избежать сбоев в тестах, если перевод не был предоставлен для конкретного языка.
Масштабирование: Если приложение поддерживает множество языков, можно создать параметризированные тесты, которые будут проверять все переводы на всех языках.
Тестирование контекста: Перевод может зависеть от контекста. Для более сложных интерфейсов стоит убедиться, что контекст элемента соответствует нужному переводу.
Автоматизация проверки переводов в WebdriverIO требует продуманного подхода к организации тестов и интеграции с механизмами локализации. Использование динамического тестирования с учетом переключения языков и ожидания загрузки элементов позволяет эффективно выявить ошибки в переводах и улучшить качество локализации веб-приложений.