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

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

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

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

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: 1280, height: 720 }, // Установка размера окна
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  
  // Другие действия на странице

  await browser.close();
})();

В приведенном примере устанавливается размер окна браузера в 1280x720 пикселей. Этот метод позволяет вручную настроить размеры окна в любой момент до или во время тестирования.

Использование встроенных устройств

Playwright поддерживает эмуляцию множества мобильных и планшетных устройств. Для этого используется специальный параметр device в настройках контекста. Он позволяет не только задать размер экрана, но и корректно эмулировать особенности устройства, такие как плотность пикселей (devicePixelRatio), сенсорный экран и другие характеристики.

Пример настройки контекста с использованием устройства:

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...devices['iPhone 12'], // Эмуляция iPhone 12
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  
  // Другие действия на странице

  await browser.close();
})();

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

Динамическое изменение размеров окна

Иногда в тестах может возникнуть необходимость изменять размеры окна браузера во время выполнения. Это можно сделать с помощью метода setViewportSize страницы:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  
  // Изначальные действия с одной конфигурацией
  await page.goto('https://example.com');
  
  // Динамическое изменение размера окна
  await page.setViewportSize({ width: 1920, height: 1080 });

  // Другие действия после изменения размера

  await browser.close();
})();

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

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

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

Для этого можно использовать устройство с поддержкой сенсорного ввода, как в примере выше, с использованием параметра device. Также можно установить другие параметры, такие как ориентация экрана или плотность пикселей.

Пример эмуляции мобильного устройства с сенсорным экраном:

const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    ...devices['Pixel 5'], // Эмуляция устройства Pixel 5
  });

  const page = await context.newPage();
  await page.goto('https://example.com');
  
  // Выполнение тестов на мобильном устройстве
  
  await browser.close();
})();

Этот подход позволяет не только настроить размер окна, но и симулировать поведение мобильных пользователей, таких как сенсорные жесты, свайпы, pinch-to-zoom и другие.

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

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

Пример с двумя контекстами с разными размерами:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  
  // Первый контекст с одним размером окна
  const context1 = await browser.newContext({
    viewport: { width: 1280, height: 720 },
  });
  const page1 = await context1.newPage();
  await page1.goto('https://example.com');
  
  // Второй контекст с другим размером окна
  const context2 = await browser.newContext({
    viewport: { width: 768, height: 1024 },
  });
  const page2 = await context2.newPage();
  await page2.goto('https://example.com');
  
  await browser.close();
})();

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

Учет размеров окна при выполнении тестов

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

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

Для проверки работоспособности элементов на разных разрешениях, можно использовать цикл с разными размерами окна:

const { chromium } = require('playwright');

const sizes = [
  { width: 1280, height: 720 },
  { width: 1920, height: 1080 },
  { width: 375, height: 667 },
];

(async () => {
  const browser = await chromium.launch();
  
  for (const size of sizes) {
    const context = await browser.newContext({
      viewport: size,
    });
    const page = await context.newPage();
    await page.goto('https://example.com');
    
    // Выполнение тестов для текущего размера окна
  }

  await browser.close();
})();

Этот подход позволяет тестировать интерфейс в разных разрешениях экрана без необходимости вручную менять размеры окна.

Заключение

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