Тестирование отзывчивые веб-сайтов трудоемкой задачей.
До сих пор, внедрения стабильной и сопровождении автоматизированное решение для кросс-браузер и кросс-тестирования устройства откликающегося макета не было почти невозможно.Но что, если мы должны были возможность писать визуальные тесты для отзывчивого websites?Что делать, если мы могли бы описать внешний вид приложения и поставить это непосредственно в наших тестах
После рассмотрения этого вопроса, я решил также взглянуть на еще один интересный стороны визуального тестирования.Долгое время я был поклонником тест-приводом development 1 (TDD) методологии.Это помогает мне в моей повседневной работе программирования.TDD позволяет мне оформить задание и убедиться, что все осуществляется в соответствии с требованиями .
Что еще более важно, это помогает мне поймать много ошибок, прежде чем они идут в прямом эфире.За последние семь лет, моей главной целью было тестирование автоматизации для проекта больших предприятий.Со временем, я стал одержим идеей применения автоматизированного тестирования с использованием методологии TDD в вид и отзывчивых веб-сайтов.После многих лет исследований, я пришел с Гален Framework 41 2 — инструмента и специального языка для визуального тестирования.Это работает уже в течение некоторого времени, и как только язык стал достаточно зрелым, я решил провести эксперимент с визуальной разработки через тестирование .
В этой статье я опишу этот эксперимент в деталях и предложить TDD в качестве методологии для переднего плана развития.Мы будем смотреть на новую технику визуального тестирования и изучения, как получить максимальную отдачу от его .
Введение в Галена Framework
Хотя новая технология, Гален рамки уже используется некоторыми крупными компаниями, такими как eBay, SkyScanner, Gumtree и Bestseller.nl, и это был также использован для проверки Вашингтон Post 3 ‘ы на сайте.Кроме того, предприятия компании, она также используется в веб-студий, таких как ADCI Solutions __40 | | 4__6 .Рамки с открытым исходным кодом и размещается на GitHub __46 | | 5__6 , так что каждый может принять участие в проекте и внести свой вклад в код .
Концепция фундаментальной тестирование в Галена Framework центры по проверкерасположение и размер всех элементов страницы относительно друг друга.Таким образом, вы можете описать макет размером любое окно браузера, и вы не должны использовать абсолютное позиционирование .
6 Гален Specs 8 язык был разработан, чтобы напоминать естественный английский, насколько это возможно, и был реализован в полу-Markdown образом.Итак, что же это похоже?Ну, представьте, что вы хотите, чтобы убедиться, что “ Login” кнопка находится рядом с “ | Cancel__48 кнопки и имеет запас 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 была использована в течение довольно длительного времени и зарекомендовала себя как сильный методология построения твердых приложений.В начале, вы, возможно, чувствуете, как вы тратить время на написание тестов, но вы будете тратить гораздо меньше времени спустя на поиске первопричины проблем.Более того, вы можете сосредоточиться на небольших подразделений кода и убедитесь, что каждый блок имеет хорошее качество.Цифры испытаний будет расти с основным кодом, и, по сути, вы получите обратную связь на ранней каких-либо проблем в вашем приложении .
Концепция визуальных тест-DrivenDevelopment
Итак, как мы подходим к 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: Проект Configuration
В этом уроке мы не нужно никакого специального IDE — любой текстовый редактор будет делать.Это будет довольно просто.Давайте просто создадим папку проекта, shopping-cart, и в этом создать две папки: website и galen-tests.Конечно, настройка локальный веб-сервер будет лучше, так что мы можем получить доступ к странице через http://localhost в наших тестах.Но поскольку у нас есть только одна страница, мы можем работать с обычными файлами сейчас, доступ к ним с помощью file:///… URL-адреса .
Download 16 Гален рамки и установить it 17 .Гален рамки имеет установочные скрипты для Linux и Mac.Если вы пользователь Windows,, взгляните на __69 | Настройка Гален Framework для Windows __37 | 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 таблица, содержащая параметры для трех размеров экрана.Использование этой таблицы, Гален рамки вызовет наш тест три раза, каждый раз с разными device 33 ~ и | параметры.Мы также определили заполнитель для 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
}
Вот оно — мы сделали с кодом!Вы можете проверить, является ливсе, что вы сделали такой же, как в repository 22 .Теперь мы можем запустить тесты и убедитесь, что мы сделали все, что хорошо для этой итерации .