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.

1.
CSS Regression Tests with WebdriverCSS
Christian Bromann (@bromann)
Berlin, 17.07.2014

2. ||© p i x e l p a r k
Person
2
▪ Christian Bromann
▪ Studying Computer Science @ TU Berlin
▪ Frontend Developer / Test Engineer @pixelpark
@bromann

3. ||© p i x e l p a r k
CSS Regression Tests
3@bromann

4. ||© p i x e l p a r k
CSS Regression Tests
3@bromann

5. ||© p i x e l p a r k
What is Regression Testing?
4@bromann

6. ||© p i x e l p a r k
Imagine …
5@bromann

7. ||© p i x e l p a r k
Imagine …
5@bromann

8. ||© p i x e l p a r k
Imagine …
5@bromann

9. ||© p i x e l p a r k
Imagine …
5
+
@bromann

10. ||© p i x e l p a r k
Imagine …
5
+ +
@bromann

11. ||© p i x e l p a r k
Imagine …
6@bromann

12. ||© p i x e l p a r k
Imagine …
6
* *15 4 3
@bromann

13. ||© p i x e l p a r k
Imagine …
6
=180
@bromann

14. ||© p i x e l p a r k
Automation is Everything!
7@bromann

15. ||© p i x e l p a r k 8@bromann

16. ||© p i x e l p a r k
#1
9
CSS Regression Tests with all kinds of
different browser/devices
@bromann

17. ||© 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

18. ||© p i x e l p a r k
#3
11
Synchronise Screenshots with Peers
@bromann

19. ||© p i x e l p a r k 12@bromann

20. ||© p i x e l p a r k
Check it out!
13@bromann
http://webdriver.io
https://github.com/webdriverio/webdrivercss-adminpanel
https://github.com/webdriverio/webdrivercss

21. Thank you!!!
Questions?