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

Почему тестирование сайтов важно во время веб-разработки

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

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

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

Проверка работоспособности простых сайтов

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

Кратко об основных этапах тестирования

Вот какие этапы придется пройти при тестировании простого сайта, если он будет работать на более-менее распространенной CMS:

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

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

  • на разных разрешениях. Речь здесь не только о стандартных разрешениях для мобильных и десктопа. В идеале сайт должен нормально смотреться даже при масштабировании окон или когда окно раскрыто не на весь экран. Естественно все важные элементы должны быть видны пользователю, никуда не съезжать и не наезжать на соседние элементы. Если что-то где-то съезжает, то это нужно поправить в верстке;
  • в разных браузерах. Конечно, смотреть, как отображается сайт в каком-нибудь ноунейм браузере, которым пользуется несколько сотен человек, не имеет смысла, но в основных веб-обозревателях: Google Chrome, Opera, Mozilla Firefox, Edge, Internet Explorer, Яндекс Браузере, страницы должны отображаться корректно. Если это не так, то проверьте, используете ли вы нужные префиксы и поддерживаются ли используемые возможности на сайте актуальными версиями указанных браузеров.

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

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

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

Пример корректно составленного макета главной странице сайта

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

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

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

Подробный разбор тестирования сайтов в процессе разработки

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

Проверка функциональности

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

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

  1. Ссылки на главную страницу сайта. Они должны быть на всех страницах в том или ином виде. Обычно они реализованы в виде логотипа сайта, который расположен в верхнем меню и подвале. Часто встречается и просто надпись “Главная” в меню. Все ссылки на главную страницу должны быть рабочими.
  2. Внутренние ссылки. Они ведут на другие страницы сайта, кроме главной. Здесь важно проследить, чтобы все ссылки вели туда, куда должны и работали корректно. Для некоторых важных разделов сайта применяется то же правило, что и для ссылок на главную - они должны быть доступны с любой странице сайта.
  3. Ссылки на категории внутри конкретной страницы. Важно проверить не только корректность работы самой ссылки, но и отображения элемента, на который она ведет. Если при переходе по ссылке нужный элемент оказывается вне поля зрения пользователя, то нужно поработать над якорями.
  4. Проверить, нет ли ссылок на изолированные страницы.
  5. Проверить, нет ли нерабочих ссылок на сторонние ресурсы.

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

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

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

Пример корректно составленной валидации форм

3. Проверьте значение полей, которые используются по умолчанию, если таковые есть.

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

5. Корректность выполнения всех этапов. Актуально для сложных форм, чье заполнение часто разделяют на несколько этапов. Нужно проследить не только сам факт переключения между ними, но и корректность переноса данных, а также проверки в соответствии с уже заполненными формами.

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

Проверка валидности HTML/CSS кода

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

К счастью, перечитывать весь код самостоятельно не требуется. Существуют специальные программы для автоматической проверки валидации HTML/CSS. Они покажут все найденные проблемы и спорные моменты, которые вам нужно будет исправить или оставить как есть, если посчитаете, что это не ошибка.

Автоматическая проверка валидности HTML/CSS кода

Проверка баз данных

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

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

Тестирование юзабилити

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

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

Дополнительные факторы тестирования

Большинство из них нужно знать еще до начала разработки, так как это может серьезно повлиять на рабочий процесс:

  • ожидаемая нагрузка на сервер;
  • основные виды нагрузок и требуемая для них производительность со стороны сервера;
  • перечень инструментов для тестирования производительности и валидности кода;
  • общий портрет целевой аудитории: регион проживания, “любимые” браузеры;
  • доступность сайта - для широкой аудитории или для определенной категории пользователей;
  • допускаются ли простоит сервера для технического обслуживания и, если да, то в каких количествах и какой длительности;
  • перечень средств для обеспечения безопасности сайта от потенциального взлома и хакерских атак;
  • каким образом планируется работать с контентом со стороны заказчика: требуется ли собственная CMS, подойдет любая в открытом доступе или CMS не нужна вообще;
  • какую спецификацию HTML и CSS кода требуется соблюдать при разработке проекта, допустимы ли отклонения;
  • рекомендуемый максимальный размер страницы 3-5 экрана, в иных случаях требуется разработать интерактивное меню для данной страницы и разбить ее на логические блоки;
  • все элементы страницы, да и сайта тоже, должны быть логически связаны между собой;
  • рекомендуется оставлять “хлебные крошки” - ссылки на предыдущие страницы сайта из одной категории для лучшей связи.

Заключение

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