[ad_1]
Эта статья впервые появилась в номере 240 журнала .net — самого продаваемого в мире журнала для веб-дизайнеров и разработчиков.
Когда у вас есть небольшой статичный одностраничный веб-сайт, вы думаете, что легко заметите что-то не так с макетом или дизайном. Возможно, двухстраничный микросайт все еще будет в порядке. Добавьте пару состояний наведения, и это, вероятно, тоже хорошо. Продолжайте добавлять вещи, продолжайте строить, и, прежде чем вы это узнаете, вы получите многостраничный сайт с блестящим отзывчивым дизайном, тонкими состояниями наведения и отличным вертикальным ритмом. Идеально. Все еще уверены, что не заметили ничего плохого? На любой странице?
Поскольку веб-сайты, которые мы разрабатываем, становятся все больше и сложнее, нам нужно все больше и больше полагаться на тестирование. Автоматизированное тестирование — это именно то, о чем можно догадаться из названия. Вместо того, чтобы разработчик или QA проверяли список предварительно определенных действий на веб-сайте, чтобы убедиться, что все работает должным образом, вместо этого у вас есть автоматизированная система, которая запускает тесты.
Все аспекты веб-разработки могут выиграть от автоматизированного тестирования, и одного лишь количества сред тестирования, доступных только для JavaScript, достаточно, чтобы показать, насколько это важно. К сожалению, в отличие от JavaScript, количество инструментов для тестирования CSS ограничено. Причина в том, что CSS сложно тестировать, потому что он не управляется инструкциями, как JavaScript или PHP. Не отчаивайтесь, я не говорил, что это невозможно. Ниже я рассмотрю несколько областей, которые можно протестировать, упомяну некоторые инструменты, которые можно использовать, и приведу несколько примеров их использования.
Проверка синтаксиса
Это кажется такой тривиальной вещью, но, когда вы столкнулись со случаем слепоты к коду, удобно иметь что-то, чтобы указать на это. дисплей: блок не является настоящим правилом CSS, даже если оно должно им быть. Большинство редакторов кода обеспечивают встроенную проверку синтаксиса (либо встроенную, либо через устанавливаемый плагин), но если вы хотите по-настоящему автоматизировать это, вам нужно иметь возможность запускать ее в командной строке. Для этого мы обратимся к, вероятно, самому известному инструменту тестирования CSS, CSS Lint, потому что, помимо всего прочего, он также обеспечивает проверку синтаксиса командной строки.
CSS-ворс
Самый простой способ установить его — как глобальный модуль Node.js. Если в вашей системе есть Node.js и диспетчер пакетов Node (NPM), просто запустите это в командной строке:
$ npm install -g csslintЗатем все, что вам нужно сделать, чтобы проверить свой CSS, — это указать CSS Lint, где искать:
$ csslint [site folder]/styles/*.cssВот пример файла и вывод CSS Lint:
body {
color: #red; background:white;
}
1: error at line 2, col 9 Expected a hex color but found '#red' at line 2, col 9.
color:#red;CSS Lint — довольно противоречивый инструмент. Вы либо любите его, либо ненавидите, в зависимости от вашего мнения об объектно-ориентированном CSS. Однако важно помнить, что он полностью настраиваемый. Даже если вы никогда не захотите использовать какое-либо из предоставляемых им правил линтинга, вы все равно можете извлечь выгоду из проверки синтаксиса. Подробные инструкции читайте здесь.
Различия изображений
Большинство инструментов тестирования CSS сосредоточены на одном из двух основных доступных методов. Первым из них является сравнение различий изображений. Тесты сравнения изображений, по сути, точно повторяют то, что разработчик сделал бы, проверяя изменения на веб-сайте, просматривая их. Когда вы заканчиваете делать свою страницу в первый раз, вы делаете ее скриншот.
После каждого изменения, будь то на этой странице или на другой, вы делаете еще один снимок экрана и сравниваете их. Если они одинаковые, то все хорошо. Если есть разница, вы проверяете ближе, чтобы увидеть, является ли это чем-то ожидаемым, или же стиль мошенников вышел за рамки. Эти инструменты автоматизируют этот процесс, управляя созданием снимков экрана, сравнением версий и просто давая вам одобрение или отрицание.
ФантомCSS
Еще один инструмент для тестирования CSS создан Джеймсом Крайером и построен на основе чрезвычайно мощного проекта PhantomJS. То, что предоставляет PhantomJS, — это версия WebKit, которая может запускаться из командной строки и управляться через JavaScript — не только обычный внутристраничный JavaScript, такой как «открыть окно с предупреждением», но и управление на уровне браузера, такое как «Открыть новую вкладку, перейти на www.netmagazine.com, нажмите на ссылку учебника». PhantomCSS использует это для тестирования различий изображений. Между PhantomCSS и PhantomJS на самом деле есть еще один слой, предназначенный для упрощения или усложнения вещей, в зависимости от вашей точки зрения. Этот уровень — CasperJS, уровень абстракции и инструмент тестирования, который находится поверх PhantomJS. К счастью, он поставляется в комплекте с PhantomCSS.
Начиная
Мы собираемся написать простой тест сравнения изображений, который проверяет, как страница выглядит так, как мы ожидаем, когда взаимодействуем с ней. Чтобы начать работу, загрузите учебные файлы или получите последнюю версию PhantomCSS с GitHub. После того, как вы установили PhantomJS и загрузили PhantomCSS, PhantomCSS/демо/testsuite.js файл является хорошим местом для начала.
Демонстрационный файл по умолчанию показывает наиболее важные функции:
casper.start('http://localhost:8080/')
.then( function (){ css.screenshot('body'); } )
.then( function (){ casper.page.sendEvent('click', 10, 10); } )
.then( function (){ css.screenshot('body'); } )
.then( function (){ css.compareAll(); } )
.run( function (){ phantom.exit(css.getExitStatus()); });Сначала мы начинаем с загрузки страницы, которую хотим протестировать, затем делаем снимок экрана, затем взаимодействуем со страницей (например, нажимаем на ссылку), затем делаем еще один снимок экрана, затем мы сравниваем снимки экрана со всеми, сделанными в предыдущих тестовых запусках, и, наконец, заканчиваем. .
При первом запуске мы получаем сообщение о том, что нет предыдущих примеров для сравнения. Из командной строки запустите:
$ phantomjs demo/testsuite.js Must be your first time? Some screenshots have been generated in the directory ./screenshotsОткрой PhantomCSS/скриншоты/ директорию для просмотра сохраненных скриншотов. Запустите тот же тест еще раз, и, поскольку у нас есть эталонные изображения, все пройдет успешно:
$ phantomjs demo/testsuite.js PhantomCSS found: 2 tests.
None of them failed. Which is good right?Теперь каждый раз, когда мы вносим изменения в стили проекта, мы можем запускать одни и те же тесты и быть уверенными, что пока они проходят, все выглядит одинаково. Если они терпят неудачу, мы можем проверить, что единственная разница заключается в том, что мы только что изменили — предсказуемая разница. Если это так, мы удаляем старые тестовые случаи, генерируем новые и продолжаем, как и раньше.
Но что произойдет, если наш коллега случайно заменит все вхождения слова «розовый» в нашем проекте на слово «доска»?
Измените стили в PhantomCSS/demo/testpage.html включить это:
border: 2px solid hotplank; color: hotplank;Теперь снова запустите тот же тест:
$ phantomjs demo/testsuite.js
PhantomCSS found: 2 tests. 2 of them failed.В прежние времена, когда у нас не было всего этого классного автоматизированного тестирования CSS, мы, возможно, пропустили это. Слава богу за технику. Мы избавляемся от случайных «досок», и день спасен.
Также важно отметить, что мы не ограничиваемся тестированием локальных файлов. Если мы изменим начало теста на загрузку с полного URL-адреса, мы также сможем убедиться, что наш производственный код ведет себя корректно. Попробуйте изменить тест, чтобы увидеть сгенерированный снимок экрана.
casper.start('http://csste.st/')В области сравнения изображений есть еще несколько инструментов, но здесь я упомяну еще об одном. CSSCritic Кристофа Бургмера немного легче освоить, чем PhantomCSS, если вы новичок в автоматизированном тестировании, особенно если вы работаете с локальными шаблонами. Этот проект не имеет дополнительных зависимостей; это просто файл HTML, который вы открываете в веб-браузере Firefox. (Примечание: CSSCritic на данный момент работает только в Firefox.)
Откройте файл CSSCritic/example/RegressionRunner.html чтобы увидеть стандартный тестовый пример.
window.onload = function() {
csscritic.addReporter(csscritic.BasicHTMLReporter());
csscritic.compare('pageUnderTest.html');
};Это, как и в случае с PhantomCSS, создаст эталонные изображения при первом запуске, открыв его в браузере. Запустите его снова сейчас, и pageUnderTest. html тест будет автоматически пройден. Однако, если произойдет непредвиденное и незаметное изменение, тест сообщит вам об этом ярко-красным фоном и изображением, показывающим ошибку.
В этом случае цвет фона изменяется, и сгенерированное изображение показывает точную разницу в пикселях между предыдущей версией и текущей.
У CSSCritic есть ограничение, заключающееся в том, что его нужно запускать в том же домене, что и файлы, которые он тестирует, но он очень ясно показывает, что он делает и в чем заключаются проблемы.
Замороженный DOM и вычисляемые стили
Второй основной метод, доступный для тестирования CSS, — это сравнение Frozen DOM. Как и раньше, вы создаете свою страницу или шаблон и заставляете его выглядеть именно так, как вы хотите. Однако на этот раз вместо снимка экрана в качестве будущей точки отсчета вы используете JavaScript для измерения того, какие стили применяются к элементам, которые вы хотите протестировать. Этот объект JavaScript становится вашим тестовым примером. Когда вы вносите изменения в CSS, вы снова измеряете стили, применяемые к этому элементу, и сравниваете их с ожидаемыми.
Инструментов для такого рода тестирования меньше, но некоторые варианты все же есть.
Призрачная история
Проект Ghost Story призван облегчить разработчикам создание файлов историй в стиле Cucumber для тестирования CSS. Cucumber — это технология, позволяющая писать тестовые примеры в виде простых текстовых файлов, которыми можно делиться между всеми, кто участвует в проекте — разработчиками, дизайнерами, владельцами продукта — чтобы все были согласны с тем, что делается. GhostStory объединяет Node.js, PhantomJS, CasperJS и SpookyJS, чтобы обеспечить интерфейс между этими тестовыми файлами и тестированием Frozen DOM.
Самый простой способ установить GhostStory — установить эту версию SpookyJS, в которую GhostStory интегрирован из командной строки с помощью Git:
$ git clone --recursive https://github.com/thingsinjars/SpookyJSЭто не только установит SpookyJS, но и шаги GhostStory и PhantomCSS (упомянутые выше). PhantomCSS включен, потому что GhostStory также можно использовать для проверки Cucumber на сравнение изображений.
После этого вам нужно будет обновить зависимости модуля Node:
$ cd SpookyJS/ $ npm installПример проекта доступен при запуске:
$ make ghostКак и в случае с PhantomCSS, самый простой способ познакомиться — изменить тестовый пример. Откройте папку GhostStory и посмотрите на файл css.feature. Содержимое такое же, как и в командной строке после запуска предыдущего сделать призрак команда:
Scenario: Frozen DOM test Given I go to "/index.html" Then the "Main title" should have "font size" of "32px" And the "Main title" should have "color" of "rgb(0, 0, 0)" And run
Scenario: Image Diff Test Given I go to "/1.html" Then the "Page body" should look the same And runСначала мы указываем страницу для тестирования (Учитывая, что я иду в). Эта страница может быть локальным шаблоном или удаленным URL-адресом. SpookyJS имеет встроенный сервер, облегчающий тестирование локальных файлов, поэтому тестируемый нами index.html находится в SpookyJS/тесты/фикстуры/index.html.
После строки Given мы перечисляем свойства CSS, которые мы измерили в нашем исходном, завершенном шаблоне, которые мы ожидаем найти в нашем недавно обновленном. Опять же, если со страницей все в порядке, нам об этом не сообщают, и наша автоматизированная система сборки просто переходит к следующему этапу.
Если вы измените CSS index.html файл, вы можете увидеть результат неудачного теста:
(::) failed steps (::) Failed: Main title should have color of "rgb(0, 0, 0)" (measured: rgb(255, 0, 0))Чтобы протестировать стили, применяемые к живому удаленному веб-сайту, мы могли бы изменить Данный линия к:
Given I go to "http://csste.st/"Зачем вообще автоматизировать тесты?
Если вы не проверяете каждый аспект каждой страницы каждый раз, когда вносятся изменения, гарантировано, что в конечном итоге кто-то напишет стиль, который перезапишет что-то на веб-сайте. Это именно та ситуация, для которой отлично подходит автоматизированное тестирование. Вы можете настроить систему для запуска тестов за вас, и она будет делать это каждый раз, и вам не будет скучно. Если вы тестируете свои проекты, у вас есть место для ошибок. Однако, если вы автоматизируете свои тесты, у вас будет больше времени на совершение этих ошибок и больше времени на их исправление.
Саймон Мэдин (откроется в новой вкладке) является старшим веб-разработчиком и евангелистом.
[ad_2]
