Данная статья посвящена анализу использования незаменимых инструментов в работе QA-инженера при тестировании верстки сайта.
Речь идет о проверке совпадений внедренного дизайна сайта и его ранее подготовленных макетов. В целом, макет – это представление того, как будет выглядеть сайт после верстки.
Adobe Photoshop и PerfectPixel
Отличительной особенностью каждого сайта является интерфейс. От того, какое впечатление получит пользователь, посетив сайт впервые, зависит его дальнейшее пребывание там. Он может остаться на сайте или же просто закрыть страницу и отправиться в поисках нового, более интересного, практичного и легкого в освоении сайта.
При создании внешних параметров будущего сайта, веб-дизайнеры внимательно трудятся над интерфейсом страниц и вырисовывают макет до мельчайших деталей. Задача разработчика – реализовать задуманное дизайнерами.
В большинстве случаев владельцы сайтов или заказчики, описывая технические задания, указывают, что необходимо, чтобы верстка полностью совпадала с макетом дизайна сайта. Именно поэтому тестированию интерфейса страницы уделяется много внимания.
Проверка верстки сайта с помощью Adobe Photoshop
Даже если вы никогда не занимались редактированием изображений, скорее всего, вы слышали о таком редакторе как Adobe Photoshop. Данное приложение – мощный инструмент, который применяют в работе профессиональные фотографы, квалифицированные дизайнеры и тестировщики.
При тестировании верстки Adobe Photoshop – просто необходимый элемент, который невозможно оставить без внимания. Эта программа поможет нам сверить получившуюся версию сайта с его начальным макетом.
Ниже предоставлен алгоритм выполнения накладки в Adobe Photoshop, после создания которой можно обнаружить все недоработки и легко описывать дефекты.
- Чтобы начать работу в Adobe Photoshop, установите приложение на компьютер.
- Откройте программу и запустите исходный макет сайта (файл должен соответствовать форматам PSD, JPEG или PNG).
- Зайдите на страницу сайта в Google Chrome или Mozilla Firefox при том разрешении, для которого был сделан макет. Затем сделайте скриншот страницы, после чего откройте ее в Adobe Photoshop.
- Полученный скриншот наложите на страницу сайта вторым слоем (для этого зажмите клавишу «Ctrl»), нажмите на слой со скриншотом сайта в разделе слоев и скопируйте его сочетанием клавиш «Ctrl+С».
- Скопированный слой вставьте на общую панель слоев к макету («Ctrl+V»). Выберите уровень прозрачности, к примеру, 80%.
- Выровняйте габариты скриншота и макета таким образом, чтобы они были одинаковыми.
- Сравните месторасположение элементов.
Использование PerfectPixel при проверке верстки
Тестируя верстку сайта, нельзя забывать и о PerfectPixel. Это расширение, с помощью которого можно сравнить выполненную верстку сайта с оригинальным графическим изображением.
- Для начала откройте страницу, параметры которой нужно протестировать, в Google Chrome или Mozilla Firefox.
- Установите браузерный плагин PerfectPixel и откройте его с помощью специальной иконки в верхнем углу справа.
- Загрузите на сервер исходник сайта, нажав на клавишу «Add your first layer».
- После окончания загрузки макета, получается накладывание одного слоя на другой: оригинального макета и сверстанного по его типу сайта. Так мы можем увидеть все недоработанные моменты, несоответствия и сравнить размещение всех элементов на страничке. Для более удобного использования, можно один из слоев сделать более прозрачным, закрепить их или инвертировать цвета.
Как итог
Таким образом, Adobe Photoshop и PerfectPixel – инструменты, помогающие в обнаружении различных багов, таких как несоответствие шрифтов, различие в размерах блоков, разные цвета компонентов сайта, отсутствие определенных деталей и прочие.
Если вам нужно быстро и при этом качественно выполнить тестирование внешнего интерфейса, то данные приложения должны стать вашими главными помощниками.
Оставить комментарий