Тестирование совместимости Safari 2026: сайт на Mac

Тестирование совместимости Safari 2026 нельзя заменять изменением ширины окна в Chrome. Для приёмки зарубежного сайта сначала пройдите основной торговый маршрут в настольном Safari на реальном Mac, затем расширьте покрытие через Responsive Design Mode и Simulator, а важные страницы дополнительно проверьте на настоящем iPhone.

Статья пригодится:

• операторам Shopify и самописных магазинов, которые работают в основном на Windows;
• командам, проверяющим лендинги, корзину и оплату перед запуском;
• руководителям проектов, которым нужен повторяемый процесс Safari-регрессии;
• техническим специалистам, получающим от бизнеса неясное сообщение «в Safari не работает».

[ SECTION_01 ] Приёмка начинается с торгового маршрута, а не со скриншота

Типичный сбой выглядит так: в Chrome страница товара открывается, кнопка покупки реагирует, форма заказа заполняется. В Safari визуально всё кажется почти таким же, но после выбора доставки кнопка «Перейти к оплате» ничего не делает. Иногда проблема проявляется только после возврата со страницы платёжного провайдера.

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

1. Открытие рекламного лендинга.
2. Переход на карточку товара.
3. Выбор варианта, количества или подписки.
4. Регистрация либо вход в аккаунт.
5. Ввод имени, адреса, телефона и платёжных данных.
6. Применение промокода.
7. Выбор доставки и налогового режима.
8. Переход к оплате.
9. Возврат на страницу подтверждения.
10. Повторное открытие заказа в личном кабинете.

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

Критичность дефекта лучше определять заранее:

• Блокирующий — невозможно открыть страницу, выбрать товар, отправить форму, оплатить заказ или увидеть подтверждение.
• Критичный для конверсии — промокод не применяется, не работает автозаполнение, теряется выбранная доставка, окно согласия перекрывает кнопку.
• Средний — часть регионального текста скрыта, изображение обрезается, выпадающий список неудобен, но заказ можно завершить.
• Низкий — небольшое отличие от Chrome в отступах, переносе текста или анимации без влияния на действие пользователя.

Такой разбор защищает команду от двух ошибок. Первая — выпустить сайт с неработающей оплатой под видом «небольшой браузерной разницы». Вторая — задержать запуск из-за косметического отличия, которое не мешает покупке.

[ SECTION_02 ] Матрица Safari: что проверять на каждом уровне

Тестирование нужно разделить на несколько уровней. Они не равнозначны по доказательной силе.

Настольный Safari на реальном Mac

Это основной уровень для зарубежного сайта. Здесь проверяется реальное выполнение JavaScript, работа cookies, локального хранилища, всплывающих окон, сторонних скриптов и платёжного перехода в macOS-среде.

Если команда использует только Windows, можно организовать доступ к удалённому Mac для проверки зарубежного сайта. Важно, чтобы оператор мог работать не только с картинкой экрана, но и с браузером, вкладками, настройками Safari и инструментами разработчика.

Responsive Design Mode

Responsive Design Mode предназначен для быстрой проверки медиазапросов, ширины, высоты и плотности пикселей. Apple указывает, что режим позволяет менять размеры окна и оценивать, как страница реагирует на различные параметры экрана. Его можно открыть через меню Develop, а вместе с ним использовать Web Inspector. (developer.apple.com)

Это хороший инструмент для поиска:

• горизонтальной прокрутки;
• обрезанного текста;
• слишком широких таблиц;
• неправильного переноса кнопок;
• проблем с фиксированной панелью покупки;
• отличий при высокой плотности пикселей.

Но это всё ещё предварительный просмотр. Если дефект связан с жестом, клавиатурой, системным диалогом, поведением мобильного viewport или физическим вводом, его нужно подтвердить в Simulator или на реальном устройстве.

Simulator

