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

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

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

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

По моему опыту, фронтальные сайт макеты не тщательно протестированы, прежде чем они будут переданы команде разработчиков серверной, причина в том, временные и бюджетные ограничения.Они, как правило, проходят в браузере Front-End разработчиков на выбора и, возможно, на их смартфоне.Поэтому, когда мы столкнулись с монстром проекта, Папа Info ¹ , которая имеет массу ответных типов страниц, мы нуждались в план методично и эффективно проверить функциональность и производительность на всех платформахи различных устройств .

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

Инструмент Up

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

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

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

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

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

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

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

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

• IPhone 5, IPad 2, настольные (1024 пикселей и выше)
• Windows 7 Chrome, Windows 8 Chrome, Windows 8 Internet Explorer 10, OS X Safari, IOS 6 Safari
• Broadband и 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, Chrome (последняя), Firefox (последний), Safari (последнее)
  • Mac OS X Mavericks: Chrome (последняя), Firefox (последний), Safari (последнее)
• Уровень поддержки 1 (устройства):
  • IPhone 4/5, Ipad 2, Asus VivoTab Smart
• Уровень поддержки 2:
  • Windows 7: IE 9, Chrome (последняя), Firefox (последний), Safari (последнее)
  • Windows XP: IE 8, Chrome (последняя), Firefox (последний), Safari (последнее)
• Уровень поддержки 3:
  • Нибудь else

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

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

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

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

¹⁰

Информация о странице Functionality

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

¹²

На основе этих накладок, мы можем производить полный список функциональных возможностей .

Поиск form

• Нажмите или коснитесь в поле поиска, а затем нажмите значок поиска, чтобы представить форму .

Навигация:

• Наведите курсор на навигационную элемент, чтобы отобразить белая подсветка .
• Наведите курсор мыши на пункт навигации “Семья”, чтобы показать выпадающего Ме …
  
  Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров
  
  
  
  Главная → Мобильные приложения → 24.11.2014 by mobile.smashingmagazine.com