Полезные приемы для тестирования сайтов

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

Выполнить кросс-браузерное тестирование сайтов

Чтобы убедиться, что ваш сайт работает для максимально возможного количества пользователей, мы рекомендуем тестировать его на множестве настольных и мобильных браузеров. Некоторые из основных браузеров для тестирования включают Mozilla Firefox, Google Chrome, Apple Safari, Microsoft Edge и Internet Explorer.  

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

Используйте инструменты разработки Google

Использование Google DevTools – отличный способ получить доступ к вашему веб-сайту и собрать данные, относящиеся к обнаруженным вами проблемам, во время тестирования вашего веб-сайта.

Эти инструменты предоставляют вам доступ к коду для отдельных страниц, включая структуру страницы и стили, применяемые в HTML и CSS. Например, если состояние наведения на кнопке не работает или на странице отсутствуют изображения, мы можем понять, почему, проверив элементы веб-страницы и применив исправление тут же, затем.

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

Подумайте о своих пользователях

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

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

Введите сложные тестовые данные

Фиктивный текст, такой как Lorem Ipsum, является отличным способом проверить ограничения персонажей и представить формы. Чтобы перейти на другой уровень, попробуйте добавить цифры и символы в форму перед отправкой. Например, при вводе имени включите его в дефис; а при вводе возраста попробуйте ввести десятичное число и продолжайте думать таким образом при тестировании полей на вашем сайте. Это один из наиболее эффективных способов поиска ошибок в ваших формах до того, как это сделают ваши пользователи.

Используйте расширения браузера

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

• Page Insights: это поможет вам выявить технические проблемы во время тестирования вашего сайта. Каждый раз, когда вы посещаете страницу, расширение будет сообщать о любых обнаруженных проблемах, таких как отсутствующие теги h1 или отсутствующие метаописания.
• WhatFont: Это расширение позволяет вам легко узнать, какие шрифты использует ваша веб-страница. Просто нажмите на типографику и увидите семейство шрифтов, стиль, вес, размер, высоту строки и цвет, все перечисленные для вас. Сравните это с вашим дизайном, и вы нашли простой способ проверить шрифт ваших веб-страниц.
• Site-Improve Accessibility Checker: Этот инструмент дает вам обзор проблем с доступностью на вашем сайте с четкими объяснениями того, как это влияет на ваших пользователей, и рекомендациями, как их исправить.
• PageRuler: позволяет рисовать линейку на веб-странице и просматривать ширину, высоту, верхнюю, нижнюю, левую и правую позиции. Это полезно для определения того, где ваш контент смещается.