Simulator расширяет покрытие без физического iPhone. Apple описывает сценарий, при котором в выбранной среде Simulator запускается Safari, после чего в нём открывается тестируемое веб-приложение. (developer.apple.com)

В актуальной документации Apple также указано, что запущенные симуляторы видны в меню Develop и поддерживают инспекцию через Web Inspector. (developer.apple.com)

Simulator полезен для проверки:

• мобильной ширины страницы;
• поведения вертикальной и горизонтальной ориентации;
• мобильной навигации;
• открытия Safari внутри выбранной среды;
• инспекции DOM, ошибок и сетевых запросов;
• переходов между страницами.

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

Физическое устройство

Настоящий iPhone нужен не для каждой страницы. Его стоит подключать выборочно:

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

Apple поддерживает инспекцию веб-страниц на подключённых устройствах через Develop и Web Inspector. На iPhone сначала включается Web Inspector в настройках Safari, после чего устройство подключается к Mac. (developer.apple.com)

[ SECTION_03 ] Визуальные метрики для лендинга и каталога

Проверяйте не только «похожесть» скриншотов. Для бизнеса важнее, может ли посетитель понять предложение и выполнить следующее действие.

Навигация и первый экран

Зафиксируйте:

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

Для каждого теста используйте одинаковое состояние страницы. Новый посетитель, вернувшийся пользователь и авторизованный клиент могут получить разный контент из-за cookies, локального хранилища или серверной логики.

Изображения и шрифты

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

Отдельно смотрите на:

• размытые изображения при высокой плотности пикселей;
• скачок макета после загрузки шрифта;
• исчезновение иконок;
• обрезку фотографий в контейнере;
• неправильное соотношение сторон видео;
• наложение текста на изображение.

Мобильная ориентация

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

Сделайте снимок экрана до исправления и после исправления. Один снимок без URL, размера окна и состояния аккаунта плохо подходит для регрессии.

[ SECTION_04 ] Формы, авторизация и оплата

Форма заказа должна тестироваться как последовательность состояний, а не как набор полей.

Поля и ввод

Проверьте:

• переход фокуса между полями;
• маску телефона;
• формат даты;
• автозаполнение имени и адреса;
• вставку текста из буфера;
• отображение ошибки после отправки;
• сохранение введённых данных после возврата;
• переключение языка и валюты;
• появление системного разрешения;
• загрузку файла, если она используется.

Особое внимание уделите полям, которые выглядят активными, но не принимают ввод. В Safari такой дефект может быть связан с перекрывающим слоем, обработчиком событий, неверным атрибутом формы или ошибкой стороннего виджета.

Apple отдельно документирует проверку и отладку веб-содержимого через Web Inspector, включая DOM, JavaScript, сетевую активность и хранилища страницы. (developer.apple.com)

Полный чек-аут

Повторите маршрут в трёх состояниях:

1. Новый посетитель без cookies.
2. Вернувшийся посетитель с сохранённой сессией.
3. Авторизованный пользователь с историей заказа.

На каждом проходе фиксируйте:

• адрес страницы;
• состояние аккаунта;
• регион и валюту;
• выбранный товар;
• применённый промокод;
• выбранную доставку;
• способ перехода к оплате;
• результат после возврата.

Если Shopify-магазин или самописная корзина не открывается в Safari, не начинайте с общего вывода «браузер не поддерживается». Сначала проверьте, загружается ли основной документ, затем ошибки JavaScript, запросы API, cookies и сторонние компоненты.

[ SECTION_05 ] Региональный контент нельзя сводить только к IP

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

• выбранный регион на самом сайте;
• язык браузера;
• профиль пользователя;
• cookies;
• локальное хранилище;
• данные аккаунта;
• сетевой выход;
• серверная геолокация;
• правила CDN или платёжного провайдера.

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

• новый посетитель из США;
• новый посетитель из целевого региона;
• повторный посетитель с уже выбранной валютой;
• авторизованный клиент;
• посетитель после очистки cookies.

