Software Testing

Legacy Code

Problem

Does this accurately describe a Rick-roll?

How about this?

Visual Checks Matter!

Types of CSS Testing There are four different categories of CSS testing: Syntax Did you literally make mistakes in your CSS? Project Does this CSS meet the standards you set? Reference Does the rendered page look as you expect it to? Cross-browser as well. Regression After actions are performed, does the page look as you expect it to?

Tools Here, we'll list all the known tools, browser extensions and services. Command-line enabled Cactus CSSCritic cssert CSSLint Fighting Layout Bugs GhostStory Hardy Huxley MinCSS Mogotest Needle PhantomCSS Wraith Grunt-Photobox Manual testing tools CSSCritic CSSunit CSS Test

Tools Here, we'll list all the known tools, browser extensions and services. Command-line enabled Cactus CSSCritic cssert CSSLint Fighting Layout Bugs GhostStory Hardy Huxley MinCSS Mogotest Needle PhantomCSS Wraith Grunt-Photobox Manual testing tools CSSCritic CSSunit CSS Test Syntax Project Reference Regression

Tools Here, we'll list all the known tools, browser extensions and services. Command-line enabled Cactus CSSCritic cssert CSSLint Fighting Layout Bugs GhostStory Hardy Huxley MinCSS Mogotest Needle PhantomCSS Wraith Grunt-Photobox Manual testing tools CSSCritic CSSunit CSS Test Syntax Project Reference Regression

Tools Here, we'll list all the known tools, browser extensions and services. Command-line enabled Cactus CSSCritic cssert CSSLint Fighting Layout Bugs GhostStory Hardy Huxley MinCSS Mogotest Needle PhantomCSS Wraith Grunt-Photobox Manual testing tools CSSCritic CSSunit CSS Test Syntax Project Reference Regression

Tools Here, we'll list all the known tools, browser extensions and services. Command-line enabled Cactus CSSCritic cssert CSSLint Fighting Layout Bugs GhostStory Hardy Huxley MinCSS Mogotest Needle PhantomCSS Wraith Grunt-Photobox Manual testing tools CSSCritic CSSunit CSS Test Syntax Project Reference Regression

Techniques Frozen DOM With Frozen DOM tests, the idea is to take a snapshot of the DOM structure of the page you wish to test and the styles that are currently applied to those DOM elements. Image Diff When you are happy your page looks how it should, take a screenshot. Whenever a new change is made anywhere in the project, take another screenshot and compare the differences. If there are none, everything looks how it should, if there are differences, something broke.