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

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

Преимущества Front-End тестирования Plan

• Ясность scopeЗная, какие браузеры и устройства находятся в спецификации проекта поможет вам сосредоточиться и сократить время разработки и затраты .
• Снижение клиент frictionЭто делается, показывая подробные отчеты о выполненных планов тестирования .
• Уверенность в развертывании projectЭто исходит из знания вы тщательно протестировали проект .

По моему опыту, фронтальные сайт макеты не тщательно протестированы, прежде чем они будут переданы команде разработчиков серверной, причина в том, времени и бюджетных ограничений.Они, как правило, проходят в браузере Фронтальный разработчика в выбора и, возможно, на их смартфоне.Поэтому, когда мы столкнулись с монстром проекта, Папа Info ^{1 | __28, который имеет массу ответных типов страниц, нам нужен план методично и эффективно протестировать функциональность и производительность на всех платформахи различных устройств .}

Папа информация является не-для-прибыль веб-сайт, построенный на Joomla, который стремится, чтобы помочь отцам в необходимости, независимо от их положения.В прошлом году она помогла более чем 500 000 пап и доставлены 220000 страниц информации каждый месяц.Я буду использовать папа информация в качестве примера по всему, чтобы продемонстрировать, как создать и заполнить свой собственный план тестирования интерфейсных .

Давайте Инструмент Up

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

• Asana ² Используется для отслеживания ошибок и команды management
• Хром Разработчик Tools ³ Используется для проверки, отладки и profiling
• Ножницы Инструмент Windows ‘(или Shift + Command + 4 на Mac)
• BrowserStack ⁴ Используется для тестирования функциональности кросс-браузер на нескольких виртуальных машин и emulators
• УстройстваВ идеале, вы хотите реальных устройств.У нас есть iPhone 4, 5 и 6;HTC One M8;Samsung Galaxy S5;Nokia Lumia1520;Google Nexus 5;BlackBerry Curve;Ipad 2;и Asus VivoTab Смарт.Если у вас нет этого, вы можете использовать эмуляторы BrowserStack в .
• Google, PageSpeed ​​Insights ⁵
• Pingdom Сайт Скорость Test ⁶
• Screenr ⁷ Веб-экран записи, с совместным capabilities

Что мы тестирование

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

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

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

• Какие наиболее популярным devices использует ваша аудитория
• Что операционной system и браузеру combinations? Наиболее популярны среди аудитории
• Что Соединение speeds они имеют (3G, 4G, широкополосный / волокно)
• Как технически savvy они?Мы можем сделать это приговор, основанный на тему веб-сайта, их устройств и их демографии .

Для нашего исследования папа Info, ответы будут следующие:

• IPhone 5, IPad 2, настольные (1024 пикселей и выше)
• Windows 7 Хром Windows 8 Chrome Windows 8 Internet Explorer 10, OS X Safari, IOS 6 Safari
• Широкополосный и 4G (много городских рабочих)
• Наша аудитория в основном мужчины в возрасте от 18 лет и 35 лет, достаточно технически подкованных, с смартфона в кармане и понимание социальных медиа-приложений, таких как Facebook и Twitter .

Так, как это поможет нам выполнять план передний конец тест

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

Know Your Limits

Знать пределы вашего проекта.Внекоторые точки, вы будете иметь “Это хорошо” разговор с самим собой.Пределы Проекты, как правило, контролируется несколькими факторами:

• BudgetПомните, что вы должны платить за испытания.Многие дизайнеры не, что сходит с ума.Тестирование времени — и, будучи дизайнеров и разработчиков, наш продукт время .
• TimelineВключить тестирование в сроки проекта.Это часто остановились список, и, следовательно, бросился .
• ScopeНе каждый сайт должен работать на сотни устройств.Выяснить главную прецедент, и сосредоточиться на выполнении требований, которые аудитории .

Браузер и устройства Поддержка Levels

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

Уровень поддержки 1: полностью поддерживаемые браузеры и devices

• Все содержание должно быть читаемым .
• Все функциональные должны работать .
• Отклонение от утвержденного графического дизайна должны быть сведены к минимуму .

