IT-инфраструктура для бизнеса и творчества

Как мы тестируем frontend (html-верстку). Чек-лист

Меня зовут Павел, я со-основатель 100UP (разработка сайтов и рекламное агентство в одном лице). Мы занимаемся дизайном и разработкой технически сложных веб-проектов. В основном это e-commerce и b2b-порталы (личные кабинеты дилеров, производителей и др.).

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

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

Оглавление:

1. Два вида тестирования: ручное и автоматизированное. Автоматизация: юнит-тесты и интеграционные тесты.

2. Чек-лист по тестированию верстки: что в себя включает проверка; проверяемые параметры.

3. В каких браузерах и на каких устройствах мы тестируем.

4. Разработка сайта и тестирование. Схема.

5. Сервисы, которые используются для тестирования верстки сайта.

1. Два вида тестирования: ручное и автоматизированное. Автоматизация: юнит-тесты и интеграционные тесты.

Тестирование верстки сайта осуществляется двумя способами — вручную и с помощью автоматизированных тестов.

Для того, чтобы выполнить ручное тестирование, разработчику и тестировщику необходимо “пройтись” по всем пунктам разработанного заранее чек-листа (представлен в пункте статьи №2).

Преимущество ручного тестирование заключается в его “гибкости” и детальности. Тестировщик может увидеть сценарии, которые не прописаны в скрипте, и тут же протестировать их. Однако есть и существенный минус — приходится все “делать своими руками”, а это значит, что затрачивается значительное количество времени. Сократить время проверки помогает автоматическое тестирование.

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

Самые низкоуровневые (простые) тесты — это юнит-тесты. В широком смысле юнит-тесты — это код, который тестирует юниты (части) кода: функции, модули и классы. В рамках frontend-разработки юнит-тесты — это тесты javascript. Обычно каждый javascript-компонент сайта имеет большое количество мелких юнит-тестов. Каждый такой тест проверяет только одно взаимодействие с тестируемым компонентом.

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

Для написания и воспроизведения юнит-тестов мы используем фреймворк jest. Тесты производятся в виртуальной среде, где взаимодействие с сервером эмулируется.

Кроме юнит-тестов также для автоматического тестирование верстки мы используем приемочные тесты или интеграционные тесты. В интеграционных тестах производится тестирование как и целых компонентов, так и взаимодействие разных компонентов друг с другом. Такие тесты позволяют проверить, как frontend будет вести себя на готовом сайте на CMS-движке. В первую очередь данными тестами проверяется взаимодействие различных javascript-компонентов между собой.

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

Для написания приемочных тестов мы используем Selenium.

Кроме того к автоматическим тестам мы относим мониторинг сайта и логирование javascript-ошибок, найденных при взаимодействии с этим сайтом. На наших сайтах мы логируем javascript-ошибки с помощью Sentry.

2. Чек-лист по тестированию HTML-верстки: что в себя включает проверка; проверяемые параметры.

Данный чек-лист постоянно нами обновляется и каждый его пункт содержит описание, которое мы решили не вставлять в эту статью, так как она была получилась “километровая”. Актуальный чек-лист с комментариями можно посмотреть на нашем сайте.

Мы пришли к тому, что проверяемые параметры можно разделить на несколько групп:

1. Соответствие макету

2. Работа в разных окружениях

3. Проверка на разных разрешениях экрана (проверка десктопной и адаптивных версий)

4. HTML

5. Javascript

6. CSS

7. Фавиконки

8. Шрифты

9. Навигация

10. Заголовки

11. Контент

12. Изображения

13. Ссылки и кнопки

14. Футер

15. Формы

1. Соответствие макету

  • Расхождение макета и верстки в пикселях.
  • Корректный вывод элементов интерфейса в векторном формате.
  • Поддержка retina-мониторов.
  • Наличие элементов, выбивающиеся из цветовой гаммы сайта.
  • Наличие элементов с малой контрастностью.

2. Работа в разных окружениях

  • Кроссбраузерность.
  • Корректная работа на разных устройствах.
  • Корректная работа на разных операционных системах.
  • Корректная работа сайта при различных настройках местоположения пользователя, часового пояса и времени.
  • Корректная работа с разной скоростью интернета.
  • Корректная работа при включенном расширением AdBlock в браузере.
  • Наличие мета-тега <meta http-equiv="X-UA-Compatible" content="IE=edge">.
  • Корректное отображение кнопок, полей ввода, выпадающих списков и радиокнопок на разных устройствах.
  • Корректное отображение сайта с административной панелью CMS.
  • Корректная настройка встраиваемых карт для тач-устройств.
  • Корректное фиксирование хедера при прокрутке.

3. Проверка на разных разрешениях экрана (проверка десктопной и адаптивных версий)

  • Корректное отображение на всех возможных размерах окна браузера.
  • Область нажатия кнопок.
  • Отображение страницы при масштабировании в десктопных браузерах.
  • Корректное отображение страницы при масштабировании в мобильных браузерах.
  • Наличие мета-тега viewport.
  • Корректная прокрутка страницы при открытых попапах.
  • Корректное отображение плавающих (закрепляемых за прокруткой) элементов.
  • Использование чрезмерно большого количества различных брейкпоинтов для стилей.
  • Смешивание различных брейкпоинтов для стилей.
  • Слишком узкие блоки на маленьких разрешениях экрана.
  • Наличие сломанной вёрстки при изменении размеров экрана.
  • Некорректная верстка на мобильных устройствах при показе/скрытии адресной строки.

4. HTML

  • Валидность HTML.
  • Наличие корректного DOCTYPE.
  • Наличие корректной кодировки.
  • Наличие тега title и мета-тегов для SEO.
  • Наличие атрибута lang у тега html.
  • Повторяющиеся или некорректные атрибуты id.
  • Наличие пустых и ненужных тегов.
  • Наличие объёмных комментариев в коде.

5. Javascript

  • Не должно быть ошибок javascript при работе с сайтом.
  • Скрипты должны быть объединены в один файл и минифицированы.
  • Файл скриптов должен подключаться внизу страницы.
  • Использование кода из неподходящей версии javascript.
  • Сторонние скрипты желательно должны иметь атрибуты async и defer.
  • Наличие устаревших javascript-плагинов.
  • Корректное подключение сторонних библиотек.
  • Некорректная работа плагинов.
  • Наличие непереведенного текста в плагинах.
  • Адекватное отображение сайта при выключенном javascript.
  • Наличие кода на “боевом” сайте, предназначенного для разработки на тестовом сервере.
  • Корректная инициализация контентных слайдеров.

6. CSS

  • Валидация CSS.
  • Файлы стилей должны быть корректно подключены.
  • Стили должны быть объединены в один файл и минифицированы.
  • Наличие в файлах стилей лишних правил для не поддерживаемых браузеров.
  • Использование контентных тегов для стилизации.
  • Стилизация элементов по атрибутам name или id.
  • Использование одинаковых цветов, скруглений, отступов, размеров шрифтов.
  • Использование unicode-символов в файлах стилей и скриптов.
  • Артефакты, возникающие при использовании стилей transform.
  • Дергающиеся и некорректно работающие анимации.
  • Разные стили плавности анимации.
  • Корректное отображение сайта с включенным режимом редактирования в CMS.
  • Адекватные отступы между блоками контента.
  • Слишком резкая граница для overflow: hidden.
  • Наличие горизонтальной прокрутки.
  • Большой разброс z-index.

7. Фавиконки

  • Наличие favicon.ico и фавиконки больших размеров.
  • Корректный список подключаемых фавиконок.
  • Наличие manifest.json или manifest.webmanifest.

8. Шрифты

  • Наличие малоиспользуемых или подключение неиспользуемых на сайте шрифтов.
  • Правильное подключение шрифтов.
  • Подключение шрифтов только из локальных источников.
  • Предзагрузка шрифтов.
  • Наличие правила font-display для подключаемых шрифтов.
  • Наличие fallback-шрифтов.
  • Указание наличия или отсутствия засечек при использовании шрифтов.

9. Навигация

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

10. Заголовки

  • Наличие одного тега h1 на странице.
  • Семантичность заголовков (должны идти по порядку).
  • Правильно настроенные стили и соотношение размеров заголовков.
  • Заголовки должны использоваться только в контентной части, например, заголовки страницы.

11. Контент

  • Стили для контентных элементов должны быть прописаны: параграфы, изображения, обычные и нумерованные списки, таблицы.
  • Блоки сайта не должны расползаться при слишком больших размерах содержимого этих блоков.
  • Необходимо тестировать сайт с реалистичными изображениями и текстами.
  • Блоки должны корректно отображаться при любом количестве контента внутри них.
  • Проверка орфографии, в том числе и в самом интерфейсе.
  • Наличие clearfix у контейнеров с элементами со стилями float: left и float: right.
  • Некорректная микроразметка.
  • Корректное отображение валюты.
  • Проверка вместимости длинных названий.
  • Различная высота элементов в слайдерах.

