Multi-window тестирование

WebdriverIO предоставляет удобные механизмы для работы с несколькими окнами браузера, что необходимо для тестирования функциональности, связанной с открытием новых вкладок, окон или переключением между ними. В современных веб-приложениях часто используется открытие новых окон или вкладок для различных действий (например, открытия всплывающих окон, модальных окон или внешних страниц), что требует от тестировщика умения управлять несколькими окнами.

Структура окон и вкладок

В браузере каждое новое окно или вкладка имеет уникальный идентификатор — дескриптор окна (window handle). Когда браузер запускается, он имеет одно окно с единственным дескриптором, однако, по мере открытия новых окон или вкладок, их дескрипторы добавляются в список, с которым тестировщик может работать.

Для работы с несколькими окнами или вкладками важно понимать, как WebdriverIO позволяет:

  • Переключаться между окнами.
  • Закрывать окна.
  • Ожидать загрузки нового окна.

Открытие нового окна

Для открытия нового окна или вкладки WebdriverIO позволяет использовать команду browser.newWindow(url), которая запускает новое окно с указанным URL. После этого можно продолжить тестирование в новом окне.

browser.newWindow('https://example.com');

Этот метод создаёт новое окно и автоматически переключает управление на него. Чтобы вернуться к предыдущему окну, потребуется использовать дескриптор окна.

Переключение между окнами

Чтобы переключаться между окнами, необходимо использовать дескрипторы окон. Сначала можно получить все дескрипторы открытых окон с помощью browser.getWindowHandles(), а затем переключиться на нужное окно с помощью browser.switchToWindow(handle).

Получение дескрипторов окон

const handles = browser.getWindowHandles();

Это возвращает массив дескрипторов окон. Первый элемент в массиве всегда соответствует главному окну, остальные — новым вкладкам или окнами.

Переключение на нужное окно

После получения дескрипторов можно переключиться на нужное окно, передав дескриптор в метод switchToWindow().

browser.switchToWindow(handles[1]);  // Переключение на новое окно

Для возвращения в исходное окно достаточно снова использовать дескриптор главного окна:

browser.switchToWindow(handles[0]);  // Переключение обратно на главное окно

Закрытие окон

Для закрытия текущего окна или вкладки используется метод browser.closeWindow(). При этом текущий дескриптор окна будет удалён из списка окон. Если после закрытия окна остаются другие открытые окна, WebdriverIO автоматически переключит управление на одно из оставшихся.

browser.closeWindow();  // Закрывает текущее окно

Если необходимо закрыть все окна и завершить сессию, можно использовать метод browser.deleteSession().

Ожидание открытия нового окна

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

WebdriverIO не имеет встроенной команды для ожидания появления окна, но можно использовать ожидание с помощью browser.waitUntil(), чтобы убедиться, что количество окон увеличилось, или что дескриптор нового окна появился в списке:

browser.waitUntil(() => {
  return browser.getWindowHandles().length > 1;
}, {
  timeout: 5000,
  timeoutMsg: 'Новое окно не открылось за 5 секунд'
});

После этого можно переключиться на новое окно, используя switchToWindow().

Работа с контекстами

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

Для переключения в фрейм используется метод browser.switchToFrame(), который принимает индекс фрейма, его имя или дескриптор элемента фрейма. После переключения можно взаимодействовать с элементами внутри фрейма. Чтобы вернуться в основное окно, используется browser.switchToWindow().

const frame = $('#frame');
browser.switchToFrame(frame);  // Переключение на фрейм
// Взаимодействие с элементами внутри фрейма
browser.switchToWindow(handles[0]);  // Возврат в главное окно

Особенности тестирования с несколькими окнами

При тестировании с несколькими окнами важно помнить несколько важных аспектов:

  • Ожидания. Необходимо всегда учитывать время загрузки окон и страниц, а также правильно обрабатывать переходы между окнами.
  • Синхронизация. Переход между окнами или фреймами должен быть синхронизирован с ожиданиями, чтобы избежать ошибок из-за асинхронных операций.
  • Рабочая область. Использование нескольких окон может привести к путанице в DOM и состояниях страницы, поэтому важно четко управлять контекстами.

Пример полного теста с несколькими окнами

Ниже представлен пример теста, который иллюстрирует работу с несколькими окнами: открытие нового окна, переход между окнами, выполнение действий в каждом окне и их закрытие.

describe('Multi-window тестирование', () => {
  it('должно открыться новое окно и взаимодействовать с ним', () => {
    browser.url('https://example.com');

    // Получаем дескриптор текущего окна
    const mainWindow = browser.getWindowHandle();

    // Открываем новое окно
    browser.newWindow('https://example.com/new-page');
    
    // Получаем дескрипторы окон
    const handles = browser.getWindowHandles();

    // Переключаемся на новое окно
    browser.switchToWindow(handles[1]);

    // Выполняем действия в новом окне
    const title = browser.getTitle();
    expect(title).toBe('New Page');  // Проверка титула новой страницы

    // Переключаемся обратно на главное окно
    browser.switchToWindow(mainWindow);

    // Закрываем новое окно
    browser.closeWindow();

    // Проверяем, что вернулись в исходное окно
    expect(browser.getTitle()).toBe('Example Domain');
  });
});

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

Заключение

Механизмы работы с несколькими окнами в WebdriverIO являются важным инструментом для тестировщиков, работающих с веб-приложениями, где необходимо взаимодействовать с несколькими окнами и вкладками. Управление окнами с помощью дескрипторов позволяет гибко и эффективно управлять контекстами и переключаться между ними.

Оглавление