Всеобъемлющий контрольный список для тестирования переднего плана

Веб-сайт состоит из двух основных компонентов: front-end и back-end (а также нескольких других). Хотя некоторые сайты (например, сайт НПО) могут не иметь бэкэнд, у них обязательно есть фронтэнд. Фронтенд сайта – это представление пользователя о том, как он будет его видеть и как сайт будет реагировать на его действия. Никто не хочет, чтобы пользователь видел, что валидация ввода не работает. Внешнее тестирование веб-сайта играет важную роль в обеспечении кросс-браузерной совместимости, чтобы пользователи не сталкивались с трудностями при открытии веб-сайта в предпочитаемом браузере (и платформе). . Поэтому мы проводим тестирование внешних и внутренних компонентов, чтобы убедиться, что они работают в соответствии с желаемыми ожиданиями.

Front-end тестирование не похоже на тестирование блока кода или отдельной функциональности, как модульное тестирование. Тестирование фронтенда – это тяжелая работа с большим количеством собственных компонентов. Например, фронтенд-тестирование должно гарантировать, что сайт будет удобен для использования людьми с ограниченными возможностями. Инструменты тестирования доступности могут помочь проверить, удобен ли сайт для людей с ограниченными возможностями, такими как дальтонизм, пожилой возраст и т.д.; Это основная причина, по которой мы также проводим контрастное тестирование. Сайт должен хорошо функционировать в основных браузерах на рынке, что делает кроссбраузерное тестирование чрезвычайно важным.

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

Давайте начнем с контрольного списка тестирования фронтенда!

Эй! Знаете ли вы, что такое px-to-rem-converter? Это бесплатный онлайн-инструмент для преобразования пикселей в единицы CSS REM.

Инструменты и техники фронт-энд тестирования

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

1. Визуальное регрессионное тестирование

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

Инструмент для визуального регрессионного тестирования

Лучшим инструментом для фронтенд-тестирования, по моему опыту, является BackstopJS. BackstopJS – это фреймворк для визуального регрессионного тестирования, написанный на Javascript и включающий в себя CasperJS, PhantomJS и ResembleJS с их встроенными функциями. Самое лучшее в BackstopJS то, что он работает, даже если ваш сайт не написан на Javascript, так как сайт рассматривается как черный ящик. BackstopJS также генерирует HTML-отчеты с указанием различий между скриншотами.

Вы также можете использовать интеллектуальное визуальное тестирование пользовательского интерфейса на LambdaTest, которое позволяет выполнять регрессионное тестирование в несколько кликов. Он также определяет визуальные отклонения, связанные с паддингом, цветом, размером иконок, расположением и т.д.

Представляем LambdaTest Smart UI – платформу для интеллектуального визуального регрессионного тестирования, которая обеспечивает сравнение пиксель в пиксель в сочетании с высокопроизводительной инфраструктурой и глубокой аналитикой.

2. Автоматизированное тестирование доступности

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

Инструмент для автоматизированного тестирования доступности

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

Автоматизированный инструмент тестирования доступности также предоставляет API-интерфейсы доступности и пользовательские веб-приложения для других инструментов, таких как Chrome developer tool, Axe и HTML_CodeSniffer. Инструмент автоматизированного тестирования доступности имеет открытый исходный код и бесплатен для использования. Другой альтернативой для тестирования доступности является инструмент A11Y Machine.

3. Конечное тестирование

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

Инструмент для сквозного тестирования

Cypress – это один из лучших инструментов для сквозного тестирования, доступных сегодня на рынке. Он имеет открытый исходный код и богатые возможности для проведения сквозного тестирования в масштабе. Наряду с Mocha, Cypress создан на JavaScript для выполнения сквозного тестирования без помощи Selenium.

Тесты Cypress просты в написании, чтении и понимании. Критерием нашего выбора инструмента Cypress является его скорость. Cypress выполняет тестовые примеры сразу после завершения рендеринга веб-страницы.

4. Тестирование анализа изображений

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

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

Инструмент для тестирования анализа изображений

