Инструменты и веб-ресурсы для веб-разработки

GUI

GUI — у любого тестируемого предмета и веб-приложения есть внешний вид, поэтому тестирование графического интерфейса или попросту, внешнего вида — это самое первое, что мы можем сделать. Сравнить его с требованиями и/или с макетом и все. Или не все? А как насчет верстки?

Верстка — размещение элементов веб-приложения (изображения, текст, кнопки, видео…) в соответствии с макетом или требованиями.

Проверяем:

наличие всех элементов;
их размер и цвет;
расположение относительно друг-друга.

Все? — Нет У верстки есть еще множество параметров и элементов, которые мы очень часто забываем проверить.

Сравнение с макетом — метод наложения готового эталонного макета (обычно psd-файл) на приложение в экране браузера, все несовпадения можно рассматривать как ошибки (для этого есть хороший инструмент Pixel Perfect).

Измерение размеров элемента — если это имеет значение, то померять размеры элемента и сравнить их со спецификацией можно с помощью, например Page Ruler.

Правильность шрифтов (название, размер, цвет) — WhatFont.

Цвета интерфейса — ColorZilla.Контент — проверить на наличие орфографических и грамматических ошибок (SpellChecker).

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

Фавикон — такая маленькая незначительная вещица, но может изрядно подпортить впечатление пользователя (в моей практике были случаи, когда разработчики или дизайнеры шаблона оставляли фавикон с логотипом своей компании на сайте у заказчика).

Обозначение возможности переноса элементов.

Кодировка (UTF8…).

Стандарты HTML/CSS — достаточно неплохие решения для быстрой проверки предлагает W3C.

Заголовки по всему приложению должны быть приведены к одному стандарту (пример).

Title страницы — о нем мы тоже часто забываем, также как и разработчики

Back button — достаточно часто встречается ошибка при переходе на какую-то страницу и нажатии на браузерную кнопку Back, предыдущая страница крашится или возврат на нее вовсе не осуществляется.

Масштабируемость — особенно это важно при тестировании на смартфонах и планшетах. Где пользователь часто меняет масштаб экрана (Window Resizer), а также режим адаптивного дизайна (например в FireFox Developer Edition)

Кроссбраузерность — одна и та же страница может выглядеть по-разному в разных браузерах (пример).

Проверяем Scroll.

Браузерные расширения, которые могут влиять на внешний вид приложения (например, AdBlock) — пробуем включить и отключить.

Проверить контент при отключенных (режим WebDeveloper) изображениях, flash, JavaScript.

Все? — Нет

Локализация — что мы знаем об этом? Обычно наши знания сводятся к невнятным «ну, это язык», «кодировка», «раскладка», еще реже «геолокация». Что еще мы так часто забываем проверять в рамках тестирования локализации?

Проверяем тестовый образец на правильность перевода — тут, конечно, хорошо бы подключить переводчика или носителя языка, но за неимением таких, берем тестовый образец и переводим через любой онлайн-переводчик (ну и все мы помним, как прекрасно и весело читать описание товаров на русском языке на AliExpress).
Длина переведенных слов — количество символов в переведенном слове может быть гораздо больше (пример), что может привести к «расползанию» интерфейса при переводе.
Сокращения/аббревиатуры — существуют правила, по которым их либо переводят, либо транслитерируют, либо оставляют как есть.
Валюта.
Параметры шрифта могут также значительно отличаться в зависимости от языка ввода.
Проверить работу поиска во всех локализациях — к примеру, на AliExpress результаты поиска одного и того же слова «смартфон» дают разный результат по количеству найденных товаров, причем разница исчисляется десятками тысяч.
Мета-информация (keywords/title/description) — столь незначительное для пользователя, невидимое, но такое важное для поисковых машин и продвижения сайта в гугле и других поисковиках.
RTL (right to left languages) — языки c обратным написанием (арабский, иврит) имеют свои особенности: числа пишутся слева направо, значки и иконки отзеркаливаются, названия программ не переводятся, нет переносов, кнопки редактирования Backspace и Delete работают наоборот.

88 вопросов, которые стоит задать себе ДО начала разработки сайта:

Базовая информация:

Опишите вашу целевую аудиторию.
Какова цель создания сайта?
Какие основные ценности есть у вашей компании и как вы доносите их до аудитории?
Что вас отличает от конкурентов?
Почему люди должны иметь дело с вами, а не с конкурентами?
Опишите желаемый стиль будущего сайта.
Есть ли у вас корпоративные цвета, которые нужно использовать?
Есть ли у вас материалы, которые должны быть представлены на сайте (брошюры, пресс-релизы и т.д.)?
Что вам нравится больше всего в уже существующем сайте (если он есть)?
Какие функции и возможности на существующем сайте вы хотели бы сохранить?
Составьте ваш ТОП-3 разочарований от существующего сайта.
Что есть на сайтах ваших конкурентов, что вы бы тоже хотели иметь?
Какие сайты нравятся вам внешне? (сделайте список)
Что вам действительно нравится на сайтах, которыми вы пользуетесь?
Что вас раздражает в сайтах, которые вы используете?
Назовите 3 самые важные вещи, которые должны быть на новом сайте.
Назовите 3 наименее важные для нового сайта вещи.
Где размещается существующий сайт?
У вас есть полный доступ?
Можете ли вы передать пароли?
Кто с вашей стороны будет вовлечен в разработку сайта?
Кто и как будет заниматься обновлением и поддержкой сайта?
У вас есть бюджетные ограничения, в которые необходимо вписаться?

Характеристики и функции.

Избегайте расширения масштабов проекта и бесконечных правок.

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

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

Адаптация статьи http://marketingland.com/100-questions-you-must-ask-when-developing-web-site-86342

Задания с собеседования HTML-верстальщик

Задачи:

Адаптивная блочная верстка страниц pixel perfect (мобильные устройства, десктоп)
Табличная вёрстка писем
Photoshop (base)
HTML5 (tags)
CSS3 (flexbox, grid layout, media queries, pixel ratio, etc …)
Markdown
Stylus
SVG fonts
Gulp
Git
NPM (Yarn)
опыт вёрстки под мобильные устройства.

Общение перед заданием:

Вопросы про то с какими сборщиками работал, как происходит отрисовка сайта(введение имени, запрос, отрисовка документа),какие навыки JS имеются. Как происходила работа совместно с дизайнером.

На выбор давалось одно из трех заданий

Задание 1

Вариант №1:

Нужно выводить текстовые сообщения в html блок (общий вид приведён в приложенном файле «messages.jpg»).

В блоке 1 — по очереди показываются все сообщения из списка с интервалом в несколько секунд. Показываться они могут несколько раз, но если пользователь нажал «х» слева в блоке 1, то это сообщение больше не будет показываться.

Блок 2 — отображает полный список сообщений, удалённые сообщения помечены знаком «х», новые сообщения добавляются в конец списка.

Блок 3 и 4 для отправки сообщений и включения в очередь для показа.

Вариант №2 (для усложнения):

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

Не функциональные требования:

Разрешено использовать js фреймворки
Желательно, чтобы html был максимально чист (минимум вёрстки, скриптов в html)
Кроссбраузерная вёрстка, в т.ч. для мобильных устройств.

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

Задание 2

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

Для отображения график можно использовать сторонний компонент, напримерhttp://www.highcharts.com/demo/ или любой другой.

Вёрстка должна быть адаптированной с поддержкой мобильных устройств (на одном из изображений есть пример). Должна быть возможность скрывать некоторые строки из таблицы (например удалением через настройки).

Нужно в html+js (можно использовать фреймворки) сверстать. Данные для таблицы и графика нужно хранить в json-файле. Бэкенд вообще не нужен.

Задание 3

Нужно сверстать расписание работы сотрудников. На графике отображено плановое время работы сотрудника (закрашенные прямоугольники) и фактическое (закрашено штриховкой). На вход приходит 2 набора данных в json формате, которые содержат 2 набора строк. На выходе ожидаем: html страницу + js + css + json-файл с данными. БД & бэкэнд не требуются. В json-файле должны быть данные с приложенной картинки.

Вариант №1. Облегченная задача (минимум):

Отобразить план работы всех сотрудников;
В диапазоне дат ограничиваем принудительно максимальную длительность – 4 дня;
У одного сотрудника может быть несколько смен в выбранном фильтре дат в одном ресторане (как у Гоку Петра), нужно отобразить оба отрезка в одной строке, как на приложенной картинке;
При щелчке на смене сотрудника отображать плановую длительность этой смены.

Вариант №2. Задача нормальной сложности:

