Управление окном: maximizeWindow(), resizeWindow()

В тестировании веб-приложений с использованием Protractor управление размером и состоянием окна браузера играет важную роль. Это особенно актуально для проверки адаптивного дизайна, тестов на разных разрешениях экранов и симуляции поведения пользователей с различными устройствами. Protractor предоставляет встроенные методы для изменения размеров окна и его максимизации: maximizeWindow() и resizeWindow().

Метод maximizeWindow()

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

Синтаксис:

browser.driver.manage().window().maximize();

Особенности применения:

  • Работает на всех популярных браузерах: Chrome, Firefox, Edge.
  • Гарантирует, что браузер занимает полный экран независимо от текущего разрешения монитора.
  • Полезен для тестирования элементов, которые могут быть скрыты или изменены в зависимости от ширины окна (например, адаптивные меню, скрытые панели).
  • Должен вызываться перед действиями с элементами страницы, если требуется определённый вид интерфейса.

Пример использования:

describe('Тестирование maximizeWindow', () => {
  it('Разворачивает окно браузера', async () => {
    await browser.get('https://example.com');
    await browser.driver.manage().window().maximize();
    const size = await browser.driver.manage().window().getSize();
    console.log(`Ширина: ${size.width}, Высота: ${size.height}`);
  });
});

В этом примере после вызова maximize() выводятся текущие размеры окна, что позволяет убедиться, что окно действительно развёрнуто на весь экран.

Метод resizeWindow()

Метод resizeWindow() используется для установки окна браузера в определённый размер. Он необходим для тестирования интерфейсов при различных разрешениях экрана, например, для эмуляции мобильных устройств или планшетов.

Синтаксис:

browser.driver.manage().window().setSize(width, height);

Параметры:

  • width — ширина окна в пикселях.
  • height — высота окна в пикселях.

Особенности применения:

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

Пример использования:

describe('Тестирование resizeWindow', () => {
  it('Изменяет размер окна на 800x600', async () => {
    await browser.get('https://example.com');
    await browser.driver.manage().window().setSize(800, 600);
    const size = await browser.driver.manage().window().getSize();
    console.log(`Ширина: ${size.width}, Высота: ${size.height}`);
  });
});

В этом примере окно браузера устанавливается в размер 800 на 600 пикселей, после чего выводятся его текущие размеры для проверки.

Комбинированное использование

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

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

describe('Комбинированное управление окном', () => {
  it('Максимизация и изменение размера окна', async () => {
    await browser.get('https://example.com');

    // Разворачиваем окно на полный экран
    await browser.driver.manage().window().maximize();
    let size = await browser.driver.manage().window().getSize();
    console.log(`Максимизировано: Ширина: ${size.width}, Высота: ${size.height}`);

    // Изменяем размер окна для эмуляции планшета
    await browser.driver.manage().window().setSize(1024, 768);
    size = await browser.driver.manage().window().getSize();
    console.log(`Эмуляция планшета: Ширина: ${size.width}, Высота: ${size.height}`);
  });
});

Полезные рекомендации

  • Использовать maximizeWindow() при запуске тестов на десктопных разрешениях, чтобы избежать скрытия элементов.
  • Для тестирования адаптивного дизайна всегда применять resizeWindow() с различными размерами.
  • Проверять размеры окна через getSize() после изменения, чтобы убедиться в корректности установки.
  • Если тесты запускаются в headless-режиме, следует учитывать, что поведение методов может отличаться и размеры окна могут задаваться через конфигурацию браузера.

Итоговые моменты

  • maximizeWindow() — разворачивает окно на весь экран, упрощает взаимодействие с элементами интерфейса.
  • resizeWindow(width, height) — устанавливает точный размер окна, подходит для тестирования адаптивного дизайна.
  • Комбинация методов позволяет создавать гибкие сценарии тестирования для различных устройств и разрешений.

Оба метода являются частью API Protractor и взаимодействуют напрямую с управлением окном браузера через WebDriver. Их использование повышает надёжность и универсальность автоматизированных тестов.

Оглавление