Web Speed Test – отличный инструмент для тестирования изображений на сайте и оценки их производительности по различным параметрам. Эти параметры включают формат изображения, размер, степень сжатия, цветовое пространство и глубину цвета. Затем инструмент оценивает каждое изображение по шкале от A до F и предоставляет информацию о том, как можно улучшить эту оценку и как можно оптимизировать изображения.

5. Тестирование каскадных таблиц стилей

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

Простая опечатка “x-index” вместо “z-index” изменит отображение элемента. Поэтому проведение фронтального тестирования элементов CSS необходимо.

CSS необходимо проверять по двум категориям:

• Синтаксис

• Отображение

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

Инструмент для тестирования CSS

BackstopJS можно использовать для визуального сравнения элементов и проверки их несоответствия. Resemble.JS также может быть использован для тех же целей в зависимости от предпочтений тестировщика. Для синтаксических ошибок CSSLint является отличным инструментом, который может идентифицировать ошибки и применять заранее определенные правила или заданные тестировщиком в явном виде.

6. Тестирование производительности

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

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

Инструмент для тестирования производительности

GTmetrix – это хороший инструмент для тестирования производительности вашего веб-приложения. GTmetrix предоставляет статистику производительности вашей веб-страницы относительно других веб-сайтов. Он поставляется в бесплатной версии и платной версии “pro”. Однако бесплатная версия достаточно хороша для работы (за исключением тяжелой работы, связанной с бизнесом). Еще одним хорошим инструментом для тестирования производительности является Calibre. Но это не бесплатное программное обеспечение, а бесплатная пробная версия.

7. Функциональное тестирование

Функциональное тестирование проводится для проверки работоспособности функциональных требований программного обеспечения. Хорошим примером функционального тестирования с точки зрения внешнего тестирования является функциональность входа в систему, проверка других функций пользовательского интерфейса, работы API и т.д.

Инструмент для функционального тестирования

Selenium выполняет функциональное тестирование для front-end. Selenium – это высококлассная система автоматизации тестирования, имеющая надежное сообщество среди тестировщиков. Selenium можно использовать со многими языками, поэтому вам не нужно беспокоиться об изучении Java (например) и можно просто начать писать тесты на Python. Selenium также очень прост в освоении, имеет открытый исходный код и поставляется с большим количеством функций.

8. Синтаксическое тестирование

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

Инструмент для синтаксического тестирования

ESLint – это отличный инструмент с открытым исходным кодом для линтинга Javascript, который доступен с 2013 года. ESLint не следует стратегии фиксированных правил. Помимо ESLint, в Javascript есть множество альтернатив, помогающих тестировщикам писать эффективные коды, такие как JSLint, JSHint и т. д.

9. Тестирование сочетания цветов

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

Инструмент для тестирования сочетания цветов

Согласно моему опыту в веб-разработке, я нахожу WhoCanUse отличным инструментом для проверки и настройки цветового контраста моего текста и других элементов с перечислением различных заболеваний, связанных со зрением. WhoCanUse работает в соответствии с рекомендациями по доступности веб-контента (WCAG), чтобы содержимое сайта было доступно для большей аудитории.

10. Инструменты разработчика браузера

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

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

Вы также можете ознакомиться с приведенным ниже руководством о том, как выполнить отзывчивое тестирование с помощью протокола chrome dev tools In Selenium 4.

11. Автоматизированное тестирование

Автоматизированное тестирование – это более широкая область в процессе front-end тестирования, сфокусированная на автоматизации процесса тестирования. Оно включает в себя другие более мелкие типы тестов, такие как сквозное тестирование, модульное тестирование и т.д.

Инструмент для автоматизированного тестирования

Protractor – это хороший инструмент для проведения автоматизированного тестирования веб-приложения. Он прост в освоении и имеет замечательное сообщество. Protractor лучше всего использовать с Angular JS, хотя его можно применять и в неангулярных приложениях. Если ваш сайт построен на Angular (или любом его компоненте), лучше выбрать Protractor. Другими инструментами для того же процесса являются Selenium и Jasmine.

12. Непрерывная доставка

Непрерывная доставка стала широко распространенной практикой и является логическим продолжением методологии Agile. Continuous Delivery – это лучший подход, которого следует придерживаться даже в небольших проектах, в которых разные команды работают (front-end и back-end) для улучшения проекта. Непрерывная поставка помогает быстрее развертывать программное обеспечение, а также производить более качественное программное обеспечение, работая над обратной связью, предоставляемой клиентом/пользователями.

