Ориентация экрана

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

Управление размером окна

В Protractor изменение ориентации экрана обычно осуществляется через изменение размеров окна браузера. Это достигается методом browser.manage().window().setSize(width, height).

// Пример установки размеров окна для ландшафтного режима
browser.manage().window().setSize(1024, 768);

// Пример установки размеров окна для портретного режима
browser.manage().window().setSize(768, 1024);

Ключевые моменты:

  • Ландшафтная ориентация обычно имеет большую ширину, чем высоту.
  • Портретная ориентация — наоборот, высота превышает ширину.
  • Размеры задаются в пикселях, что позволяет имитировать устройства с различными разрешениями.

Эмуляция мобильных устройств

Для тестирования веб-приложений под мобильные устройства в Protractor используется комбинация Chrome DevTools Protocol через chromeOptions. Это позволяет эмулировать конкретные устройства с заданной ориентацией экрана.

exports.config = {
  capabilities: {
    browserName: 'chrome',
    chromeOptions: {
      mobileEmulation: {
        deviceName: 'iPhone X'
      }
    }
  }
};

Смена ориентации на мобильном устройстве:

Эмуляция поддерживает смену ориентации через метод setOrientation WebDriver. Пример:

browser.driver.executeScript('window.screen.orientation.lock("landscape");');
browser.driver.executeScript('window.screen.orientation.lock("portrait");');

Особенности:

  • Не все браузеры корректно поддерживают API screen.orientation. В таких случаях изменения ориентации можно реализовать через смену размеров окна.
  • Эмуляция устройства позволяет тестировать CSS media queries, адаптивные сетки и поведение элементов на разных разрешениях.

Проверка корректности отображения после смены ориентации

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

let menuButton = element(by.id('menu-button'));
expect(menuButton.isDisplayed()).toBe(true);

let header = element(by.css('header'));
expect(header.getCssValue('height')).toBe('60px');

Рекомендации:

  • Использовать явные ожидания (ExpectedConditions) для элементов, которые могут изменять расположение после смены ориентации.
  • Проверять размеры и положение ключевых элементов с помощью getLocation() и getSize():
menuButton.getLocation().then(loc => console.log(loc));
menuButton.getSize().then(size => console.log(size));

Тестирование адаптивного дизайна

Protractor позволяет организовать тесты, которые проверяют корректность интерфейса при различных ориентациях:

describe('Адаптивный дизайн', function() {
  it('должен корректно отображать меню в портретной ориентации', function() {
    browser.manage().window().setSize(768, 1024);
    let menu = element(by.id('menu'));
    expect(menu.isDisplayed()).toBe(true);
  });

  it('должен корректно отображать меню в ландшафтной ориентации', function() {
    browser.manage().window().setSize(1024, 768);
    let menu = element(by.id('menu'));
    expect(menu.isDisplayed()).toBe(true);
  });
});

Важные моменты:

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

Практические советы

  1. Использование browser.driver.manage().window() — основной способ контроля ориентации на десктопах.
  2. Эмуляция мобильных устройств через chromeOptions — оптимальный подход для проверки мобильной версии.
  3. Проверка элементов через getSize() и getLocation() — гарантирует точность отображения интерфейса.
  4. Использование скриптов screen.orientation.lock() — эффективный метод смены ориентации на эмуляторах и современных браузерах.
  5. Явные ожидания обязательны при динамическом изменении DOM после смены ориентации.

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

Оглавление