- Логика тестирования
- Как проверить отображение страничек?
- Проверка странички на адаптивность
- Тест кроссбраузерности
- Сервисы для тестирования web-сайтов
- Дальнейшие тесты
- Инструменты для дополнительных тестов
Первое, что видит юзер на сайте — интерфейс, включающий различные кнопки, поля, панели и т. д. Все это сразу же формирует у пользователя мнение об увиденном веб-ресурсе. Над визуальной частью сайта работают специалисты по дизайну и верстки. В этой статье вы узнаете о том, как протестировать работу проделанную ними.
Логика тестирования
Если прототип ресурса прорисован детально, то вы получите хорошо реализованный проект с адекватной структурой. При этом учитывайте, что страничка должна не только отображать разработанный дизайн, но и обеспечивать комфортное взаимодействие с ним.
Необходимо протестировать верстку. Нужно выполнить следующие этапы:
- Проверка визуальной составляющей.
- Проверка кроссплатформенности и кроссбраузерности.
Визуальную составляющую может проверить сам верстальщик. Однако искать мелкие дефекты — задача тестирования. Поэтому эту задачу должен выполнять тестировщик.
Как проверить отображение страничек?
У каждого QA-подразделения должен присутствовать большой набор инструментов проверки, критериев и стайлгайдов. Все позволит быстро протестировать сайт.
Первое, что нужно сделать — сравнить страницу с макетом. Нужно, чтобы блоки точно совпадали с макетом, созданным дизайнером. При этом для текстовых полей разница не должна быть более пяти пикселей. Для выполнения этой работы есть специальное расширение для браузера PerfectPixel. С его помощью можно наложить полупрозрачный макет на html-страницу. Это позволит вам определить есть ли между ними различия или нет.
Если нужно протестировать сетку web-страницу, то можно использовать расширение для браузера Page Ruler. После завершения этой проверки, следует переходить к работе с деталями. В этом вам помогут такие приложения, как What Font (для шрифтов), Color Zilla (для цвета) и Spell Checker (для текстов).
Проверка странички на адаптивность
Самый удобный инструментарий для тестирования — обычный браузер. Изменяйте высоту и ширину окна, и фиксируйте как изменяется положение блоков.
Если появляется горизонтальная прокрутка или группа элементов не помещается в видимой области, это говорит о том, что нужно вносить правки в верстку. Программно провести этот тест можно с помощью расширения Windows Resizer.
Обращайте внимание на то, как отображается текст на страницы. Он может быть чрезмерно мелким или, наоборот, крупным.
Визуально нужно проверить корректность отображения компонентов навигации. Обратить внимание нужно на следующее:
- Отображается ли курсор на всех кликабельных компонентах?
- Он должен отсутствовать на некликабельных.
- Возникновение курсора и возможность ввести необходимую информацию в полях для ввода текстовых данных
- Отображение фавикона.
Тест кроссбраузерности
Страничка может по-разному отображаться в различных браузерах. Все зависит от того, какой движок они используют.
Необходимо проверить, как отображается верстка в наиболее популярных браузерах. Как правило, вид страничек не будет иметь серьезных отличий. Исключение — Internet Explorer.
Сервисы для тестирования web-сайтов
Для проверки визуальной составляющей веб-страниц применяют специальные сервисы. Мы рассмотрим наиболее популярные и эффективные из них.
Browsershots
Простая утилита, имеющая значительный набор настроек. Позволяет создавать скрин того, как будет отображаться страница при выбранном разрешении экрана.
Browsershots включает многие современные браузеры разных версий. Есть возможность вручную выбирать разрешение, насыщенность цветов, а также включать и отключать Flash, JS и Java.
Browsera
Многофункциональная платформа, позволяющая протестировать кроссплатформенность макета, а также работу скриптов, динамическое отображение web-страничек, и защищенность ресурса.
Browserstack
Считается лучшей утилитой для кроссбраузерного тестирования. Ее функционал включает множество устройств, а также возможность проверки верстки в нескольких сотнях различных браузеров. Программа содержит возможность тестирования с локального компьютера, или составление комплекса скринов тестируемой страницы (до двадцати пяти штук).
Дальнейшие тесты
Следующий шаг проверки заключается в проверки ссылок, отображающих логику на сайте. Поскольку они могут вызвать ошибку «404». Чтобы справиться с этой задачей, нужно применить утилиту Black Window. Запустив ее, можно выявить некорректные ссылки, и исправить их. Каждая web-страничка должна отвечать следующим критериям:
- Стандарты HTML/CSS.
- Соответствие кодировке UTF-8.
Последний параметр проверяется посредством нажатия кнопки «F12». Для проверки корректности кода HTML/CSS нужно зайти на специальный онлайн-сервис, который называется «w3».
Инструменты для дополнительных тестов
Полная проверка веб-сайта подразумевает тестирование следующих параметров:
- SEO. Каждая страничка индексируется поисковыми ботами. Она обязательно должна иметь заполненные параметры «keywords» и «description». Страничкам, закрытым от индексации, нужно присвоить тег «noindex».
- Web-аналитика. Необходимо проверить наличие счетчика.
- Сопряжение с соцсетями. Чтобы протестировать перепосты, лайки и отслеживания комментариев, прописывается специальный метод. Тестировщику нужно найти его, и проверить его работоспособность. Например, внешнее исполнение кнопочек для шаринга должно быть узнаваемым, и отличаться от прочих элементов соцсетей. Также нужно проверить корректность появления сведений о группе или юзере, когда мы их выгружаем в выбранную соцсеть.
Больше информации о том, как разрабатывать, и тестировать веб-сайты вы узнаете в других статьях блога DevEducation.