12. Изображения

  • Корректное распределение файлов изображений.
  • Корректное подключение изображений.
  • Наличие файла спрайтов для изображений интерфейса.
  • Корректное подключение файла спрайтов.
  • Корректное центрирование изображений в контейнерах.
  • Некорректное содержимое svg-файлов.
  • Корректные размеры изображений.
  • Корректные стили для изображений.
  • Адаптация изображений под мониторы высокого разрешения.
  • Плохая оптимизация медиа-файлов.
  • Отсутствие ленивой загрузки изображений.
  • Изображения разных пропорций, загруженных в одной галерее.
  • Наличие оптимизации изображений, загружаемых пользователями.
  • Изображение капчи должно центрироваться относительно соседних блоков.

13. Ссылки и кнопки

  • Наличие в ссылках на сторонние сайты атрибута rel="noopener".
  • Выделение интерактивных элементов при наведении и фокусе.
  • Телефоны и электронные почты должны быть прописаны как ссылки.
  • Все нажимаемые области должны иметь cursor: pointer.
  • Наличие атрибутов target=”_blank”.
  • Наличие корректных атрибутов type и role для кнопок и ссылок.
  • Наличие специальных общих классов для кнопок и полей ввода.
  • Стилизация кнопок, полей ввода и чекбоксов без помощи скриптов.
  • Наличие пустых ссылок.
  • Ссылки, ведущие на небезопасные ресурсы.
  • Некорректное поведение кнопок на тач-устройствах.
  • Незастиленные ссылки при наведении.
  • Незастиленные ссылки при фокусе.
  • Наличие неактивных кнопок, на которые можно нажать.

14. Футер

  • Расположение футера, если контента меньше, чем на всю высоту экрана.
  • Наличие фиксированной высоты у футера.
  • Отступы перед футером должны быть одинаковые на всех страницах.
  • Слишком маленький отступ внизу футера.

15. Формы

  • Правильно прописанные заголовки полей (label).
  • Проверка стилей кнопок и полей ввода.
  • Наличие атрибутов для ограничения длины ввода.
  • Наличие масок для полей ввода.
  • Клиентская валидация полей ввода.
  • Корректные атрибуты type у полей ввода.
  • Корректная работа с русскими и английскими текстами при заполнении.
  • Изменение размеров textarea не должно ломать верстку.
  • Различные стили элементов форм в разных браузерах и устройствах.
  • Наличие уведомления после отправления формы.
  • Корректный вид уведомлений.
  • Наличие клиентской валидации.
  • Корректный сброс формы после отправки.
  • Проверка отправки формы по нажатию Enter.
  • Корректная работа форм при нажатию кнопки “Назад” в браузере.
  • Некорректная повторная отправка форм.
  • Слишком высокие формы в мобильных браузерах.

3. В каких браузерах и на каких устройствах необходимо тестировать сайт.

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

Список браузеров и тестируемых устройств обязательно должен быть согласован между Исполнителем и Заказчиком перед началом разработки сайта.

В первую очередь мы тестируем сайт по всем пунктам чек-листа в браузере Chrome, так как этот браузер используется у разработчиков как основной. Затем тестируем сайт в остальный браузерах (последние стабильные версии):

Десктопные браузеры:

  • Chrome
  • Safari
  • Firefox
  • Edge
  • Internet Explorer 11

Браузеры Yandex и Opera сделаны на движке браузера Chrome, поэтому на них отдельно мы не тестируем.

Мобильные браузеры:

  • Safari
  • Chrome

Все десктопные браузеры тестируем на операционной системе Windows, кроме Safari, который тестируем на MacOS.

Тестирование именно в этих браузерах связано с популярностью их использования. По статистике, самым популярным браузером является Chrome.

По данным на январь 2021 года по России статистика следующая:

  • Chrome 62,79%
  • Yandex 12,53%
  • Safari 9,68%
  • Opera 5,86%
  • Firefox 4,51%
  • Edge 1,24%

Для определения популярности браузеров существует множество сайтов, которые предоставляют актуальную статистику. Мы используем данные, представленные на сайте https://gs.statcounter.com/, они обновляются каждый месяц.