Дополнительно к минимуму: отображать факт, прогулы, опоздания, ранние уходы;
Максимальная длительность в фильтре не ограничена.

Важно:

Перед выполнением оцените время на выполнение задания, выберите вариант (1 или 2) и дату выполнения задания.

От редакции:

Памятка

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

GUI	макет контент кодировка элементы (цвет, размер, расположение) локализация стандарты HTML/CSS масштабируемость курсор заголовки шрифты фавикон scroll кроссбраузерность
Functional	работа кнопок имейл регистрация/авторизация поля ввода время и дата сообщения об ошибках поиск всплывающие окна/подсказки формы заполнения календари взаимодействие всех модулей системы
Usability	навигация соответствие целям приложения печать логичность локализация help информативность совместимость с другими приложениями ожидания конечного пользователя скорость работы
Security	матрица уровней доступа протоколы передачи данных конфиденциальность информации протоколы криптования доступность информации авторизация
Performance	нагрузка имитация количества пользователей БД нагрузка стабильность «тяжелый» медиа-контент скорость выполнения запросов к БД стресс скорость интернета корректные сообщения об ошибках восстановление объем загружаемых файлов восстановление данных / системы
Configuration	сторонний софт «железо» совместимость с другими браузерами OS

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

Внешнее — > Внутренее — >Стойкость — >Взаимодействие

Внешнее — проверка внешнего вида и функций, которые доступны только обычному пользователю (GUI, Usability).

Внутреннее — все функции приложения (Functional).

Стойкость — сюда мы отнесем устойчивость приложения к нагрузкам и к попыткам нарушить его безопасность (Security, Performance (load/stress/recovery)).

Взаимодействие — работа приложения с другим софтом и железом (Configuration).

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

🧠 Какими знаниями и навыками должен обладать специалист

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

знанием базовых правил математики;
четким представлением о принципах работы и протоколах сети интернет;
умением составлять логические цепочки и алгоритмы;
навыками работы с распространенными веб-браузерами;
языками HTML, PHP, CSS, Python, JavaScript, SQL и другими;
способностью разрабатывать легко читаемые, безопасные коды, соответствующие стандартам;
основами веб-дизайна;
графическими редакторами, в том числе Adobe Photoshop;
знанием английского языка на уровне B1, B2;
навыками работы с фреймворками;
основами кроссбраузерной верстки;
способностью читать чужие коды и работать с ними;
пониманием проектного подхода и различных методик управления проектами;
теорией и практикой применения СУБД.

Востребованность web-разработчика на рынке труда и величина заработной платы во многом зависят от профессиональных навыков и личностных качеств.

Коммерческие инструменты для тестирования

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

Mogotest

Mogotest выполняет проверки на кросс браузерность даже страниц, которые требуют регистрации пользователей. У сервиса есть API, и он может быть интегрирован в ваш проект. Mogotest также выдает отчет о состоянии проверяемого сайта, в котором сообщается о неправильных ссылках, закольцованных перенаправлениях и других проблемах разметки. На сервисе есть инструмент для сравнения снимков экрана. Поддерживаются системы регистрации на основе HTML и куки.

Доступны несколько тарифных планов. Персональный тарифный план стоит $15 в месяц и допускает проверки до 50 страниц на трех сайтах. Тарифный план для фрилансеров стоит $45 в месяц и допускает проверки на 10 сайтах и до 350 страниц. Групповой тарифный план стоит от $125 в месяц до $4499+ за неограниченный доступ.

Cloud Testing

Cloud Testing предлагает функциональное тестирование проекта. Вы можете записать предполагаемые действия пользователя в вашем браузере с помощью Selenium IDE, затем загрузить их, а Cloud Testing выполнит скрипт в разных операционных системах и браузерах. А затем будет предоставлены снимки экранов и диагностика HTML и компонентов.

BrowserCam

Стоимость использования BrowserCam начинается от $19.95 за один сервис в день и заканчивается $999.95 за годовую подписку на полный комплект услуг.

Multi-Browser Viewer

Multi-Browser Viewer выполняет проверки для браузеров настольных систем и мобильных устройств. Он включает 26 виртуализированных веб браузеров, 5 браузеров для мобильных устройств (включая iPhone и iPad) и 61 вариант браузеров для снимков экрана (вы сможете видеть, как сайт выглядит, но взаимодействовать с ним нельзя). Также доступны пять языков: английский, испанский, немецкий, русский и французский.

