Тестирование сайта в Safari на Windows
Когда вы разрабатываете сайт, важно, чтобы он выглядел одинаково хорошо во всех браузерах. Пользователи используют разные браузеры. Например, один и тот же человек на ПК может использовать Chrome или Firefox, а на мобильном - Safari или Samsung Internet.
Если ваш сайт не работает в одном из популярных браузеров, часть аудитории может столкнуться с проблемами и перейти к конкурентам, сайт которых работает одинаково хорошо во всех браузерах. Некорректное отображение сайта в разных браузерах также может ухудшить его позиции в поисковых системах.
Тестирование сайта во всех браузерах помогает обеспечить высокий уровень UX для всех пользователей и улучшить его видимость в поисковых системах.
Browser Market Share Worldwide - November 2024 (StatsCounter)
По статистике, Safari (18.22%) является вторым по популярности браузером в мире после Google Chrome (67.48%).
Что такое WebKit
Webkit - это движок, на котором работает Safari. Он отличается от Blink (используемого в Chrome) и Gecko (в Firefox). Эти различия могут влиять на:
- рендеринг HTML и CSS,
- выполнение JavaScript,
- поддержку новых стандартов и технологий,
- анимации и переходы,
- форматирование текста и шрифтов,
- работу форм и интерактивных элементов.
Тестирование позволяет выявить такие баги до того, как они станут причиной негативного UX.
Google Chrome использует Blink в качестве движка рендеринга веб-страниц и Chromium как основу своего браузера.
Chromium — это открытый проект браузера, на основе которого Google Chrome и другие браузеры (например, Microsoft Edge, Opera) создают свои собственные версии.
Запуск Safari на Windows
В 2012 году Apple прекратила выпуск обновлений для Safari на Windows. После этого браузер стал недоступен для скачивания с официального сайта Apple. Чтобы запустить его на Windows, приходится искать неофициальные или устаревшие версии, что небезопасно.
Разработчикам, которым нужен доступ к Safari, приходится использовать виртуальные машины с macOS, облачные сервисы для тестирования (BrowserStack, Sauce Labs) или устройства Apple.
Если нужно протестировать сайт в Safari, но при этом не рисковать безопасностью, можно воспользоваться такими способами:
- Установить Epiphany — альтернативный браузер с движком WebKit (для Linux или Windows WSL)
- Настроить Playwright (для этого понадобится Node.js)
Установка Epiphany с помощью WSL
Epiphany — основной браузер в среде GNOME на Linux и других Unix-подобных операционных системах.
Epiphany, как и Safari, основан на движке WebKit. Это позволяет Epiphany отображать веб-страницы с таким же рендерингом и поведением. Установить Epiphany на Windows можно только с помощью WSL.
WSL (Windows Subsystem for Linux) — это функция Windows, которая позволяет запускать Linux-среду прямо в системе без использования виртуальных машин или двойной загрузки.
Все последующие команды будут приведены для версий WSL 2.3.26 и Ubuntu 22.04.3 LTS. После установки в меню пуск появится значок с названием Web (Ubuntu). Это и есть установленный браузер Epiphany.
sudo apt install epiphany-browser
Интерфейс браузера Epiphany (GNOME Web) на примере сайта MDN Docs
Настройка Playwright
Playwright — это инструмент для автоматизации браузеров, который помогает тестировать веб-приложения. Он поддерживает Chrome, Firefox и WebKit, позволяя взаимодействовать с элементами страниц, заполнять формы и т.д.
Основные применения:
- Автоматизированное тестирование
- End-to-end тесты
- Веб-скрапинг
- Проверка совместимости на разных браузерах
Playwright позволяет запускать тесты в браузере WebKit на разных платформах, без необходимости использовать Mac, а также обновляет поддержку движков, обеспечивая актуальность тестов.
Playwright устанавливается через терминал или с помощью расширения для VS Code. В обоих случаях понадобится установленный Node.js.
Установка Playwright через терминал
npm init playwright@latestУстановка Playwright с помощью плагина
Для начала, нужно установить плагин из маркетплейса VS Code. Устанавливайте только тот плагин, что был подтвержден Microsoft.
Расширение Playwright в маркетплейсе VS Code
После установки плагина, откройте командную строку в VS Code. Сделать это можно с помощью сочетания клавиш Ctrl + Shift + P. В командной строке начните вводить install playwright. Как только появятся результаты, выберите Test: Install Playwright.
В следующем окне выбираем нужные браузеры из списка. В нашем случае это WebKit (— powers Apple Safari). По умолчанию будет также будет выбрана опция Add Github Actions workflow. Если вы не хотите, чтобы playwright-тесты запускались каждый раз при сборке проекта на Github, смело отключайте эту опцию.
Если вы устанавливаете плагин в WSL, обязательно включите функцию Install Linux dependencies. После завершения установки в терминале появится сообщение о том, что Playwright был добавлен в ваш Node.js проект как dev-зависимость.
Также будут установлены некоторые файлы для ознакомления с работой Playwright. В основном, это будут папки tests и e2e.
Пример настройки конфиг-файла playwright.config.ts для отображения как десктопной, так и мобильной версии браузера Safari.
export default defineConfig({
...
projects: [
{
name: "webkit",
use: { ...devices["Desktop Safari"] },
},
/* Мобильная версия */
{
name: "Mobile Safari",
use: { ...devices["iPhone 12"] },
},
],
});Модель устройства (например, iPhone 12) можно поменять на любую в списке поддерживаемых.
Пример автоматического включения локального сервера разработки перед запуском теста:
export default defineConfig({
...
webServer: {
/* Меняем command и url на значения вашего проекта */
command: "npm run dev",
url: "http://localhost:4321/",
...
},
});Теперь необходимо написать сам файл, который будет запускать тест. В нашем случае, это browser.test.ts. Он является отправной точкой для создания и отладки тестов с использованием Playwright.
import { test } from "@playwright/test";
test("test browser", async ({ page }) => {
// замените на url вашего локального сервера разработки
await page.goto("http://localhost:4321/");
// нужно для того, чтобы браузер не закрылся после перехода по ссылке ваше
await page.pause();
});После создания теста откройте вкладку Testing (Тестирование). В разделе Playwright (в правом нижнем углу) выберите нужную версию браузера (WebKit или Mobile Safari). Затем нажмите на зеленую иконку запуска теста и дождитесь открытия браузера.
Интерфейс браузера Playwright на примере данного сайта-портфолио. Смогли заметить баг?
Как это проверить
Как убедиться, что эти методы действительно воспроизводят поведение, схожее с Safari? Ответ приведён на последнем изображении.
На нём виден один из характерных багов WebKit — игнорирование параметра mix-blend-mode: difference.
Источники
Опубликовано: 29 дек. 2024 г.