Верстку сайта мы проверяем на следующих устройствах:

  • iMac 27″
  • Macbook 15″
  • ПК 22″
  • ноутбук с помощью тачпада
  • iPhone 5
  • iPhone 11
  • Samsung Galaxy 20
  • Xiaomi 9
  • Huawei P40
  • Realme 6
  • Google Pixel 4

4. Разработка сайта и тестирование. Схема

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

Схему в хорошем качестве можно посмотреть тут

Front-end

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

Итерация №1

Проходим классический путь: html-верстка всех необходимых страниц, тестирование и сразу исправление ошибок за собой. Это все делает один и тот же frontend-разработчик.

Итерация №2

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

Итерация №3

Тестировщик №3 проверяет сайт по чек-листу, а также дополнительно имитирует возможные ситуации по разным user-кейсам, выписывает ошибки, после чего передает на доработку исходному frontend-разработчику. Разработчик вносит корректировки.

Backend

Backend-разработчик интегрируют html-верстку в CMS. Сайт наполняется реальным контентом.

Итерация №4

Тестировщик “проходится” по чек-листу и проверяет сайт на ошибки. Если ошибки найдены, они передаются исходному frontend-разработчику. Frontend-разработчик вносит изменения в код. Затем тестировщик проверяет выполненную работу разработчика, снова “прогоняя” сайт по чек-листу. Если ошибок больше не обнаружено — сайт “выливают” на бой.

Если ошибки обнаружены, они передаются frontend-разработчику и снова вносятся правки. Действие повторяется, пока ошибок больше не будет обнаружено.

5. Сервисы, которые используются нами при тестировании html-верстки

Сервисы для проверки сайта на разных разрешениях экрана и разных устройствах:

  • iloveadaptive — уникальный сервис по разработке и тестированию адаптивной HTML-верcтки под все устройства.
  • BrowserStack и lambdatest — SAAS-платформа для тестирования frontend на эмуляторах реальных устройств, запущенных в виртуальной машине сервиса.

Сервисы для валидации:

  • W3C validator — проверка соответствия HTML-кода страниц сайта и CSS-кода на корректность.
  • Яндекс.Вебмастер “Валидатор микроразметки” — позволяет проверить семантическую разметку, внедренную на вашем сайте, и убедиться в том, что роботы поисковых систем смогут извлечь структурированные данные.
  • PerfectPixel — расширение для Chrome, позволяющий накладывать изображение макета поверх сайта, таким образом можно сравнить приближенность верстки к макету.

Сервисы, помогающие понять, как оптимизировать сайт:

  • Google Speed — комплексный инструмент для определения производительности, удобства и выбора эффективных путей оптимизации сайта.
  • Think with google — проверяет удобство просмотра на мобильных устройствах, а также скорость работы страницы на мобильных и настольных устройствах.
  • Яндекс.Вебвизор — анализ поведения пользователей на сайте.

Сервисы для написания автоматизированных тестов:

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

Сайты, показывающие работоспособность различных технологий в браузерах:

  • CanIUse — инструмент, благодаря которому можно узнать в каких десктопных и мобильных браузерах поддерживаются различные веб-стандарты.
  • Kangax.github.io — таблица работоспособности различных функций javascript на разных движках и в разных браузерах.

SЕО-инструменты, проверка некорректных ссылок:

  • Screaming Frog — SEO-инструмент, который позволяет находить некорректные и битые ссылки на сайте.
  • Xenu 2 — бесплатная альтернатива предыдущему сервису, он проще устроен, но менее функционален.
  • Check My Links — расширение для браузера Chrome, позволяет проверить текущую страницу на наличие “битых” или неправильных ссылок.

Инструменты для минификации и оптимизации ресурсов:

  • Terser — библиотека для минификации скриптов.
  • Compressor.io, Image Compressor, TinyPNG — сервисы для сжатия изображений с возможностью детальной настройки степени сжатия.

По всем вопросам можно писать сюда facebook.com/geonim или моя почта sto@100up.ru.

