Панель автоматически проверяет файл на наличие ошибок верстки

Normal — Preview

В режиме High Quality Display видно, что изображение качественное

Совместимость с Acrobat 4 (PDF 1.3) по требованиям типографии и ZIP сжатие для изображений.
Использовать блиды установленные в макетах.
Экспортировать изображения в нужном цветовом профиле (эту настройку ставлю на всякий случай, все изображения я готовлю заранее).
Использовать пресет High Resolution для прозрачных объектов.

Тут видим, что ошибок нет, шрифты в порядке, изображения тоже в порядке

Как проверить CSS и HTML-код на валидность и зачем это нужно.

Верстку сайта нужно проверять по нескольким направлениям:

1. Наличие ошибок в верстке.
2. Валидность верстки сайта.
3. Кроссбраузерность верстки (корректное отображение сайта в различных браузерах).
4. Адаптивность под разные размеры экрана (мобильная версия сайта).
5. Кроссплатформенность верстки

Обо всем по порядку.

Наличие ошибок в верстке сайта

Самое простое и быстрое, что Вы можете сделать для проверки, посмотреть ошибки верстки прямо в браузере. Нажмите клавишу F12, откроется панель разработчика.

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

Валидность верстки сайта

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

Иногда не получится исправить абсолютно все ошибки, указанные валидатором validator.w3.org, так как некоторые могут присутствовать в подключаемых сторонних плагинах. Но нужно стараться свести ошибки к минимуму.

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

Кроссбраузерность верстки сайта

Кроссбраузерность сайта — это его корректное отображение во всех популярных интернет-браузерах:

• Google Chrome
• Yandex-browser
• Mozilla Firefox
• Safari
• Inernet Explorer
• Opera

Для проверки кроссбраузерности сразу в нескольких браузерах и различных их версиях существуют специальные сервисы.

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

Адаптивность верстки сайта

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

Быстро проверить адаптивность можно так: просто постепенно уменьшайте браузер по ширине. Вы увидите, как перестраиваются блоки сайта. Чтобы видеть, какие в данный момент размеры окна, нажмите клавишу F12, и после этого меняйте размеры браузера.

Еще один способ прямо в барузере. Нажмите клавишу F12, и в открывшейся панели слева нажмите кнопку   . После этого Вы сможете менять размеры как мышкой, так и задавать цифрами.

Ну, а самый эффективный и точный способ — тестирование верстки на мобильном устройстве.

Кроссплатформенность верстки сайта

Кроссплатформенность сайта — это корректное отображение сайта на разных операционных системах (Windows, IOS, Android). В принципе, после тщательной проверки на кроссбраузерность и адаптивность, желательно проверить отображение сайта на iPhone и iPad. На этом достаточно.

Задавайте вопросы по верстка в комментариях.

Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.

Возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.

Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools

Посмотреть, как выглядит страница с телефона и планшета

При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:

Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.

На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.

Быстро изменить стили прямо на странице

В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.

Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.

После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.

В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover, :active, :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.

Протестировать блоки на переполнение

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

Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.

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

Как проверить элемент на переполнение текстом

Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:

Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.

Переполнение родительских блоков

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

Узнать, какие файлы подключены, и посмотреть их расположение

Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:

Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S  для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.

Меняем цвет фона во вкладке Sources

Понять, почему не работают скрипты

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

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

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

Как использовать точки останова

Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.

Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.

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

Для чего они нужны, пойдем по порядку:

Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.

Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.

Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.

Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.

Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.

Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.

Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.

Проверить качество сайта

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

Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.

Как использовать Lighthouse

Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.

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

Запускаем Lighthouse

Получаем результаты

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

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

При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».

Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов». Создайте свой проект под руководством наставника, оптимизируйте его производительность и научитесь отладке кода с помощью инструментов разработчика.

<header>
  <ul>
    <div>
      <a href="#">Ссылка на главную</a>
    </div>
  </ul>
</header>
<main>
  <h1>Заголовок страницы</h1>
  <p>Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты.<p>