Удалённый Mac с зарубежным сетевым выходом может помочь воспроизвести часть регионального сценария. Он не доказывает, что все пользователи конкретной страны увидят одинаковую страницу. Нельзя по одному IP гарантировать результат платформенной проверки, безопасность аккаунта или отсутствие антифрод-ограничений.

Для команд, которым нужен отдельный региональный узел, можно заранее сравнить варианты подключения Mac в регионе US East и выбрать среду под конкретный тестовый маршрут.

[ SECTION_06 ] Web Inspector превращает жалобу в доказательство

Web Inspector нужен не только разработчику. Оператору достаточно собрать факты, по которым инженер сможет быстро воспроизвести проблему.

В Safari включите функции для веб-разработчиков: Safari → Settings → Advanced → Show features for web developers. Apple указывает, что после этого становятся доступны Develop, Web Inspector и WebDriver. (developer.apple.com)

Для настольной страницы Web Inspector открывается через Develop → Show Web Inspector или сочетанием Option-Command-I. (developer.apple.com)

Что смотреть в Console

Зафиксируйте:

• красные сообщения JavaScript;
• ошибки загрузки скриптов;
• сообщения о блокировке ресурса;
• ошибки обработки события кнопки;
• сбои стороннего виджета;
• повторяющиеся предупреждения, возникающие именно перед дефектом.

Не нужно копировать весь экран. Сохраните сообщение, URL страницы и действие, после которого оно появилось.

Что смотреть в Network

Вкладка Network показывает запросы страницы, их статусы, время и детали ответа. Это позволяет отделить ошибку интерфейса от проблемы API или внешнего сервиса. (webkit.org)

В момент сбоя проверьте:

• запрос корзины;
• запрос расчёта доставки;
• запрос промокода;
• запрос создания заказа;
• ответ платёжного шлюза;
• загрузку скрипта CAPTCHA;
• запросы аналитики, если из-за них ломается основной сценарий;
• наличие cookies и корректность перенаправления.

Что собрать для отчёта

Каждая запись должна содержать:

• страницу;
• браузер и среду;
• региональный профиль;
• состояние пользователя;
• шаг воспроизведения;
• ожидаемый результат;
• фактический результат;
• скриншот или запись экрана;
• ключевой запрос или сообщение Console;
• ответственного;
• статус повторной проверки.

Запись «Safari не работает» непригодна для передачи подрядчику. Запись «после выбора доставки в новом сеансе Safari кнопка оплаты остаётся неактивной, запрос создания заказа не отправляется, ошибка воспроизводится два раза» уже задаёт рабочую гипотезу.

[ SECTION_07 ] Пошаговая схема приёмки перед публикацией

1. Соберите маршрут. Выпишите реальные страницы: рекламный вход, товар, корзина, регистрация, доставка, оплата и результат.
2. Зафиксируйте критерии. Определите, какие ошибки блокируют запуск, а какие попадают в очередь исправлений.
3. Подготовьте состояния. Создайте новый сеанс, повторный визит и авторизованный профиль. Не смешивайте их в одном браузерном окне.
4. Проверьте настольный Safari. Пройдите весь маршрут на реальном Mac с чистым сеансом и затем с сохранёнными данными.
5. Включите Responsive Design Mode. Проверьте ширину, высоту, плотность пикселей, горизонтальную прокрутку и фиксированные элементы.
6. Откройте Simulator. Проверьте мобильную навигацию, ориентацию, форму заказа и возврат после оплаты.
7. Соберите данные Web Inspector. При сбое сохраните Console, Network, URL и точный шаг.
8. Проверьте региональные правила. Сравните язык, валюту, налог, доставку и доступность товара в отдельных состояниях.
9. Передайте отчёт. Назначьте ответственных и зафиксируйте ожидаемый срок исправления.
10. Повторите только изменённый маршрут. После исправления снова пройдите весь затронутый сценарий, а не только место, где была ошибка.

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

