Синхронизация состояния между браузерами

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

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

1. Управление сессиями браузеров

Каждый браузер, с которым работает WebDriverIO, управляется через уникальную сессию. Эта сессия позволяет взаимодействовать с DOM, выполняя действия, проверяя состояния и получая данные. Важно отметить, что WebDriverIO предоставляет возможность создавать несколько браузерных сессий, что позволяет работать с несколькими экземплярами браузеров одновременно.

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

const browser1 = await remote({
    logLevel: 'error',
    capabilities: {
        browserName: 'chrome'
    }
});

const browser2 = await remote({
    logLevel: 'error',
    capabilities: {
        browserName: 'firefox'
    }
});

// Пример синхронизации куки между браузерами
const cookies = await browser1.getCookies();
await browser2.setCookies(cookies);

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

2. Куки и их использование

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

WebDriverIO предоставляет методы для работы с куки. Например, для получения всех куки из браузера используется метод getCookies, а для установки куки — setCookies.

// Получение всех куки из первого браузера
const cookies = await browser1.getCookies();

// Установка полученных куки во второй браузер
await browser2.setCookies(cookies);

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

3. Локальное хранилище

Локальное хранилище (localStorage) и сессионное хранилище (sessionStorage) также являются важными механизмами для хранения данных на стороне клиента. Они могут содержать информацию, которая должна быть доступна в разных частях приложения, например, настройки пользовательского интерфейса или данные, которые не должны отправляться на сервер.

Для синхронизации состояния между браузерами можно использовать методы WebDriverIO для работы с локальным хранилищем. Важно, чтобы данные, сохранённые в localStorage в одном браузере, можно было получить и использовать в другом.

// Получение данных из localStorage первого браузера
const data = await browser1.execute(() => {
    return window.localStorage.getItem('userData');
});

// Установка данных в localStorage второго браузера
await browser2.execute((data) => {
    window.localStorage.setItem('userData', data);
}, data);

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

4. Синхронизация состояний интерфейса

Важной частью синхронизации является обеспечение одинакового состояния интерфейса в разных браузерах. Это может быть особенно актуально при проверке кросс-браузерной совместимости. Одним из способов достижения этой цели является использование WebDriverIO для взаимодействия с элементами интерфейса на разных браузерах, например, проверка наличия элементов, изменение их видимости или состояния.

Для этого можно использовать методы WebDriverIO, такие как isDisplayed, getText, getAttribute, чтобы убедиться, что элементы на обоих браузерах находятся в одинаковом состоянии.

// Проверка состояния элемента в первом браузере
const isVisibleInBrowser1 = await browser1.$('#loginButton').isDisplayed();

// Проверка состояния элемента во втором браузере
const isVisibleInBrowser2 = await browser2.$('#loginButton').isDisplayed();

// Сравнение состояний
assert.strictEqual(isVisibleInBrowser1, isVisibleInBrowser2);

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

5. Синхронизация событий и взаимодействий

Иногда необходимо синхронизировать события между браузерами, например, при тестировании реакций на действия пользователя. Это может быть полезно, если один браузер выполняет определённое действие, а второй должен отреагировать на это действие.

Для синхронизации действий можно использовать события в WebDriverIO, такие как click, setValue, scrollIntoView и другие. Важно, чтобы действия, выполненные в одном браузере, корректно синхронизировались с другим браузером.

// Нажатие кнопки в первом браузере
await browser1.$('#submitButton').click();

// Ожидание, пока изменение состояния отобразится во втором браузере
const resultInBrowser2 = await browser2.$('#result').getText();
assert.strictEqual(resultInBrowser2, 'Success');

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

6. Использование WebDriverIO Grid для параллельных тестов

WebDriverIO поддерживает интеграцию с Selenium Grid и другими решениями для запуска тестов параллельно на нескольких браузерах и устройствах. Это позволяет значительно ускорить процесс тестирования и синхронизации состояния между браузерами, выполняя тесты одновременно в разных средах.

При использовании WebDriverIO Grid тесты могут быть настроены для работы с несколькими сессиями и параллельного выполнения тестов, что помогает обеспечить согласованность состояния на разных платформах.

const options = {
    hostname: 'hub.browserstack.com',
    port: 80,
    capabilities: [{
        browserName: 'chrome',
        browserVersion: 'latest',
        'bstack:options': {
            os: 'Windows',
            osVersion: '10',
        }
    }, {
        browserName: 'firefox',
        browserVersion: 'latest',
        'bstack:options': {
            os: 'Windows',
            osVersion: '10',
        }
    }]
};

const driver = await remote(options);

Запуск тестов на нескольких браузерах и устройствах в параллельном режиме помогает эффективно синхронизировать состояние и ускоряет процесс тестирования.

Заключение

Синхронизация состояния между браузерами в WebDriverIO является важным аспектом тестирования, который включает в себя управление сессиями, куки, локальным хранилищем и синхронизацию взаимодействий между браузерами. Используя подходы, описанные выше, можно значительно улучшить качество тестов и обеспечить консистентность поведения приложения на разных платформах.

Оглавление