Инструмент для непрерывной доставки

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

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

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

Кроссбраузерное тестирование – это парадигма тестирования, при которой мы тестируем сайт в различных браузерах (вместе с их различными версиями), операционных системах и различных разрешениях. За последнее десятилетие кросс-браузерное тестирование сильно эволюционировало, и его параметры значительно увеличились за определенный период времени. Это изменение в значительной степени объясняется все большим распространением мобильных телефонов и мобильного интернета.

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

Кросс-браузерное тестирование может быть выполнено тремя методами:

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

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

• Специализированные браузеры: Существуют специальные браузеры, созданные исключительно для кроссбраузерного тестирования и тестирования отзывчивости. Эти браузеры обеспечивают большую гибкость и предоставляют пользователю больше возможностей. Какой браузер предпочесть, зависит от вкуса тестировщика. Я работал с LT Browser от LambdaTest, и мне нравится отображать два устройства на одном экране для проведения тестирования. Ниже приведен снимок экрана:

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

Привет! rem-to-px-converter – это бесплатный онлайн-инструмент для преобразования значений CSS-единиц REM в пиксели.

Linter и его влияние на фронтальное тестирование

В предыдущем разделе я кратко представил термин линтинг или линтеры, упомянув инструменты CSS Lint и ESLint, используемые для CSS и JS. Но линтинг является жизненно важным аспектом фронтенд-тестирования и заслуживает отдельного объяснения.

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

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

Например, в python я могу объявить свое имя как
name = “Harish” (Это строка).
И мой возраст как
name = 23 (Это int с тем же именем переменной).

Поэтому линтеры очень полезны в таких типах программирования. Линтеры дают следующие преимущества:

• Линтеры делают код более последовательным.

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

• Линтеры делают код более читабельным.

• Линтеры делают код более удобным для сопровождения.

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

• Линтеры помогают улучшить качество кода.

• Линтеры делают код более безопасным, придерживаясь встроенных и определенных правил.

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

В этом посте мы рассматриваем только фронтенд-часть сайта, поэтому в центре нашего внимания – Javascript-линтеры, а хорошим инструментом для этого является ESLint.

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

Чтобы начать работать в ESLint, установите его с помощью менеджера пакетов, такого как npm или yarn.

npm install eslint --save-dev       //for npm

    yarn add eslint --dev                     //for yarn

Затем настройте конфигурационный файл для ESLint.

npx eslint --init

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

Правила в ESLint могут быть заданы следующим образом:

 {
         “rules”: {
                                “eqeqeq”: “off”,
                                “curly”:  “error”,
                                 “quotes” : [“error”, “double”]
                        }
    }

Оптимизация заголовков на веб-странице

Заголовки являются важной частью веб-страницы, особенно страниц с большим количеством письменного содержимого. В HTML есть шесть уровней заголовков, начиная с < h1 > и заканчивая < h6 >. Заголовки играют важную роль во многих вещах.

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

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

• Заголовки помогают пользователю запомнить содержание сайта. Например, сообщение о смерти Internet Explorer имеет следующий заголовок:

• Рождение IE

• IE в начале 21 века

• После 2014 года

Такое разделение помогает пользователю вспомнить большую часть контента в будущем.

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

• Всегда разделяйте свой контент с помощью соответствующих заголовков. Поисковые системы ищут заголовки более высокого уровня, это не значит, что вы размещаете все заголовки как h1 или h3, чтобы их выбрал поисковик. Это наказывает веб-страницу.

• Не злоупотребляйте заголовками. Применяйте их только там, где они необходимы.

• Не используйте одинаковые фразы во всех заголовках. Старайтесь перефразировать заголовки или использовать другие фразы.

• Всегда располагайте заголовки в иерархическом порядке. Не используйте заголовки < h1 >, затем < h4 >, а затем < h2 >. Это нарушает последовательность контента и отвлекает внимание пользователя.

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

