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

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

Подготовка среды

Для начала необходимо установить Playwright и настроить проект. Важно, чтобы в вашем проекте был установлен Node.js. Установка Playwright выполняется с помощью npm:

npm init -y
npm install playwright

После установки можно приступать к написанию тестов.

Основы работы с Playwright для тестирования responsive дизайна

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

Основные шаги для тестирования responsive дизайна:

Запуск браузера Для начала необходимо создать экземпляр браузера. Playwright поддерживает работу с Chromium, Firefox и WebKit. Для тестирования responsive дизайна чаще всего используется Chromium, так как он наиболее полно поддерживает все современные веб-стандарты.
```
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
```
Установка устройства и размера экрана Playwright предоставляет встроенные устройства для тестирования мобильных версий сайтов. Например, чтобы протестировать адаптивность для iPhone 12, можно использовать следующий код:
```
const { devices } = require('playwright');
const iPhone = devices['iPhone 12'];
await page.emulate(iPhone);
```
Для установки произвольных разрешений экрана можно использовать метод setViewportSize:
```
await page.setViewportSize({ width: 1280, height: 800 });
```
Таким образом, можно настроить любое разрешение экрана, подходящее для тестирования.
Проверка адаптивного дизайна После настройки устройства или размера экрана можно продолжить выполнение тестов. Важно проверять, как изменяется структура страницы при изменении размера экрана. Это может включать проверку, скрываются ли элементы, правильно ли масштабируются изображения и текст, а также корректно ли работает навигация.

Например, для проверки, что меню не отображается на мобильных устройствах:
```
const menu = await page.$('.menu');
const isMenuVisible = await menu.isVisible();
assert(!isMenuVisible);
```
Тестирование нескольких размеров экрана Одним из ключевых аспектов responsive дизайна является корректная адаптация веб-страницы под разные размеры экрана. Для этого можно написать несколько тестов для различных разрешений.
```
const sizes = [
  { width: 320, height: 480 },  // мобильный телефон
  { width: 768, height: 1024 }, // планшет
  { width: 1280, height: 800 }, // десктоп
];

for (const size of sizes) {
  await page.setViewportSize(size);
  await page.reload();
  // Выполнение тестов для каждого размера
}
```

Проверка различных медиа-запросов

Медиа-запросы являются основным инструментом для реализации адаптивного дизайна на уровне CSS. Playwright позволяет проверить, как страницы реагируют на изменения в медиа-запросах.

Тестирование с изменением ширины окна Для тестирования медиа-запросов можно использовать Playwright для симуляции изменения ширины окна браузера. Например, можно проверить, как веб-страница изменяет свою верстку при изменении ширины экрана:
```
await page.setViewportSize({ width: 600, height: 800 });
// Проверка изменений для маленького экрана
await page.waitForSelector('.mobile-menu');

await page.setViewportSize({ width: 1200, height: 800 });
// Проверка изменений для большого экрана
await page.waitForSelector('.desktop-menu');
```
Проверка скрытых элементов Многие элементы интерфейса могут быть скрыты с помощью CSS для определенных размеров экрана. Для проверки можно использовать Playwright для того, чтобы удостовериться в корректном скрытии/показе элементов в зависимости от размеров окна.
```
await page.setViewportSize({ width: 480, height: 800 });
const mobileMenu = await page.$('.mobile-menu');
assert(await mobileMenu.isVisible());

await page.setViewportSize({ width: 1200, height: 800 });
const desktopMenu = await page.$('.desktop-menu');
assert(await desktopMenu.isVisible());
```

Использование различных браузеров для тестирования responsive дизайна

Для более тщательной проверки адаптивного дизайна полезно тестировать страницу в нескольких браузерах. Playwright поддерживает работу с несколькими браузерами, включая Chromium, Firefox и WebKit. Это позволяет проверить, как страница выглядит на разных движках.

const { webkit, firefox } = require('playwright');

const browsers = [chromium, webkit, firefox];
for (const browserType of browsers) {
   const browser = await browserType.launch();
   const page = await browser.newPage();
   await page.goto('https://example.com');
   // Выполнение тестов responsive дизайна
   await browser.close();
}

Дополнительные особенности тестирования

Тестирование с включением и отключением сетевого соединения Тестирование мобильных версий страниц включает также проверку корректности работы в условиях нестабильного соединения. Playwright позволяет симулировать различные сетевые условия:
```
await page.emulateNetworkConditions({
  offline: false,
  downloadThroughput: 100 * 1024, // 100 Kbps
  uploadThroughput: 100 * 1024,   // 100 Kbps
  latency: 100,                   // 100ms
});
```
Тестирование с изменением ориентации устройства Для мобильных устройств важно проверять, как сайт ведет себя при смене ориентации экрана (портретная/ландшафтная). Playwright позволяет эмулировать смену ориентации:
```
await page.setViewportSize({ width: 768, height: 1024 });  // портретная ориентация
await page.setViewportSize({ width: 1024, height: 768 });  // ландшафтная ориентация
```