</main>
<footer>
  <a href="#" class="logo">
    <img src="picture.jpg">
  </a>
</footer>

Школа дронов для всех
Учим программировать беспилотники и управлять ими.
Узнать больше

Поговорим о том, что такое валидация кода, зачем она вам нужна и как ее правильно выполнить. 

Сразу отмечу, что в этом материале под валидацией кода понимается более широкое понятие, нежели это принято. Речь идет о различных вариантах проверки кода и качества верстки, а не только соответствия HTML и CSS общепринятым стандартам. 

Что значит валидация?

Можно сказать, что валидация – это проверка кода на качество. Разработчики придумали стандарты, которым должны соответствовать верстка, синтаксис, логика приложения и т.п. Некоторые из них общепринятые и глобальные, некоторые более частные, но везде эти стандарты в том или ином виде существует. 

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

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

Зачем нужна валидация?

Как и любая проверка, валидация решает сразу несколько проблем:

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

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

• Делает сайт удобным для пользователей.

SEO

Одна из ключевых причин проводить валидацию кода – SEO. Веб-ресурс необходимо оптимизировать под требования поисковых машин, чтобы у него были высокие позиции в выдаче Google, Яндекс и других поисковиков. 

Нужно учитывать множество параметров, но основные моменты это:

• Корректное использование семантических тегов. Их любят поисковики, так как с помощью них проще ориентироваться в элементах страницы и отображать нужный контент. 

• Использование микроразметки. При ее наличии больше шансов, что ваш сайт будет выше в поиске.

• Соответствие кода стандартам производительности Google Web Vitals. Поисковые машины не любят медленно работающие сайты и будут занижать их позиции в результатах выдачи. 

Универсальный доступ

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

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

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

Кросс-браузерность

Браузеры отличаются друг от друга не только с точки зрения функциональности, но и «восприятия» страниц. 

Например, если вы используете свойство margin в CSS-файле для своего сайта с минусовым значением, то Google Chrome и Firefox воспримут это свойство нормально и корректно отобразят элементы на странице. А вот Safari воспринимает такие значения иначе, и элемент с margin может не только отображаться неправильно, но и вообще выйти за пределы видимой области и сделать часть интерфейса недосягаемым. 

Также есть Internet Explorer, который тоже до сих приходится поддерживать, а он огромное количество свойств воспринимает некорректно. 

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

Чистота кода

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

Случается так, что программисты ставят пустые <p>, чтобы сделать отступ, вместо того чтобы указать соответствующее свойство в CSS. Иногда разработчики копируют текст в HTML-файл из редактора в духе Word, что влечет за собой появление в коде невидимых символов, способных сломать код.

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

Как проверяют код?

Теперь рассмотрим инструменты, используемые разработчиками для валидации кода. Проверим каждый аспект своего проекта – от базовой верстки до более специфичных деталей в логике ПО.

Валидация HTML

Первый этап валидации – проверка HTML-кода на соответствие стандартам, предусмотренным консорциумом W3C, отвечающим за правила размещения HTML-страниц в сети. 

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

Проверить валидацию можно с помощью одного из специальных сервисов. Самый популярный – Markup Validation Service. Чтобы им воспользоваться:

• Открываем страницу сервиса.

• Вводим адрес страницы, которую нужно проверить. 

• Нажимаем на кнопку Check. 

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

На том же сайте есть два других способа добавить страницу для проверки. Можно загрузить свой HTML-файл напрямую либо открыть редактор и ввести туда свой HTML-код.

Валидация CSS

Второй шаг на пути к успешной валидации страницы – проверка CSS-разметки. Правильное использование стилей, как и проверка HTML, гарантирует корректное отображение всех элементов сайта. 

Валидатор CSS выполняет ту же функцию, что и валидатор HTML, проверяет CSS-код на соответствие стандартам W3C. 

Для валидации используется сервис CSS Validation. Чтобы им воспользоваться:

• Открываем страницу, указанную выше. 