(function () { let cdnUrl = `https://specialsf378ef5-a.akamaihd.net/SelectelBranding/images/` let previousArticleNumber = null let currentArticleNumber = 0 let platform = 'Desktop' let articles = [ { name: 'camera', url: `${cdnUrl}CameraCat`, text: 'умную камеру для\u00A0наблюдения за\u00A0котиками', link: 'https://vc.ru/selectel/306690', num: 3 }, { name: 'chill', url: `${cdnUrl}ChillCat`, text: 'трекер, который подскажет, когда пора отдохнуть', link: 'https://vc.ru/promo/288561-eye-tracker', num: 1 }, { name: 'cloud', url: `${cdnUrl}CloudCat`, text: 'котика: даёшь ему «пять», а\u00A0он делает бэкап в облако', link: 'https://vc.ru/dev/294799-maneki-neko', num: 2 } ] let buttonCycle = document.querySelector('.button--cycle') let buttonChoose = document.querySelector('.button--choose') let buttonMobile = document.querySelector('.button--mobile') let textField = document.querySelector('.selectel-footer-subtitle') let imageAgent = document.querySelector('.image--agent') let banner = document.querySelector('.selectel-footer') buttonCycle.addEventListener('click', cycleClick) buttonChoose.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) buttonMobile.addEventListener('click', () => sendEvent(`Promo ${articles[currentArticleNumber].num} Left`, 'Click')) let media = window.matchMedia("(max-width: 570px)") media.addEventListener('change', matchMedia) function matchMedia() { if (media.matches) { platform = 'Mobile' } else { platform = 'Desktop' } update() } matchMedia() function cycleClick(event) { sendEvent(`Promo ${articles[currentArticleNumber].num} Right`, 'Click') if (event) { event.preventDefault() event.stopPropagation() } window.open('https://vc.ru/tag/selectelDIY', '_blank') //cycle(event) } function cycle(event) { // incrementArticleNumber() textField.innerHTML = generatedText() imageAgent.src = articles[currentArticleNumber].url + platform + '.svg?3' imageAgent.setAttribute("class", "") imageAgent.classList.add('image--agent', articles[currentArticleNumber].name) banner.href = articles[currentArticleNumber].link } function update() { banner.href = articles[currentArticleNumber].link imageAgent.src = articles[currentArticleNumber].url + platform + '.svg' textField.innerHTML = generatedText() } function incrementArticleNumber() { previousArticleNumber = currentArticleNumber if (currentArticleNumber >= articles.length - 1) { currentArticleNumber = 0 } else { currentArticleNumber++ } } const sendEvent = (label, action = 'Click') => { const value = `SelectelDIY — loc: Footer — ${label} — ${action}`; if (window.dataLayer !== undefined) { window.dataLayer.push({ event: 'data_event', data_description: value, }); } }; function generatedText() { let defaultText if (platform === 'Desktop') { defaultText = `Мы тут собрали %text%. Хотите научим?` } else { defaultText = `Мы тут собрали %text%.` } return defaultText.replace('%text%', articles[currentArticleNumber].text) } function getRandom(min, max) { min = Math.ceil(min) max = Math.floor(max) return Math.floor(Math.random() * (max - min + 1)) + min } (function create() { currentArticleNumber = getRandom(0, articles.length - 1) cycle() let page = document.querySelector('.page--entry') if (page) { function insertAfter() { let parents = page.querySelectorAll('[data-id="7"]') let referenceNode = parents[0] referenceNode.parentNode.insertBefore(banner, referenceNode.nextSibling); loaded() } setTimeout(() => insertAfter(), 0) } }()) function loaded() { banner.classList.add('loaded') } loadImages([ `${cdnUrl}CameraCatDesktop.svg`, `${cdnUrl}ChillCatDesktop.svg`, `${cdnUrl}CloudCatDesktop.svg`, `${cdnUrl}CameraCatMobile.svg`, `${cdnUrl}ChillCatMobile.svg`, `${cdnUrl}CloudCatMobile.svg?3`, ]) function loadImages(urls) { return Promise.all(urls.map(function (url) { return new Promise(function (resolve) { var img = document.createElement('img'); img.onload = resolve; img.onerror = resolve; img.src = url; }); })); } }())
0
10 комментариев
Популярные
По порядку
Написать комментарий...

Десктопные браузеры где Тимур и его команда тестируют , ...Edge. "Браузеры Yandex и Opera сделаны на движке браузера Chrome, поэтому на них отдельно мы не тестируем." лол 😂 

1

Что не так? :) рассказывайте скорей, мы дополним статью.

0

Почитайте на досуге, что за движок у хрома, яндекса, оперы, эйдж много нового узнаете лол

0

Возможно вы невнимательно прочитали фразу «Браузеры Yandex и Opera сделаны на движке браузера Chrome».
Мы не говорим о том, что Яндекс и Опера сделаны на основе Хрома. Смысл в том, что эти браузеры сделаны на том же движке, что и сам Хром. Сам движок называется Blink.

А вы о чем?

0

Спасибо капитан, движок блинк в основе всех этих браузеров. Как вы путем не хитрых умозаключений смогли установить. А теперь когда все устаканилось в голове. Скажите как много смысла тестировать Edge Chrome браузеры и не тестировать Opera и Яндекс браузер? ведь по вашим словам в основе один движок?)) просто уморительная беседа) Может вам стоит тестировать тогда только лишь хром если брать ваши логические умозаключения?