[ SECTION_08 ] Условия выбора среды для проверки

Используйте следующий разветвлённый алгоритм:

• Если нужно проверить только CSS, медиазапросы и ширину блоков, выбирайте Responsive Design Mode.
• Если нужно проверить мобильную навигацию и Safari в среде iOS, добавляйте Simulator.
• Если в сценарии есть жесты, камера, клавиатура, разрешения или загрузка файла, переходите к физическому iPhone.
• Если нужно проверить cookies, оплату, сторонние скрипты и рабочий кабинет, начинайте с реального Mac и настольного Safari.
• Если команда работает на Windows и не может повторить проблему, используйте удалённый Mac с доступом к Safari и Web Inspector.
• Если ошибка зависит от региона, создавайте отдельный профиль состояния и используйте зарубежный сетевой выход только как один из факторов проверки.
• Если дефект не повторяется, не закрывайте задачу сразу: повторите маршрут после очистки кэша, в новом сеансе и с тем же аккаунтом.

Такой подход не пытается заменить все устройства одним инструментом. Он распределяет тесты по доказательной силе и стоимости повторения.

[ SECTION_09 ] Что должно попасть в итоговый отчёт

Перед разрешением публикации у команды должен быть один файл или рабочая таблица с одинаковыми полями:

• URL;
• тип страницы;
• среда тестирования;
• регион;
• состояние пользователя;
• проверяемая функция;
• результат;
• серьёзность;
• шаги воспроизведения;
• ожидаемое поведение;
• фактическое поведение;
• ссылка на скриншот или запись;
• ответственный;
• дата исправления;
• результат повторной проверки.

В поле «результат» используйте только понятные значения: «пройдено», «не пройдено», «не применимо», «ожидает повторной проверки». Не смешивайте визуальные замечания и ошибки оплаты в одну категорию.

Сравнение среды и силы доказательства

Среда	Что проверяет лучше всего	Ограничение	Когда достаточно
Safari на реальном Mac	Работу сайта в macOS, формы, cookies, оплату и Web Inspector	Не показывает физические особенности iPhone	Для основного настольного маршрута
Responsive Design Mode	Медиазапросы, размеры, плотность пикселей и адаптивную вёрстку	Не заменяет мобильное устройство	Для быстрой проверки layout
Simulator	Мобильный Safari, ориентацию и часть взаимодействий	Не воспроизводит все свойства физического устройства	Для расширения покрытия перед релизом
Реальный iPhone	Жесты, сенсоры, клавиатуру, разрешения и фактический ввод	Требует отдельного устройства и подключения	Для критических страниц и финальной выборки

Если ошибка в основном торговом маршруте блокирует выбор товара, отправку формы, оплату или подтверждение заказа, запуск нужно остановить. Незначительное отличие в отступах можно зарегистрировать отдельно, если оно не мешает покупке и не скрывает важную информацию.

[ SECTION_10 ] Частые вопросы

Как проверить совместимость Safari с зарубежным интернет-магазином?

Начните не с главной страницы, а с полного пользовательского маршрута: открытие лендинга, выбор товара, регистрация, ввод адреса, применение скидки, переход к оплате и возврат на страницу результата. Сначала пройдите маршрут в настольном Safari на реальном Mac, затем проверьте мобильные размеры, Simulator и отдельные устройства.

Можно ли протестировать Safari без собственного Mac?

Да, если получить доступ к удалённому реальному Mac. Такой вариант подходит для проверки настольного Safari, Web Inspector, cookies, локального хранилища и поведения страницы. Однако удалённый Mac не заменяет физический iPhone: для жестов, клавиатуры, камеры и особенностей мобильного ввода понадобится Simulator или выборочная проверка на настоящем устройстве.

Заменяет ли режим адаптивного дизайна Safari проверку на iPhone?