• Вводим адрес сайта, который надо проверить. 

• Нажимаем на кнопку Check. 

Ждем пару секунд и смотрим на результат. Если будут ошибки, то анализируем, исправляем и повторяем процедуру. 

Как и в случае с Markup Validation Service, можно не только указать адрес, но и загрузить CSS-файл напрямую (или написать код вручную). 

Валидация ссылок

Проверка сайта на наличие битых ссылок необходима сразу по двум причинам:

• Если пользователь наткнется на нерабочую ссылку, то с большой долей вероятности потеряет интерес к сайту и уйдет к конкурентам (ситуацию можно исправить нормально настроенной страницей 404, но это не снизит отток посетителей радикально). 

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

Чтобы проверить сайт на наличие битых ссылок, можно воспользоваться сервисом Google Analytics или программой в духе Xenu или Netpeak Spider. После этого нужно проанализировать найденные ссылки и либо поправить их, либо настроить переадресацию.

Валидация адаптивности

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

А потом нужно проводить тесты – как ручные, так и через специальные сервисы. Вручную это можно сделать, открыв браузер Google Chrome и запустив в нем режим эмуляции мобильного устройства. Сразу будет видно, как сайт выглядит на маленьком экране. 

Частично автоматизировать процесс помогают приложения в духе Google Mobile Friendly Test. Если «прогнать» через него свой веб-ресурс, то сервис проанализирует содержимое и скажет, удобно ли им пользоваться с телефонов.

Валидация синтаксиса кода

Существуют отдельные сервисы, помогающие оценить корректность написанного кода. Здесь со стандартами сложнее, потому что основным мерилом качества кода является его работоспособность. Большая часть редакторов и IDE не станут ругаться на программу, если она функционирует.

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

Они сообщают о наличии неиспользуемых переменных, о не указанных типах, об отсутствии необходимых атрибутов или некорректно используемых циклах. 

• Сервис для валидации JavaScript-кода

• Сервис для валидации Python-кода

• Универсальный сервис по бьютификации кода

Другие виды валидации

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

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

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

Еще один тип валидации, который стоило бы отметить – Google Lighthouse. Это комплекс мер по оценке качества созданного сайта или приложения. Lighthouse встроен в браузер Google Chrome и в автоматическом режиме показывает, что можно исправить, чтобы увеличить производительность и сделать работу ресурса эффективнее.

Вспомогательные инструменты

Помимо описанных выше сервисов, в ходе работы над кодом придется использовать дополнительные валидаторы («исправляторы») кода. 

Большая их часть устанавливается напрямую в IDE или редактор кода. Некоторые автоматически включаются при попытке скомпилировать или запустить код. Их можно объединять со сборщиками по типу Webpack и другими популярными инструментами разработчиков. 

Linter

Linter (lint, линтер) – это утилита для анализа кода. Она помечает ошибки, специфичные для конкретного языка, находит баги, указывает на ошибки в стиле оформления кода, подозрительные конструкции и другие недочеты в работе программиста. 

Прелесть Lint в том, что он срабатывает еще на этапе компиляции, а при желании можно добавить его поддержку в IDE, и тогда все нетипичные для вашего редактора кода ошибки отобразятся в самом коде, что заметно упростит рефакторинг и устранение ошибок. 

Вместе с линтером необходимо загружать пакет проверки. Например, веб-разработчикам может понравиться свод правил оформления JavaScript-кода от компании AirBnb.

Prettier

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

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

Вместо заключения

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

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

• Кому нужно тестировать верстку?
• Как можно контролировать верстку?
• Screenshot-driven testing
• Выбираем софт, автоматизируем процесс контроля верстки
• Проблема scroll’а при автотестах верстки
• Результат: Screenshot-driven testing (Gemini+BrowserStack) на службе народного хозяйства
• Примеры автоматического тестирования фронтенда и верстки
  • Попроще
  • Посложнее
• Сколько стоит автоматическое тестирование верстки?

Продолжаем тему качества веб-разработки.

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