Уровень поддержки 2: частично поддерживаемые браузеры и devices

• Все содержание должно быть читаемым .
• Навигация должны работать .
• Бизнес Логин функциональность должна ухудшать изящно .
• Любое ухудшение презентации не должны скрывать контент .

Уровень поддержки 3: неподдерживаемые браузеры и devices

• Не требуется поддержка или тестирование .

Производительность Поддержка Levels

Вы также можете договориться с клиентом о цели производительности.Быстрый и грязный способ здесь, чтобы договориться о счете достичь в Google, PageSpeed ​​Insights и сайт Speed ​​Test PingDom в.Как правило, мы стремимся, по крайней мере 85 из 100 .

Инструменты для управления Test Plan

Это не имеет значения, какие инструменты вы используете.Я использую Asana ⁸ и BugHerd ⁹ ;Вы можете использовать простую таблицу.Она сводится к тому, что лучше работает для вас.Как минимум, ваш инструмент должен быть в состоянии сделать следующее:

• Добавить баги, проблемы и задачи в упорядоченном и сегментированной списке, с возможностью Tag (“приоритет, системы критического, и др.);
• Назначить баги, проблемы и задачи, членами вашей команды (или для себя), с датами;
• Комментировать ошибок, проблем и задач, с даты заказал истории резьбой;
• Загрузить скриншоты, видео и документы, связанные с ошибками, проблем и задач;
• Пометить ошибка, вопрос или задачу, как решены илизавершено;
• Отчет о выполненных в сравнении оставшихся ошибок, проблем и задач .

Как описать ошибки и Issues

С тех получил отчет об ошибке от вашего клиента, заявил, “я нажал на блоге, и это не работает”?Бесполезно, правильно!Итак, что делает хорошо написанный отчет об ошибке выглядеть

• Будьте specificНе будучи многословным, четко суммировать проблему.Не объединить несколько ошибок в одном отчете;скорее, представить отдельный доклад по каждому вопросу .
• Показать как replicateДеталь шаг за шагом то, что вы сделали и то, что вопрос произошло в результате .
• Ограничение pronounsОписания, как “Я нажал ее и окно не появляется” очень непонятно.Вместо этого, “я нажал кнопку” Отправить “, и окно с надписью« Регистрация »не сработал” рассказывает разработчик именно то, что вы сделали, и то, что произошло .
• Читать то, что вы writtenИмеет ли это смысл?Как вы думаете, это понятно?Вы можете повторить ошибку, следуя свои собственные шаги

Настройка Front-End Test Plan

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

Case Study: Front-End План тестирования для папы Info Домашней Page

План тестирования Documentation

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

Бюджет:

• Всего 10 дней для testing
• Использование полтора дня переднего плана тестирования домашнего page

Время:

• Полная первоначальное тестирование в течение одного дня, с обратной связью на фронтальных разработчиков завершили же day
• Три дня крепления bugs
• Далее полдня для повторного тестирования bugs

Область применения:

• Уровень поддержки 1 (браузеры):
  • Windows 8: IE 10, хром (последний), Firefox (последняя), Сафари (последнее)
  • Mac OS X Маверикс: хром (последний), Firefox (последняя), Сафари (последнее)
• Уровень поддержки 1 (устройства):
  • IPhone 4/5, Ipad 2, Asus VivoTab Smart
• Уровень поддержки 2:
  • Windows 7: IE 9, хром (последний), Firefox (последняя), Сафари (последнее)
  • Windows XP: IE 8, Chrome (последняя), Firefox (последняя), Сафари (последнее)
• Уровень поддержки 3:
  • Нибудьelse

Для данного проекта, мы требуем три reports заверить клиента, что страницы претерпела и прошел процесс тестирования:

• Браузер и устройство отчета: уровень поддержки 1 и 2
• Реагировать доклад: уровень поддержки 1
• Отчет об исполнении: минимум 85 из 100

Первоначально утвержденным Design

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

¹⁰

¹²

• Пресс вверх …
  
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  Главная → Программирование → 24.11.2014 by coding.smashingmagazine.com