Multi-Browser Viewer стоит $139.95 за однопользовательскую лицензию, включая годовую поддержку. Обновления после года использования стоят $99.95. Также доступен пробный период использования инструмента через веб сайт.

Все решают современные технологии

Наш тест однозначно показал, что старыми методами уже ничего не добиться. Отживший свое браузер Internet Explorer занимает последнее место. Он медленный, плохо оснащенный и сложный в управлении. Заработав общую оценку «удовлетворительно», он еще легко отделался.

Другие браузеры лучше, и в первую очередь это обусловлено использованием современных технологий. В отличие от Internet Explorer, остальные участники либо полностью перестроены (Chrome, Edge), либо именно сейчас проходят фазу модернизации (Firefox), либо же базируются на Chromium, как и Chrome (Opera, Vivaldi).

При тестировании эти три продукта на основе схожих принципов (Chrome, Opera и пока еще не совсем готовый Vivaldi) серьезно отрываются от конкурентов. Все они используют один и тот же движок рендеринга HTML-представлений (Blink), а также одинаковую среду JavaScript (V8).

Chrome отрывается от конкурентов.Браузеры должны быстро выполнять особые задачи и шустро справляться с типичными. Эти показатели мы измеряли в Browsermark.

Информативная проверка скорости интернета

Инструменты тестирования производительности

17) LoadUI Pro

LoadUI Pro от Smartbear позволяет быстро создавать сложные нагрузочные тесты без сценариев, распространять их в облаке с помощью агентов нагрузки и контролировать производительность ваших серверов по мере увеличения нагрузки на них. Вы можете получить доступ к подробным отчетам и быстро автоматизировать нагрузочные тесты на Jenkins, Bamboo, TFS и других средах автоматизации — если вы уже используете SoapUI, вы можете преобразовать тестовые примеры в нагрузочные тесты всего за 3 клика — и все это без написания ни одной строчки сценарий.

Функции:

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

Протоколы:

HTTP, REST, SOAP, JSON, JMS, Swagger, RAML, IODocs,
Схема API, Схема JSON, Схема XML, MQTT, CoAP, WSDL, WADL

Плюсы

Минусы

Очень удобный — не требует написания скриптов
Создавайте нагрузочные тесты из предварительно настроенных шаблонов всего за несколько кликов
Простое повторное использование существующих функциональных тестов из SoapUI за несколько кликов
Визуализируйте влияние нагрузки на ваши серверы с помощью мониторинга в реальном времени
Распределенное нагрузочное тестирование с помощью локальных или облачных агентов нагрузки (например, Amazon EC2)

Поддерживает только нагрузочное тестирование веб-сервисов / API
Меньше поддержки нагрузочного тестирования пользовательского интерфейса
Нет прямой поддержки протоколов FTP, SMTP
Импортирует SoapUI, но не скрипты JMeter

Скачать LoadUI

18) Apache Jmeter

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

Функции:

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

Протоколы

Интернет: HTTP, HTTPS
Веб-сервисы: XML, SOAP и т. Д.
Протоколы на основе Java
FTP

Плюсы

Минусы

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

Невозможно записать соединение HTTPS
Не удается перехватить трафик AJAX
Не может отслеживать статистику, относящуюся к серверу приложений.
Структура отчетности имеет очень ограниченные возможности

Задания с собеседования Web-программист/верстальщик

Задачи:

верстка сайта по макетам;
поддержка существующих сайтов;
интеграция сайтов на платформы UMI, WordPress.
опыт работы верстальщиком, web-разработчиком от 1 года;
HTML5, CSS3, Адаптивная кроссбраузерная верстка;
JavaScript, jQuery, AJAX;
желательно знание PHP и XSLT (возможно обучение);
базовые знания Photoshop для работы с готовыми макетами;
общие знания предмета: клиент-сервер, понимание ООП.

Общение перед заданием:

Сначала общение с HR общие вопросы о прошлом месте работы, что разрабатывали, с чем работали и причина ухода

Потом общение с лидом вопросы про общие вопросы про верстку (про способы центрования, позиционирование). Вопросы про CMS(с какими и как работал), немного Javascript

Задание

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

От редакции «Без воды»:

Тестирование совместимости

1366×768, 1920×1080, 1600×900 — наверно, вы знаете, что означают все эти комбинации цифр. Правильно, разрешение мониторов или экранов, на которые мы ежедневно смотрим. Так вот здесь можно увидеть «картинку», сколько процентов пользователей имеют устройство с тем или иным количеством пикселей. Посмотрите сколько много разных форматов. Как же веб-сайт смотрится на каждом из них? На этот вопрос и об уровне кроссбраузерности ответит тестирование совместимости со следующими видами работ:

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

Почему это важно

Сегодня кроссбраузерное тестирование важнее, чем когда-либо прежде. Процесс, который когда-то использовался только для самых сложных проектов, теперь стал мейнстримом. Поскольку все больше и больше людей создают веб-сайты, единственный способ выделиться из толпы — создать действительно профессиональный сайт. Что делать, если ваш следующий клиент использует Internet Explorer? Вы же не хотите потерять его только потому, что ваш сайт не отображается в нем? А с появлением адаптивного веб-дизайна поддерживать кроссбраузерность стало невероятно трудно. Тоже самое касается и мобильной версии сайта.

Если раньше веб-разработчикам требовалось только проверить, как веб-сайт выглядит и работает на настольных компьютерах (Mac или PC), то теперь все изменилось

Все больше и больше клиентов совершают покупки и заказывают услуги с помощью мобильных устройств, поэтому важно убедиться, что веб-сайт работает и на этих устройствах. Но проблема заключается в том, что на рынке представлено так много разных браузеров для настольных компьютеров, мобильных устройств и планшетов, существует так много разных устройств (Android, iPhone, Windows Phone, iPad и т

Д.), поэтому все это физически невозможно протестировать. Вам нужно потратить тысячи долларов, чтобы купить все эти устройства. Но к счастью сегодня существует множество сервисов для кроссбраузерного тестирования.

Вопрос №3. Настройка веб-аналитики?

Почему это важно?

Я и говорю, и пишу о том, что новомодный SMM и всякие танцы вокруг новых медиа – это только 1% возможностей интернета. А веб-аналитика – вот, что является настоящим лицом профессионального интернета, который приносит компаниям реальные деньги и отбивает инвестиции. Счетчики покажут вам, что на ваш сайт зашла 1000 человек. Это хорошо или плохо?

Вы сможете понять это, только когда увидите, что 700 человек посмотрело более 2 страниц на вашем сайте, 500 из них зарегистрировалось или подписалось на рассылку, 300 человек посмотрело ваши контакты, тарифы и схему проезда, 200 из пришедших совершило сделку прямо на сайте. Все это и многое другое позволяет увидеть собственными глазами бесплатные (!) системы веб-аналитики Google Analytics и Яндекс.Метрика.

Подрядчик отвечает вам: «Да, конечно. Analytics и Яндекс.Метрика подключаются на все наши сайты. Какие целевые действия на сайте вам настроить?»

Подрядчики, которые так ведут разговор, достойны доверия. Вместе с ними определите так называемые «целевые действия пользователей» (например, пребывание на сайте более 30 сек, 2 минут, 10 минут, просмотр более 2 страниц в разделе «меню» или «наши услуги», клик на страницы «контакты», «схема проезда», «подробнее», процессы покупки – клики на странички «заказы», «подтверждение покупки», «подтверждение оплаты» и др.

Подрядчик говорит – да, это возможно. Будет стоить 2 часа нашего программиста. Платите 100 баксов.

Может быть и такое. В целом, можно заплатить и 100, и 200, и 1000 баксов, лишь бы сделали и вы в системе веб-аналитики видели результаты работы вашей платформы. Но я лично знаю, что настройка веб-аналитики и целей не занимает много времени (конечно, зависит от пряморукости людей, писавших ваш сайт). Однажды за простую настройку веб-аналитики (без целевых действий) знакомые программисты попросили с моих клиентов 100 зеленых. Тут я не выдержала, выгнала их из кабинета и настроила все сама. Платить стоит только за комплексную настройку систем!

Подрядчик говорит – нет, мы в компании не настраиваем сами. Давайте мы дадим вам телефон ребят, которые делают.

Стоит насторожиться, так как эта компания явно не привыкла делать 100% рабочие сайты. То есть, сайт будет работать (открываться, грузиться, показывать картинки итп.), но не факт, что он будет приносить вам клиентов и денег. Девиз таких программистов: «Странички показывает? Красиво смотрится? Картинки листаются? Ну и замечательно. Вот счет на оплату».