<!DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body>

    <h1>What is Cross-Browser Testing?</h1>
    <p>Cross-browser testing is a testing method to verify that the website is rendered as expected in all the browsers available.........

    <h2 id=E>Why Cross-Browser Testing?</h2>
    <p>The advantages of cross-browser testing are....</p>

    <h2 id=F>Types Of Cross-Browser Testing Methods </h2>
    <p>There are a various types of methods by which cross-browser testing can be performed </p>

    <h3>Cloud-Based</h3>
    <p> ...... </p>

    <h3> Device Labs </h3>
    <p> ...... </p>

    </body>
    </html>

Оптимизация изображений для улучшения внешнего вида сайта

Изображения являются неотъемлемой частью фронт-энда сайта. Они не только привлекают пользователя и удерживают его на сайте, но и передают смысл длинного и утомительного текста без его написания. Если вы заметили, что просматриваете интернет, то повсюду можно встретить изображения. От баннеров в блогах до миниатюр видео – они повсюду.

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

Если бы я мог обрисовать проблему с изображениями, я бы просто сказал: “За изображения приходится платить”. Они тяжелее текста и, в свою очередь, замедляют время загрузки страницы. Хотя мир начал работать на более высокой пропускной способности, чем это было десять лет назад, мы все еще не можем игнорировать большое количество населения развивающихся стран с жесткими ограничениями пропускной способности. За последнее десятилетие мы также увеличили количество изображений на одной странице и их качество. Согласно сегодняшнему отчету, на изображения приходится 50% от общего размера передачи данных.

Итог: изображения необходимо оптимизировать для повышения производительности. Ниже я кратко описал, как можно оптимизировать изображения на сайте, но я настоятельно рекомендую ознакомиться с моей статьей “Как создавать отзывчивые изображения” – подробным руководством по этой теме с полными фрагментами кода.

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

Атрибут SRCSET

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

<img srcset="boat-320w.jpg, boat-480w.jpg 1.5x, boat-640w.jpg 2x" src="boat-640w.jpg" alt="Boat Landscape">

Элемент изображения

Другой метод оптимизации изображения – использование различных обрезанных изображений для выбора подходящего изображения для размера экрана. В отличие от srcset, здесь мы используем совсем другое изображение, которое является обрезанной версией исходного изображения. Главная цель – сохранить объект в фокусе даже на маленьком экране. Например, на приведенном ниже изображении при изменении размера экрана объект оказывается не в фокусе.

Для достижения этой цели мы используем элемент picture. Элемент picture – это отдельный тег, в отличие от srcset, который является атрибутом. В теге picture мы определяем изображение и размер экрана, подходящий для этого изображения.

<picture>
     <source media = “(max-width: 799px)”  srcset = “kutch-480.jpg”>
     <source media= “(min-width: 800px)” srcset = “kutch-800.jpg”>
     <img src= “kutch.jpg” alt= “Rann Of Kutch Landscape” />
    </picture>

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

Контрастное тестирование для фронт-энд веб-разработки

Тестирование контрастности стало важным аспектом внешней веб-разработки. Под тестированием контрастности понимается обеспечение правильной контрастности элемента, который вы размещаете на сайте. Этот процесс помогает несколькими способами:

• Люди с нарушениями зрения не сталкиваются с трудностями при посещении сайта.

• Элементы выглядят привлекательно для пользователя.

• Это помогает представить элемент в фокусе по сравнению с другими элементами.

WCAG (Руководство по доступности веб-контента) говорит нам, что содержимое нашей веб-страницы должно быть различимым. Но как мы можем проверить, правильно ли мы используем контраст или нет?

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

• Для недекоративного текста коэффициент цветового контраста должен составлять 3:1. Это относится к тексту, размер которого больше 18 пунктов или больше 14 пунктов, если текст жирный.

• Для текста размером менее указанных выше пунктов коэффициент контрастности должен составлять не менее 4:5:1.

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

Оптимизация передачи данных на внешнее устройство

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

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

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

Непрерывная интеграция и непрерывное развертывание

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

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

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

Используйте живое тестирование – кросс-браузерное тестирование и тестирование приложений, живое тестирование онлайн, чтобы ускорить скорость выпуска релизов с помощью молниеносной живой облачной платформы.

Заключение

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

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