- PVSM.RU - https://www.pvsm.ru -
Интернет является наиболее продвинутой информационной технологией и платформой разработки приложений, от которой сегодня уже зависит львиная доля экономики всей планеты.
Проще всего представить себе интернет как сеть взаимосвязанных узлов, называемых серверы и клиенты, которые обмениваются данными по установленным протоколам вроде TCP/IP, HTTP, FTP и т.д. Рекомендую почитать о зарождении [1] (англ.) этой технологии и ознакомиться с ее техническими особенностями [2] (англ.).
При разработке для веб по современным стандартам важно использовать актуальный набор подходящих инструментов и архитектуру, на всех уровнях поддерживающую CI/CD (непрерывное развертывание и доставку) и QA (обеспечение качества).
Веб-приложение, или веб-сайт, представляет собой пакет, загруженный на клиентской стороне и содержащий множество слоев взаимозависимых модулей, построенных на основе веб-технологий:
Функциональность этих основных технологий дополнительно расширяется слоями других технических решений, диапазон которых поистине огромен. Сюда относятся различные JS-фреймворки вроде Angular, React и Vue, CSS-инструменты предварительной/пост-обработки вроде Less и Sass, а также всевозможные механизмы HTML-шаблонизации.
Помимо слоя фронтенда в большинстве приложений также присутствует серверная сторона, или бэкенд, с API, построенным на микросервисах и базах данных. Серверная часть содержит все данные и бизнес-логику, абстрагируя всю эту информацию в соответствующие контракты, к которым фронтенд может обращаться через HTTP-методы, используя нужную форму запроса и учетные данные.
В зависимости от применяемых инструментов и внутренней сути сайта ему потребуется подходящая стратегия
Веб-приложение, даже при небольшой начальной конфигурации по мере добавления в него страниц, контента и функциональности будет постепенно разрастаться. И однажды, когда будет достигнут определенный порог сложности, значительно затруднится управление приложением, а также отслеживание потребления и выделения ресурсов.
В зависимости от типа создаваемого приложения разработчик может использовать для него различную структуру:
Хотя какой бы подход вы не выбрали, для обеспечения эффективности рабочего потока DevOps в каждом случае важно будет реализовать план тестирования как на уровне разработки, так и на уровне эксплуатации приложения.
Хороший план тестирования сайта включает в себя стратегию, задачи тестирования, подход, расписание тестов и среду их выполнения. Стратегия должна быть выстроена так, чтобы сайт в итоге отвечал всем бизнес-требованиям и соответствовал своему назначению.
Что касается подхода к тестированию, то он должен включать в себя:
Для просмотра любого сайта необходим браузер, который запускается в операционной системе устройства. Эти особые приложения разрабатываются несколькими компаниями и обычно являются бесплатными.
Тенденция популярности браузеров на 2021 год
Браузеры играют важную роль, не только тем, что делают сайты доступными для пользователей, но и тем, что помогают разработчикам, предоставляя широкий арсенал инструментов для тестирования и отладки различных аспектов веб-приложений.
Большинство браузеров предлагают в качестве вспомогательного интерфейса инструменты разработки, позволяя при желании заглянуть в код отрисовываемых страниц приложений. Доступ к этим инструментам обычно можно получить через правый клик по странице и выбор опции «Просмотреть код элемента», либо комбинацией клавиш Ctrl+Chift+I.
Ниже я опишу некоторые основные компоненты инструментов разработчика в Chrome:
Инструменты разработчика в Chrome
В браузере также присутствует встроенная панель эмуляции устройств, которая позволяет эмулировать сценарии пользовательского интерфейса различных устройств, предлагая список предустановленных профилей разрешения, сетевой задержки, масштабирования, поворота экрана, а также возможность устанавливать собственное разрешение для тестирования отзывчивости.
Раздел разработчика в Chrome постоянно получает новые и более совершенные инструменты вроде Lighthouse, Recorder и прочих, которые предоставляют углубленные возможности анализа общего состояния приложения.
Более того, помимо инструментов разработчика, браузеры дают доступ ко множеству API для взаимодействия с вводом/выводом, камерой, геолокацией, аудио/речью, сетями и не только. DOM и многие другие компоненты активной сессии доступны на уровне объектов.
Прежде чем переходить к настройке потока тестирования в браузере, рекомендуется реализовать модульный тест в приложении, чтобы убедиться в надежности и чистоте базы кода.
Когда разработчики создают сайт, они проверяют все изменения и обновления в браузере на рабочем компьютере. После предварительного функционального тестирования следующим важным шагом идет проверка совместимости устройства и браузера, что позволяет понять, как приложение выглядит и работает на их разных комбинациях.
В связи с тем, что разработчику недоступен весь спектр устройств для тестирования, отловить всевозможные баги становится сложно. Несмотря на то, что в веб-среде установлены определенные стандарты и спецификации, при их трактовке различными браузерами возникают разночтения, чему способствуют отличия в реализации браузерных движков и используемых интерпретаторов JS-кода. В целом современный браузер сам по себе предоставляет инструментарий для открытия и отладки любого аспекта приложения.
Для пользователя работа с приложением является визуальным опытом, и его перемещение по сайту определяется особенностями дизайна, установленными в ходе бизнес анализа и проектирования. Для того, чтобы итоговый сайт оставался верен заложенным идеям дизайна, необходимо обеспечить подходящий режим визуального тестирования и утверждения вносимых в базу кода изменений.
И главную роль в этом процессе играет команда по обеспечению качества (QA team). С десяток лет назад визуальное тестирование выполнялось в основном вручную, но сегодня оно все больше автоматизируется. Один из эффективных способов его реализации состоит в выполнении визуальных тестов в потоке CI/CD.
Вы можете добавить членов команды и настроить выполнение тестов на продакшн-среду, где каждую сборку можно будет оценить на визуальные отличия, а команда сможет согласованно утверждать изменения.
Вот мы и расписали в общих чертах путь ручного тестирования на локальной машине с использованием автоматизации, параллельно обсудив применение визуальных тестов для контроля изменений UI. После успешной реализации всех этих этапов ваш сайт будет готов к отправке в продакшн.
Но это еще не значит, что тестирование закончено. Проделав все описанное, вы лишь убедитесь, что при правильной конфигурации всех тестовых кейсов и плавном протекании потока CI/CD вам потребуется меньше времени проводить за проверкой и исправлением ошибок, вместо этого занимаясь разработкой нового функционала. Для того же, чтобы получить эффективную систему тестирования, посоветую вам учитывать следующие нюансы:
Существует множество подходов к тестированию сайтов, и здесь можно применить разные комбинации инструментов, а с появлением новых облачных технологий веб-тестирование стало еще богаче на функционал и надежнее. Возможность сотрудничать с командой на одной платформе для построения планов тестирования дает превосходный результат, поскольку все участники имеют доступ к общим ресурсам.
Автор: Дмитрий Брайт
Источник [11]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/377072
Ссылки в тексте:
[1] зарождении: https://home.cern/science/computing/birth-web
[2] техническими особенностями: http://info.cern.ch/hypertext/WWW/Summary.html
[3] хостинга: https://www.reg.ru/?rlink=reflink-717
[4] WebView: https://developer.android.com/reference/android/webkit/WebView
[5] руководстве по JavaScript: https://www.browserstack.com/guide/unit-testing-in-javascript#:~:text=JavaScript%20Unit%20Testing%20is%20a,organized%20in%20the%20test%20suite.
[6] документации Python: https://docs.python.org/3/library/unittest.html
[7] GitHub: https://docs.github.com/en/actions/automating-builds-and-tests/about-continuous-integration
[8] Gitlab: https://docs.gitlab.com/ee/ci/unit_test_reports.html
[9] Bitbucket: https://bitbucket.org/product/features/pipelines
[10] Selenium: https://www.selenium.dev
[11] Источник: https://habr.com/ru/post/676752/?utm_source=habrahabr&utm_medium=rss&utm_campaign=676752
Нажмите здесь для печати.