-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathvisualcss-regression-testing-catching-unintended-consequences-modifying-your-theme.html
169 lines (123 loc) · 18 KB
/
visualcss-regression-testing-catching-unintended-consequences-modifying-your-theme.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<!--[if IEMobile 7]><html class="iem7" lang="en" dir="ltr"><![endif]-->
<!--[if lte IE 6]><html class="lt-ie9 lt-ie8 lt-ie7" lang="en" dir="ltr"><![endif]-->
<!--[if (IE 7)&(!IEMobile)]><html class="lt-ie9 lt-ie8" lang="en" dir="ltr"><![endif]-->
<!--[if IE 8]><html class="lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if (gte IE 9)|(gt IEMobile 7)]><!--><html lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="../sites/all/themes/sitetheme/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="description" content="Have you ever spent hours poring over a web application when making changes to the theme, looking for the consequences of CSS style rules that are too broad? Ever made changes to a client's website, only to find out the theming for the newly designed front page totally screwed up the formatting on the product pricing page -- after you deployed the changes?You are not alone." />
<meta name="generator" content="Drupal 7 (http://drupal.org)" />
<link rel="canonical" href="../node/65.html" />
<link rel="shortlink" href="../node/65.html" />
<title>Visual/CSS Regression Testing -- Catching the "unintended consequences" of modifying your theme | MidCamp</title>
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<!-- <a href="https://plus.google.com/105676072717448976925" rel="publisher" /> -->
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_lQaZfjVpwP_oGNqdtWCSpJT1EMqXdMiU84ekLLxQnc4.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_Lwq5JSI1tGRjp1FRNxg5kt8fOiI4e0flzM6YeUq78u8.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_atkFGFlvG6sSQcIj6Q73rpgsXhtr58AwITc2aQjVotk.css" media="all" />
<link type="text/css" rel="stylesheet" href="../sites/default/files/css/css_GSl0KrVrOmPGyWhvCYT4-PlK0I1rEce-UTDdvd4mKho.css" media="all" />
<script src="../sites/default/files/js/js_vDrW3Ry_4gtSYaLsh77lWhWjIC6ml2QNkcfvfP5CVFs.js"></script>
<script src="../sites/default/files/js/js_6RfqyQ6dGB15EZV8a7SPpd5EOSSerQR7s-GxPVyVTqA.js"></script>
<script src="../sites/default/files/js/js_I8yX6RYPZb7AtMcDUA3QKDZqVkvEn35ED11_1i7vVpc.js.html"></script>
<script>(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create", "UA-60086119-1", {"cookieDomain":".2015.midcamp.org"});ga("set", "anonymizeIp", true);ga("send", "pageview");</script>
<script>jQuery.extend(Drupal.settings, {"basePath":"\/","pathPrefix":"","ajaxPageState":{"theme":"sitetheme","theme_token":"s-c33Y4Dw6HFgo0KS-dWV-gmoduHR5db4B5tZ9aK8sQ","js":{"sites\/all\/themes\/sitetheme\/js\/script.js":1,"sites\/all\/themes\/sitetheme\/js\/google_fonts.js":1,"misc\/jquery.js":1,"misc\/jquery.once.js":1,"misc\/drupal.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/tinycon.min.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.js":1,"sites\/all\/modules\/contrib\/environment_indicator\/color.js":1,"sites\/all\/modules\/contrib\/google_analytics\/googleanalytics.js":1,"0":1},"css":{"modules\/system\/system.base.css":1,"modules\/system\/system.menus.css":1,"modules\/system\/system.messages.css":1,"modules\/system\/system.theme.css":1,"sites\/all\/modules\/contrib\/date\/date_api\/date.css":1,"sites\/all\/modules\/contrib\/date\/date_popup\/themes\/datepicker.1.7.css":1,"sites\/all\/modules\/contrib\/environment_indicator\/environment_indicator.css":1,"modules\/field\/theme\/field.css":1,"modules\/node\/node.css":1,"modules\/user\/user.css":1,"sites\/all\/modules\/contrib\/youtube\/css\/youtube.css":1,"sites\/all\/modules\/contrib\/views\/css\/views.css":1,"sites\/all\/modules\/contrib\/ctools\/css\/ctools.css":1,"sites\/all\/modules\/contrib\/panels\/css\/panels.css":1,"sites\/all\/themes\/sitetheme\/system.menus.css":1,"sites\/all\/themes\/sitetheme\/system.messages.css":1,"sites\/all\/themes\/sitetheme\/system.theme.css":1,"sites\/all\/themes\/sitetheme\/css\/styles.css":1}},"googleanalytics":{"trackOutbound":1,"trackMailto":1,"trackDownload":1,"trackDownloadExtensions":"7z|aac|arc|arj|asf|asx|avi|bin|csv|doc(x|m)?|dot(x|m)?|exe|flv|gif|gz|gzip|hqx|jar|jpe?g|js|mp(2|3|4|e?g)|mov(ie)?|msi|msp|pdf|phps|png|ppt(x|m)?|pot(x|m)?|pps(x|m)?|ppam|sld(x|m)?|thmx|qtm?|ra(m|r)?|sea|sit|tar|tgz|torrent|txt|wav|wma|wmv|wpd|xls(x|m|b)?|xlt(x|m)|xlam|xml|z|zip","trackDomainMode":"1"}});</script>
<!--[if lt IE 9]>
<script src="/sites/all/themes/zen/js/html5-respond.js"></script>
<![endif]-->
</head>
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-65 node-type-session section-session-proposal page-panels" >
<p id="skip-link">
<a href="../node/65.html#main-menu" class="element-invisible element-focusable">Jump to navigation</a>
</p>
<div class="header__top">
<div class="header__region region region-header">
<div id="block-system-user-menu" class="block block-system block-menu first odd" role="navigation">
<h2 class="block__title block-title">User menu</h2>
<ul class="menu"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul>
</div>
<div id="block-block-1" class="block block-block last even">
<p>March 19-22, 2015 at University of Illinois at Chicago (UIC)</p>
</div>
</div>
</div>
<div id="navigation" class="clearfix">
<div class="inner">
<a href="../index.html" title="Home" rel="home" class="logo-mobile">MidCamp</a>
<a class="links--mobile__title ss-icons ss-rows"></a>
<div class="links--mobile__container">
<input type="checkbox" id="toggle-button"><label for="toggle-button" onclick></label>
<div class="menus">
<nav id="user-menu" role="navigation" tabindex="-1"><ul class="menu--user-menu menu links"><li class="menu__item is-leaf first leaf menu__item level-1 menu__item--create-account"><a href="../user/register.html" title="" class="menu__link">Create Account</a></li><li class="menu__item is-leaf last leaf menu__item level-1 menu__item--login"><a href="../user/login.html" title="" class="menu__link">Login</a></li></ul></nav> <nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-expanded first expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/15.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Camp<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/123.html" title="" class="menu__link">Buy Tickets</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/4.html" class="menu__link">Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/101.html" title="Navigating around the venue" class="menu__link">Closer Look at the Venue</a></li><li class="menu__item is-leaf leaf level-2"><a href="../about/news.html" class="menu__link">News</a></li><li class="menu__item is-expanded expanded level-2"><a href="../community.1.html" class="menu__link">Community</a><nav id="main-menu" role="navigation" tabindex="-1"><ul class="menu--main-menu menu links"><li class="menu__item is-leaf first last leaf menu-item level-3"><a href="../community/all.html" class="menu__link">Community</a></li></ul></nav></li><li class="menu__item is-leaf leaf level-2"><a href="../node/158.html" class="menu__link">Speaker Resources</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/178.html" class="menu__link">Nearby Restaurants</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../node/58.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Schedule<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../schedule/friday.html" title="" class="menu__link">Friday schedule</a></li><li class="menu__item is-leaf leaf level-2"><a href="../schedule/saturday.html" title="" class="menu__link">Saturday schedule</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../sessions.html" title="" class="menu__link">Filterable Sessions</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../trainings.html" title="" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Training Day<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first leaf level-2"><a href="../node/145.html" class="menu__link">Absolute Beginners Guide to Drupal</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/139.html" class="menu__link">Behavior Driven Development with Behat</a></li><li class="menu__item is-leaf leaf level-2"><a href="../node/140.html" class="menu__link">Build. Launch. Run.</a></li><li class="menu__item is-leaf last leaf level-2"><a href="../node/141.html" class="menu__link">Intro to Drupal 7 Module Development</a></li></ul></li><li class="menu__item is-expanded expanded dropdown menu-item level-1"><input type="checkbox" /><a href="../sponsors.html" class="menu__link" data-toggle="dropdown" aria-haspopup="true">Sponsors<i class="icon theme-icon-arrow-down"></i></a><ul class="menu--main-menu_sub dropdown-menu menu"><li class="menu__item is-leaf first last leaf level-2"><a href="../node/1.html" class="menu__link">Become a Sponsor</a></li></ul></li><li class="menu__item is-leaf last leaf menu-item level-1"><a href="../jobs.html" class="menu__link">Jobs</a></li></ul></nav></div>
</div>
</div>
</div>
<div class="header-wrapper">
<header class="header__region" id="header" role="banner">
<div class="header__badge">
<a href="../index.html" title="Home" rel="home" class="header__logo" id="logo"><img src="../sites/all/themes/sitetheme/logo.png" alt="Home" class="header__logo-image" /></a>
<div class="header__name-and-slogan" id="name-and-slogan">
<h1 class="header__site-name" id="site-name">
<a href="../index.html" title="Home" class="header__site-link" rel="home"><span>MidCamp</span></a>
</h1>
<h1 class="page__title title session__title" id="page-title">Visual/CSS Regression Testing -- Catching the "unintended consequences" of modifying your theme</h1>
</div>
</div>
</header>
</div>
<div id="page">
<div id="main">
<div id="content" class="column session-detail" role="main">
<nav class="breadcrumb" role="navigation"><h2 class="element-invisible">You are here</h2><ol><li><a href="../index.html">Home</a></li></ol></nav> <a id="main-content"></a>
<article class="node-65 node node-session view-mode-full node--session__full clearfix">
<div class="field field-name-field-speakers field-type-entityreference field-label-inline clearfix"><div class="field-label">Speakers: </div><div class="field-items"><div class="field-item even">Lhridley</div></div></div><div class="field field-name-field-track field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Track: </div><div class="field-items"><div class="field-item even">Coding</div><div class="field-item odd">Front End</div></div></div><div class="field field-name-field-audience field-type-taxonomy-term-reference field-label-inline clearfix"><div class="field-label">Audience: </div><div class="field-items"><div class="field-item even">Intermediate</div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>Have you ever spent hours poring over a web application when making changes to the theme, looking for the consequences of CSS style rules that are too broad? Ever made changes to a client's website, only to find out the theming for the newly designed front page totally screwed up the formatting on the product pricing page -- after you deployed the changes?</p><p>You are not alone.</p><p>Manual testing of user interfaces for visual and style components is a tedious and time consuming process, and by very nature introduces the human error aspect to web application QA review. While tools such as Behat have made testing certain aspects of the user interface less tedious, and have removed some of the "human error" aspect from the process, Behat doesn't provide the capability of testing the "layout" of site changes for those unintended consequences of misapplied HTML, CSS or Javascript.</p><p>Enter PhantomCSS -- a framework for conducting automated visual regression testing for websites. In this session we'll cover:</p><ul><li>What is PhantomCSS?</li><li>System Requirements for PhantomCSS</li><li>Skillset Requirements to write test suites for PhantomCSS</li><li>How can I use PhantomCSS to improve my QA process?</li><li>Live demonstration of a PhantomCSS test suite, including a review of the output of test results</li></ul></div></div></div><div class="field field-name-field-length field-type-list-text field-label-inline clearfix"><div class="field-label">Length: </div><div class="field-items"><div class="field-item even">50 minutes</div></div></div><div class="field field-name-field-slides-url field-type-link-field field-label-hidden"><div class="field-items"><div class="field-item even"><a href="http://www.slideshare.net/lhridley/visual-cssregressiontestingwithphantom-css">Slides</a></div></div></div><div class="field field-name-field-related-content field-type-link-field field-label-above"><div class="field-label">Related Content: </div><div class="field-items"><div class="field-item even"><a href="http://github.com/Huddle/PhantomCSS">PhantomCSS Project on GitHub</a></div><div class="field-item odd"><a href="http://casperjs.readthedocs.org">CasperJS Documentation</a></div><div class="field-item even"><a href="http://phantomjs.org/documentation/">PhantomJS Documentation</a></div><div class="field-item odd"><a href="https://joind.in/talk/view/13824">Please provide feedback via joind.in</a></div></div></div><div class="field field-name-field-session-video field-type-youtube field-label-above"><div class="field-label">Session video: </div><div class="field-items"><div class="field-item even"><iframe id="youtube-field-player" class="youtube-field-player"
width="420" height="315"
src="https://www.youtube.com/embed/WtJwqqLdSkY?wmode=opaque" title="Embedded video for Visual/CSS Regression Testing -- Catching the "unintended consequences" of modifying your theme" frameborder="0"
allowfullscreen></iframe></div></div></div>
</article>
</div>
</div>
</div>
<div class="footer-wrapper">
<footer id="footer" class="footer__region region region-footer">
<div id="block-menu-menu-footer-navigation" class="block block-menu first odd" role="navigation">
<div class="block-inner">
<ul class="menu__footer-navigation links inline inline-links"><li class="menu__item is-leaf first leaf"><a href="../node/2.html" title="" class="menu__link">Code of Conduct</a></li>
<li class="menu__item is-leaf leaf"><a href="https://twitter.com/MidwestCamp" title="" class="menu__link">Twitter</a></li>
<li class="menu__item is-leaf leaf"><a href="https://www.facebook.com/MidCamp" title="" class="menu__link">Facebook</a></li>
<li class="menu__item is-leaf leaf"><a href="https://plus.google.com/+MidCampOrg" title="" class="menu__link">Google+</a></li>
<li class="menu__item is-leaf last leaf"><a href="https://twitter.com/search?f=realtime&q=%23MidCamp&src=typd" title="" class="menu__link">#MidCamp</a></li>
</ul>
</div>
</div>
<div id="block-views-random-sponsor-gold" class="block block-views even">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-gold view-dom-id-6443217245dc3444e44054748b43bb13">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/136.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/palantir-logo.png%3Fitok=9XecObJn" width="371" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Gold Sponsor!</h2>
</div>
</div>
<div id="block-views-random-sponsor-silver" class="block block-views last odd">
<div class="block-inner">
<div class="view view-random-sponsor view-id-random_sponsor view-display-id-silver view-dom-id-f69eb7d702c5bcaa88df0fba18b2f299">
<div class="view-content">
<div class="views-row views-row-1 views-row-odd views-row-first views-row-last">
<div class="views-field views-field-field-image"> <div class="field-content"><a href="../node/129.html"><img src="../sites/default/files/styles/sponsor_footer/public/sponsors/duo_logo.png%3Fitok=QZkdcREg" width="207" height="60" alt="" /></a></div> </div> </div>
</div>
</div>
<h2 class="block__title block-title">Is a Silver Sponsor!</h2>
</div>
</div>
</footer>
</div>
<script src="../sites/default/files/js/js_vVlWfsDgq27ypN6KJTygzAqN1nk0JW5lt4sp7W4x0VY.js"></script>
</body>
</html>