Нет. Режим адаптивного дизайна помогает быстро проверить медиазапросы, ширину окна, высоту и плотность пикселей. Apple рекомендует открывать страницу в Simulator для более точного предварительного просмотра. Но симулятор и адаптивный режим не полностью воспроизводят физические жесты, сенсоры, клавиатуру и сетевые условия настоящего iPhone.

Что делать, если магазин на Shopify не открывается в Safari?

Сначала очистите кэш и повторите проверку в новом сеансе. Затем откройте Web Inspector и проверьте Console и Network: ищите ошибки JavaScript, заблокированные запросы, неудачные ответы API, проблемы cookies и загрузки сторонних платёжных компонентов. Зафиксируйте URL, время, состояние аккаунта и конкретный шаг сбоя.

Какие функции Safari нужно проверить перед запуском сайта?

Минимальный набор включает адаптивную вёрстку, меню, изображения, всплывающие окна, формы, автозаполнение, выбор даты, загрузку файлов, CAPTCHA, авторизацию, скидочный код, корзину, переход к оплате, возврат после оплаты, cookies, региональный контент и повторный вход. Критический маршрут нужно проверить повторно после исправлений.

Для команды, которая регулярно принимает зарубежные лендинги и интернет-магазины, Chrome в Windows остаётся полезным браузером для общего контроля, но не заменяет Safari. Проверка через случайный удалённый экран или только через изменение размера окна плохо подходит для диагностики: не хватает реальной macOS-среды, Web Inspector, устойчивого состояния сессии и повторяемого доступа для нескольких участников. Если нужен временный Mac для совместной приёмки, можно рассмотреть аренду Mac с американским сетевым выходом, а затем прогнать именно тот чек-лист, который описан выше. Это рациональнее, чем выпускать сайт с незамеченным сбоем в оплате или покупать отдельный компьютер для короткого проекта.

Частые вопросы

Как проверить совместимость Safari с зарубежным интернет-магазином?

Начните не с главной страницы, а с полного пользовательского маршрута: открытие лендинга, выбор товара, регистрация, ввод адреса, применение скидки, переход к оплате и возврат на страницу результата. Сначала пройдите маршрут в настольном Safari на реальном Mac, затем проверьте мобильные размеры, симулятор и отдельные устройства.

Можно ли протестировать Safari без собственного Mac?

Да, если получить доступ к удалённому реальному Mac. Такой вариант подходит для проверки настольного Safari, Web Inspector, cookies, локального хранилища и реального поведения страницы. Однако удалённый Mac не заменяет физический iPhone: для жестов, клавиатуры, камеры и особенностей мобильного ввода понадобится симулятор или выборочная проверка на настоящем устройстве.

Заменяет ли режим адаптивного дизайна Safari проверку на iPhone?

Нет. Режим адаптивного дизайна помогает быстро проверить медиазапросы, ширину окна, высоту и плотность пикселей. Apple отдельно рекомендует открывать страницу в Simulator для более точного предварительного просмотра. Но симулятор и адаптивный режим не полностью воспроизводят физические жесты, сенсоры, клавиатуру и сетевые условия настоящего iPhone.

Что делать, если магазин на Shopify не открывается в Safari?

Сначала очистите кэш и повторите проверку в новом сеансе. Затем откройте Web Inspector и проверьте Console и Network: ищите ошибки JavaScript, заблокированные запросы, неудачные ответы API, проблемы cookies и загрузки сторонних платёжных компонентов. Зафиксируйте URL, время, состояние аккаунта и конкретный шаг, на котором произошёл сбой.

Какие функции Safari нужно проверить перед запуском сайта?

Минимальный набор включает адаптивную вёрстку, меню, изображения, всплывающие окна, формы, автозаполнение, выбор даты, загрузку файлов, CAPTCHA, авторизацию, скидочный код, корзину, переход к оплате, возврат после оплаты, cookies, региональный контент и повторный вход. Для критического маршрута нужна повторная проверка после исправлений.