css regression tests with webdrivercss

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?