Тестирование отзывчивые веб-сайтов трудоемкой задачей.
До сих пор, внедрение стабильной и в сопровождении автоматизированное решение для кросс-браузерные и тестирования кросс-устройства откликающегося макета не было почти невозможно.Но что, если мы должны были возможность писать визуальные тесты для гибкой websites?Что, если мы могли бы описать внешний вид и поведение приложения и поместить его непосредственно в наших тестах
По рассмотрении этого вопроса, я решил также взглянуть на еще один интересный стороны визуального тестирования.Долгое время я был поклонником через тестирование development 1 (TDD) методология.Это помогает мне в моей повседневной работе программ.TDD позволяет мне оформить задание и убедиться, что все осуществляется в соответствии с требованиями .
Что еще более важно, это помогает мне поймать много ошибок, прежде чем они идут в прямом эфире.За последние семь лет, моей главной целью было автоматизации тестирования для проекта больших предприятий.Со временем, я стал одержим идеей применения автоматизированного тестирования с использованием методологии TDD на внешний вид и реагирующих веб-сайтов.После многих лет исследований, я пришел с Гален Framework 41 2 — инструмента и с помощью специального языка для визуального тестирования.Это работает уже в течение некоторого времени, и как только язык стал достаточно зрелым, я решил провести эксперимент с визуальной разработки через тестирование .
В этой статье я опишу этот эксперимент в деталях и предложить TDD в качестве методологии для переднего плана развития.Мы будем смотреть на новую технику визуального тестирования и рассмотрим, как получить максимальную отдачу от него .
Введение в Галена Framework
Хотя новая технология, Гален Framework уже используется некоторыми крупными компаниями, такими как eBay, SkyScanner, Gumtree и Bestseller.nl, и он был также использован для проверки Вашингтон Post 3 Сайт выставки.Кроме того, предприятия компании, она также используется в веб-студий, таких как ADCI Solutions 4 .Рамки с открытым исходным кодом и размещается на GitHub 5 , так что каждый может принять участие в проекте и внести свой вклад в код .
Фундаментального понятия тестирование в Галена Framework центры по проверке расположение и размер всех элементов страницыпо отношению друг к другу.Таким образом, вы можете описать расположение для размера любого окна браузера, и вы не должны использовать абсолютное позиционирование .
6 Гален Specs 8 язык был разработан, чтобы напоминать естественный английский язык, насколько это возможно, и был реализован в полу-Markdown образом.Итак, что же это похоже?Ну, представьте себе, что вы хотите, чтобы убедиться, что “ Войти in” кнопка находится рядом с “ Cancel” кнопки, и имеет запас 10 пикселей с правой стороны, и что они расположены горизонтально.Мы можем преобразовать это заявление в Галена характеристики:
login-button
near: cancel-button 10px right
aligned horizontally all: cancel-button
Рассмотрим еще один пример.Что делать, если мы хотим, чтобы убедиться, что логотип должен быть расположен внутри заголовка в верхнем левом углу, примерно с запасом 20 пикселей?Вот как это делается:
logo
inside: header 17 to 22px top left
Мы даже можем использовать ярлык:
logo
inside: header ~ 20 px top left
Много других типов контрольных существует, и все они описаны подробно в Официальный documentation 9 .Обучение будет не очень крутой.Структура Гален Спецификации довольно просто, и как только вы понимаете его, тестирование становится очень легко.Мы вернемся к эксперименту я упоминал в начале в данный момент, но сначала позвольте мне дать вам немного понимания в TDD в целом .
Тест-Driven Development
TDD был использован в течение довольно длительного времени и зарекомендовала себя как сильный методология построения твердых приложений.В начале, вы можете чувствовать, как вы тратите время на написание тестов, но вы будете тратить гораздо меньше времени спустя на поиске первопричины проблем.Более того, вы можете сосредоточиться на небольших подразделений кода и убедитесь, что каждый блок имеет хорошее качество.Цифры испытаний будет расти вместе с основной код, и, по сути, вы получите ранний отзыв о каких-либо проблем в вашем приложении .
Концепция визуального тест-Driven Development
Итак, как же мы подходим к TDD для HTML и CSS?Очевидно, что это немного отличается от традиционного TDD,Если испытания осуществляются в белом box 10 .Вот почему я добавил слово “ visual” к ней, как и с Галеном Framework: Мы тестируем, как сайт отображается в браузере, и мы не особенно заботиться о его внутренней структуре.Таким образом, это больше походит на черный ящик или серо-камеры для испытания.В этой статье я покажу вам, как создать ответное веб-страницу, написание тестов макета во-первых, прежде чем мы даже любую страницу.Одно дело иметь в виду, что наши тесты будут также служить в качестве источника документации, объясняя, как страница должна выглядеть на любом устройстве.Имея все это в виду, давайте прояснить процесс .
- Дизайн и testПредставьте себе, как страница должна выглядеть.Написать эскиз, написать тест .
- CodeРеализация HTML и CSS код, и пройти тест .
- RefactorУлучшение код и тесты .
11 Мы собираемся сломать весь процесс развития в малых итераций.Еще одним важным правилом: Для каждой итерации, мы будем реализовывать только код, который необходим для испытаний.Таким образом, мы убедимся, что наши тестового покрытия всегда близка к 100%, и что мы не отвлекаться на вещи, которые не были объявлены в текущей итерации.Эта статья основана на визуальном TDD эксперимента из Семинар Магазины Cart 13 .Это проект GitHub, так что вы можете отслеживать все изменения в коде в нем .
Experiment
Представьте себе, что мы решили построить торговый картинг страницу, и мы хотим, чтобы это было реагировать.Функциональность странице является такой же, как в любом интернет-магазине: Пользователи должны иметь возможность пересмотреть свои торговые пункты, перейдите к платить или вернуться .
Этап 1: Sketched Requirements
Мы сели, продумывая все детали, и мы пришли к этому эскизу:
14 Выглядит нормально сейчас.Как вы можете видеть, у нас есть три типа эскизов: настольный компьютер, планшетных и мобильных устройств.Теперь мы можем приступить к выполнению тестов .
Фаза 2: Project Configuration
В этом уроке мы не нужно никакого специального IDE — любой текстовый редактор будет делать.Это будет довольно просто.Давайте просто создадим папку проекта, shopping-cart, и в нем создать две папки: website и galen-tests.Конечно, настройка локальный веб-сервер будет лучше, так что мы можем получить доступ к странице через http://localhost в наших тестах.Но поскольку у нас есть только одна страница, мы можем работать с обычными файлами в настоящее время, доступ к ним с помощью file:///… URL-адреса .
Download 16 Гален Framework и установить it 17 .Гален Framework имеет установочные скрипты для Linux и Mac.Если вы пользователь ОС Windows, взгляните на “ Настройка Гален рамки Windows 18 .”
Создать всех папок, которые мы обсуждали выше:
shopping-cart/
|-- website/
`-- galen-tests/
Вот это сейчас .
Фаза 3.1: Написание tests
Думают Давайте, как мы можем разделить нашу работу в малых итераций.Первое, что мы бы думать о том, чтобы построить базовую страницу скелет:
19 Это означает, что на данный момент, у нас есть только пять объектов на странице: “ заголовок, ” “ Главная, ” “ Навигация, ” “ Баннер panel” и “ Footer .” Давайтеначать писать тесты Гален для нашего скелета.В папке galen-tests создайте папку с именем specs.В нем мы будем хранить все файлы Гален Spec .
Давайте создадим первый, galen-tests/specs/shopping-cart.spec, с помощью следующего кода:
=====================================
header css #header
navigation css #navigation
main css #main-container
banner-panel css #banner-panel
footer css #footer
=====================================
@ *
--------------------
header
inside: screen 0px top left right
height: 60px
navigation
inside: screen 0px left
below: header 0px
footer
inside: screen 0px bottom left right
below: banner-panel 0px
height: 100px
@ desktop
------------------
navigation
width: 300px
aligned horizontally all: main
near: main 0px left
main
below: header 0px
@ desktop, tablet
-------------------
banner-panel
below: header 0px
inside: screen 0px right
width: 300px
near: main 0px right
aligned horizontally all: main
@ tablet
-----------------
navigation
inside: screen 0px left right
above: main 0px
width: 60px
main
inside: screen 0px left
@ mobile
----------------------
navigation
inside: screen 0px left right
above: main 0px
height: > 60px
main
inside: screen 0px left right
above: banner-panel 0px
banner-panel
inside: screen 0px left right
height: > 50px
Как вы можете видеть, мы уже определили какой-то предмет локаторыв начале, хотя мы не имеем никакого HTML код еще.Это может показаться немного странным, но, с другой стороны, это может оказаться полезным упражнением.Таким образом, мы должны думать над нашей структуре DOM фронт, и мы уже можем придумать несколько хороших идей о том, как наш HTML код может быть структурирована.Например, мы уже знаем, что в нашей будущей страницы скелета, мы будем иметь <div id="header">…</div> элемент и <div id="footer">…</div>.То же самое касается других элементов страницы.И если для какой-либо причине мы решили изменить структуру DOM, мы можем всегда обновлять наши тесты в одном месте .
Теперь давайте также подготовить набор тестов, который будет выполнять наши тесты в течение трех размеров: настольный компьютер, планшетных и мобильных.Чтобы сделать это просто, мы собираемся подражать или мобильного планшетного макет путем изменения размера окна браузера.Создайте файл с именем galen-tests/shoppingCart.test и поставить в следующем коде:
@@ table devices
| device | size |
| mobile | 500x700 |
| tablet | 900x600 |
| desktop | 1300x700 |
@@ parameterized using devices
Shopping cart on ${device} device
${websiteUrl} ${size}
check specs/shopping-cart.spec --include "${device}"
В приведенном выше коде, мы объявили devices таблица, содержащая параметры для трех размеров экрана.Использование этой таблицы, Гален Framework будет вызывать нашей тестовой три раза, каждый раз с разными device и size параметры.Мы также определили заполнитель для URL веб-сайта, с помощью ${websiteUrl} строительства.Мы собираемся предоставить этот параметр позже из командной строки .
Фаза 3.2: Написание Code
Потому что мы реализовали исходный код теста, мы можем начать работу над HTML и CSS.Для этого эксперимента я выбрал Twitter Bootstrap.Вы думаете, что Twitter Bootstrap уже хорошо протестированы и отзывчивым.Ну, точка визуального TDD, чтобы придумать с твердыми тестов и создать свой сайт с точностью до пиксела.Таким образом, это действительно не имеет значения рамках которой вы используете для создания веб-сайта, потому что, в конце концов единственное, что проверяет Гален расположение элементов страницы на экране.Я выбрал Twitter Bootstrap просто упростить эксперимент, потому что уже есть некоторые вещи, которые мне нужны, поэтому я не придется тратить время повторной реализации их.Тем не менее, у нас есть строгие требования в наших тестах Галена для этой страницы скелета, и мы должны поставить страницу в соответствии с этими требованиями.Скачать Twitter Bootstrap 21 и скопируйте все его содержимое в website папки.Там, мы должны иметь следующую структуру:
website/
|-- css/
| |-- bootstrap-theme.css
| |-- bootstrap-theme.min.css
| |-- bootstrap.css
| `-- bootstrap.min.css
|
|-- fonts/
`-- js/
|-- bootstrap.js
|-- bootstrap.min.js
`-- npm.js
Теперь давайте на самом деле писать некоторые HTML.Создайте файл с именем shopping-cart.html в website папки с помощью следующего кода:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Galen Workshop - Shopping Cart</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE 8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<nav id="header" class="navbar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<h3>Header</h3>
</div>
</div>
</nav>
<div id="middle">
<div class="row">
<div id="navigation"
class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
Navigation
</div>
<div id="main-container"
class="col-xs-12 col-sm-8 col-md-7 col-lg-7">
Main container
</div>
<div id="banner-panel"
class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
Banner panel
</div>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</body>
</html>
Создайте файл с именем main.css в нашей website папки со следующим содержимым:
#header {
background: #2E849E;
color: white;
border-radius: 0;
}
#navigation {
background: #faa;
height: 100px;
}
#main-container {
background: #afa;
height: 100px;
}
#banner-panel {
background: #aaf;
height: 100px;
}
#footer {
color: white;
background: #222;
height: 100px
}
Вот именно — мы сделали с кодом!Вы можете проверить все, что вы сделали, является ли такой же, как в GitHub repository 22 .Теперь мы можем запустить тесты и убедитесь, что мы сделали все, что хорошо для этой итераци …
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров