css regression tests with webdrivercss
DESCRIPTION
When developing big web applications it gets unfeasible to have an eye on all visual bugs that can come up due to for example too unspecific CSS selectors in your stylesheets. In my talk I am going to give you a short introduction in how to use WebdriverCSS to tackle this problem and how you could use it in your company today.TRANSCRIPT
CSS Regression Tests with WebdriverCSSChristian Bromann (@bromann)
Berlin, 17.07.2014
||© p i x e l p a r k
Person
2
▪ Christian Bromann
▪ Studying Computer Science @ TU Berlin
▪ Frontend Developer / Test Engineer @pixelpark
@bromann
||© p i x e l p a r k
CSS Regression Tests
3 @bromann
||© p i x e l p a r k
CSS Regression Tests
3 @bromann
||© p i x e l p a r k
What is Regression Testing?
4 @bromann
||© p i x e l p a r k
Imagine …
5 @bromann
||© p i x e l p a r k
Imagine …
5 @bromann
||© p i x e l p a r k
Imagine …
5 @bromann
||© p i x e l p a r k
Imagine …
5
+
@bromann
||© p i x e l p a r k
Imagine …
5
+ +
@bromann
||© p i x e l p a r k
Imagine …
6 @bromann
||© p i x e l p a r k
Imagine …
6
* *15 4 3
@bromann
||© p i x e l p a r k
Imagine …
6
=180 @bromann
||© p i x e l p a r k
Automation is Everything!
7 @bromann
||© p i x e l p a r k 8 @bromann
||© p i x e l p a r k
#1
9
CSS Regression Tests with all kinds of different browser/devices
@bromann
||© p i x e l p a r k
#2
10
Include several screen resolutions
header.960px.current.png
header.640px.current.png header.320px.current.png
@bromann
||© p i x e l p a r k
#3
11
Synchronise Screenshots with Peers
@bromann
||© p i x e l p a r k 12 @bromann
||© p i x e l p a r k
Check it out!
13 @bromann
http://webdriver.io
https://github.com/webdriverio/webdrivercss-adminpanelhttps://github.com/webdriverio/webdrivercss
Thank you!!!Questions?