Серверную сторону проверяют unit-тесты, пользовательские сценарии — Selenium-тесты, Zabbix проверит как справляется ваш сервер и хватает ли ресурсов.

Все эти проверки мы собираем в автоматическую систему контроля качества (continuous integration).

Но есть одна штука на сайте, которую так не проверишь: внешний вид, верстка.

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

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

Это — проблема, и ее надо решать.

Чип и Дейл Отдел сопровождения сайтов ИНТЕРВОЛГИ спешит на помощь и решает этот вопрос.

Представляем вам методику Screenshot-Driven Testing

Кому нужно тестировать верстку?

Контролировать верстку на всех устройствах и браузерах нужно для всех сайтов.

Но если у вас:

• сложный фронтенд — адаптив, много эффектов, сложная логика в разных браузерах;
• часто меняются html, стили и клиентские скрипты;
• несколько разработчиков;
• применяются визуальные wysiwyg-редакторы, позволяющие менять стили на странице;
• business-critical сценарии зависятот верстки (например, оформление заказа на мобильных сделано так сложно, что от каждого чиха рассыпается),

то без контроля верстки вы обречены на проблемы.

Как можно контролировать верстку?

Способ первый: никак, клиенты расскажут или сами случайно заметим.

Минусы очевидны: несвоевременная реакция, потери заказов.

Способ второй: специально обученные люди.

Плюс: есть шанс что человек увидит проблему.

Минусы: есть риск, что человек НЕ увидит проблему. Глаза замыливаются. Да и долго очень.

Способ третий: автоматизация.

Автоматизация рулит. Расскажем как это работает.

Screenshot-driven testing

Идея:

1. Берем элементы сайта, которые мы хотим проверять на стабильность.
2. Получаем “эталонный внешний вид”.
3. Отслеживаем состояние этих элементов во всех браузеров.
4. При “ненормальных” отклонениях бьем тревогу.

Это тестирование, основанное на скриншотах.

Сказать легко, сделать сложнее.

Выбираем софт, автоматизируем процесс контроля верстки

Что должен уметь софт, который нам нужен?

Например, видеть css-регрессии (это когда в одном месте поправили, а в другом уехало)

Вот это микроскопическое смещение человек мог и пропустить.

Есть средства, которые это умеют. Кандидаты:

1. Автоматизация на Selenium
2. BackstopJS
3. Gemini
4. Ручной BrowserStack

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

Проблема scroll’а при автотестах верстки

Как выяснилось, в gemini нельзя принудительно проскролить страницу, а это нужно для тестирования многих сценариев и эффектов.

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

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

Результат: Screenshot-driven testing (Gemini+BrowserStack) на службе народного хозяйства

На базе Gemini+BrowserStack построена система, которая умеет отлавливать отклонения верстки.

Примеры автоматического тестирования фронтенда и верстки

Попроще

На тестировании увидели что НЕМНОЖКО съехали пункты меню и кнопки соцсетей

После обновления БЭМ пропали пунктирные подчеркивания в меню

Пропало меню на посадочной.

Посложнее

Интернет-магазин путешествий на круизных лайнерах.

На мобильных при оформлении заказа планки с ценой и кнопкой “continue” должны “прилипать” к верху и низу страницы.
ИНОГДА они не прилипают. Этот “шрединбаг” стоил много литров крови, и только автотесты верстки улучшили ситуацию.

Сколько стоит автоматическое тестирование верстки?

Мы предоставляем этот вид автоматического тестирования в комплекте с другими видами тестирования. Цены на автоматическое тестирование и функциональный мониторинг сайта 24х7:

Заказчикам: оставляйте заявку на подключение системы автоматического мониторинга стабильности вашего сайта 24х7
Инженерам: делитесь статьей в соцсетях, пришлем информацию о том что и как нужно дописать в gemini для стабильности работы.
Сэкономим вам 2 рабочих дня.

An error has occurred. This application may no longer respond until reloaded.

Reload
🗙