0

Все круто, но...

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

Спасибо за статью, пополню набор инструментов!

0

Спасибо за обратную связь)

0

Роман, все легко и просто)))
Так как разработкой Edge занимается Microsoft, а репутация их браузеров так сказать не очень, то этот браузер мы держим на особом контроле.

Если вы разработчик и есть опыт разработки верстки, то было бы круто, если вы бы поделились информацией как тестируете и какие сервисы используете.

0

Не самый профессиональный ответ. Общеизвестный факт что под капотом edge тоже самое что и у всех популярных браузеров кроме мозилы, этот браузер не имеет ничего общего с ie11 аналогии здесь неуместны. Могу сказать что работая в сбере. У нас есть отдельный пункт в поддержке ие 11 и отдельного тестирования по от других браузеров. А разделение на "хром и эйдж мы тестируем а оперу и яндекс нет" учитывая вышеперечисленные аргументы не имеет смысла. Это просто бесполезная работа. Эйдж это отличный браузер, Microsoft сейчас делает многое для развития веба напомню что именно Microsoft мы все обязаны typescript и его решению проблемы с типизпцией в javascript. 

0

В чём смысл использовать для минимизации Terser, а не webpack? ред.

0
Читать все 10 комментариев
Первые владельцы новых MacBook Pro рассказали, что «чёлка» иногда закрывает часть меню в приложениях Статьи редакции

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

SHAREit объявляет о партнерстве с Httpool для расширения присутствия в России и СНГ

SHAREit Group анонсировала выход на российский рынок цифровой рекламы. Глобальная компания в сфере интернет-технологий, выбрала Httpool, входящую в Aleph Group, своим стратегическим партнером по продажам рекламы. Будучи официальным представителем SHAREit, Httpool займется продвижением рекламных возможностей приложения для брендов и агентств из…

«Повышение ключевой ставки не оказало измеримого эффекта на динамику российского рынка акций»

Виталий Исаков, директор по инвестициям УК «Открытие»

Десять лет спустя: каким видели будущее программирования в 2012 году Статьи редакции

Пользователи Hacker News сравнили предсказания программистов девятилетней давности с текущим положением дел.

ITC.ua
Цифровой госпиталь и медицина на 360°: как мы обновили сайт частной клиники №1 в России

Иногда больницы у русского человека вызывают недоумение и страх: процедурный кабинет, где пахнет лекарствами и не только, представили? Но зачастую это наши страхи из детства и юношества суровых 90-х, потому что сейчас всё иначе.

Сайт для АО «Европейский Медицинский Центр» (ЕМС)
Мы сделали машину, которая генерирует рекламные креативы

И запустили кампанию, в которой автоматически сгенерированные креативы продвигают продукт для автоматической генерации креативов.

История одного издательства: как я, будучи инженером-нефтяником, начал выпускать трогательные книги для детей

Всем привет! Меня зовут Александр Шмаков, я исполнительный директор типографии «НП-ПРИНТ» и основатель санкт-петербургского книжного издательства «Гудвин».

Купил квартиру под офис компании

Меня зовут Евгений, сейчас моя компания занимается разработкой экологического стартапа и разработкой проектной документации по экологии с 2012 года. Тогда мне было 23 года, все это время мы платили за аренду и были привязаны к условиям и ограничениям. В 2021 году мы с женой купили квартиру площадью 70 м2 на первом этаже жилого дома и разместили…

Чем занимается BIM-менеджер и как им стать?

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

Linkedin запустил маркетплейс для поиска и заказа услуг фрилансеров — за время тестов он собрал 2 млн пользователей Статьи редакции

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

Цифровой акселератор СИБУРа: feedback от участников

СИБУР, крупнейшая в России интегрированная нефтехимическая компания, и GenerationS, платформа по развитию корпоративных инноваций, подвели итоги первого цифрового акселератора.

null