Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ
Мобильное веб-тестирование — один из критически важных факторов качества интерфейса. В этой статье разберём, как работать с эмуляторами и реальными устройствами в Playwright, и в чём между ними принципиальная разница.
Зачем нужно мобильное веб-тестирование
Поскольку мобильные устройства формируют более половины мирового веб-трафика, обеспечение корректной работы сайта на разных размерах экранов, разрешениях и мобильных браузерах — это уже не опция, а обязательное требование.
Современные процессы веб-разработки требуют инструментов, которые позволяют:
- моделировать адаптивные брейкпоинты;
- эмулировать мобильные браузеры;
- бесшовно интегрироваться в CI/CD-пайплайны;
- поддерживать как эмуляцию без монитора, так и проверку на реальных устройствах.
Благодаря богатому набору API и кроссбраузерным возможностям Playwright стал одним из основных инструментов для автоматизированного мобильного тестирования. Разберём два ключевых подхода, которые он поддерживает: эмуляцию мобильного экрана и тестирование на реальных устройствах.
Как работает мобильная эмуляция в Playwright
Playwright позволяет эмулировать мобильные устройства, настраивая параметры окна браузера и идентификатор пользователя с использованием готовых описаний устройств из официальной библиотеки.
Например, вот как можно имитировать работу на iPhone 12:
import { chromium, devices } from ‘@playwright/test’;
const iPhone = devices[‘iPhone 12’];
(async () => {
const browser = await chromium.launch();
const context = await browser.newContext({
…iPhone
});
const page = await context.newPage();
await page.goto(‘https://yourwebsite.com');
await page.screenshot({ path: ‘iPhone-emulated.png’ });
await browser.close();
})();
Этот код выполняет следующие действия:
- задаёт разрешение экрана и плотность пикселей устройства;
- устанавливает идентификатор пользователя, соответствующий устройству;
- эмулирует сенсорные события и мобильный режим просмотра.
Эмуляция работает через протоколы Chromium DevTools и отлично подходит для проверки адаптивности интерфейса.
Читайте также: Большой учебник по Playwright
Тестирование адаптивного дизайна с эмуляцией окна браузера
Можно вручную задать размеры окна браузера для тестирования адаптивного поведения сайта без использования готовых профилей устройств:
const context = await browser.newContext({
viewport: { width: 375, height: 812 },
userAgent: ‘Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)…’,
isMobile: true,
hasTouch: true,
});
Этот подход полезен, когда:
- нужны нестандартные размеры экрана (например, крайние случаи);
- проверяется прогрессивное улучшение интерфейса на определённых точках перелома;
- требуется эмуляция устройств, отсутствующих в стандартной библиотеке.
Важно помнить, что это лишь эмуляция — она не отражает реальную работу графического процессора, поведение операционной системы или особенности браузера на физическом устройстве.
Тестирование на реальных устройствах: зачем и когда это нужно
Эмуляция позволяет быстро проверить сайт на разных устройствах, но у неё есть свои ограничения:
- Отсутствие различий в отображении в нативных браузерах: эмуляция не может обнаружить ошибки, которые появляются только в Safari на iOS или Chrome на Android.
- Нет поддержки сенсорных жестов, например сжатия экрана или инерционной прокрутки.
- Невозможно замерить реальные показатели производительности, такие как нагрузка на процессор, задержки сети или аппаратные задержки рендеринга.
Чтобы решить эти проблемы, тесты Playwright можно выполнять на реальных мобильных устройствах с помощью:
- Облачных платформ: BrowserStack, Sauce Labs, LambdaTest
- Подключения по USB и отладки через протокол Chrome DevTools
Реальные устройства особенно нужны для:
- проверки доступности (скринридеры, жесты);
- функций, чувствительных к производительности или расходу батареи;
- прогрессивных веб-приложений и приложений, которые можно устанавливать.
Рекомендации по мобильному тестированию веб-приложений с Playwright
Мобильное тестирование — это не просто эмуляция устройств. Нужно продумать стратегию, быть точным и учитывать реальное поведение пользователей. Чтобы максимально эффективно работать с Playwright, используйте следующие подходы:
1. Создайте матрицу покрытия устройств
Перед началом тестирования определите матрицу устройств, учитывая:
- аналитику ваших пользователей (популярные мобильные устройства и браузеры);
- разнообразие операционных систем (iOS и Android);
- версии браузеров (Safari, Chrome, Firefox Mobile).
Матрица позволит понять, какие тесты достаточно запускать на эмуляторах, а для каких потребуется реальное устройство.
2. Используйте встроенные профили устройств Playwright с умом
Playwright содержит готовые профили устройств в playwright.devices, которые позволяют:
- одинаково эмулировать популярные мобильные устройства (iPhone 12, Pixel 5);
- быстро тестировать адаптивность интерфейса;
- имитировать стандартные сенсорные действия.
Тем не менее, для нестандартных экранов или малораспространённых устройств потребуются кастомные настройки.
3. Разделяйте тесты окна браузера и полную эмуляцию мобильного устройства
Используйте изменение размеров окна браузера (например, viewport: { width: 360, height: 640 }) для:
- базовой проверки адаптивного макета;
- тестирования точек перелома в сетках и flex‑компонентах.
Полная эмуляция устройства (через devices[]) нужна, когда:
- требуется имитация идентификатора пользователя и сенсорного ввода;
- вы проверяете специфическое поведение для мобильных устройств (например, мобильное меню навигации, ориентацию устройства, автозаполнение форм).
4. Проверяйте функциональность с учётом типа устройства
Добавляйте условные проверки, чтобы проверять поведение, специфичное для конкретного устройства, например: сворачиваемые меню, свайпы или отложенную загрузку изображений на мобильных устройствах.
if (page.viewportSize()?.width < 480) {
// Assert mobile navigation
}
Так вы проверяете не только размеры экрана, но и логику, которая адаптируется под конкретное устройство.
5. Интеграция визуальной регрессии на эмулируемых устройствах
Объединяйте Playwright с Pixelmatch или Resemble.js, чтобы сравнивать скриншоты на уровне устройств. Запускайте тесты на:
- ключевых мобильных страницах (главная, страница товара, оформление заказа);
- нескольких эмулируемых устройствах параллельно.
Это позволяет быстро выявлять сдвиги макета или изменения стилей, которые функциональные тесты могут пропустить.
6. Тестирование касаний и жестов на мобильных устройствах
Убедитесь, что при эмуляции включён параметр hasTouch: true. Используйте методы page.mouse или page.touchscreen для имитации реальных взаимодействий:
await page.touchscreen.tap(200, 300); // Emulate tap
Для более реалистичного тестирования жестов (например, свайпов) рекомендуется интеграция с BrowserStack App Automate или использование реальных устройств Android и iOS.
7. Автоматизируйте тесты на реальных устройствах для регрессионных проверок
Playwright можно интегрировать с облачными платформами, такими как Sauce Labs, LambdaTest или BrowserStack, что позволяет:
- проверять отображение сайта на реальных устройствах;
- получать точные метрики производительности (например, время до интерактивности и загрузки первого содержимого);
- учитывать особенности браузеров и потенциальные проблемы с интерфейсом.
Рекомендуется настроить ночные сборки или наборы регрессионных тестов, чтобы они выполнялись и на эмуляторах, и на выбранных реальных устройствах.
Заключение
Мобильное веб-тестирование уже не сводится к уменьшению окна браузера на рабочем столе. Playwright даёт возможность не только эмулировать устройства, но и проверять реальный опыт использования — от адаптивных интерфейсов до сенсорных жестов и показателей производительности.
Эмуляторы позволяют быстро проверять интерфейс, а реальные устройства дают точную уверенность перед релизом. Эффективная стратегия тестирования сочетает оба подхода.
Если вы разрабатываете приложения для разных устройств или сайты, ориентированные на мобильные устройства, использование возможностей Playwright поможет гарантировать стабильную работу продукта вне зависимости от размера экрана или характеристик устройства.
Перевод статьи «Mobile Web Testing with Playwright: Emulators vs Real Devices».