Upload
takeharu-igari
View
900
Download
0
Embed Size (px)
Citation preview
E2E CSS Testing
Igari Takeharu
Lightning Talk Session of HTML5 Conference at
Igari TakeharuFront End Architect
works for Lei Hauoli Co., Ltd.
UI
Contributing
Slide
CSS
CSS1.
2. W3CCSS
3.
CSS1.
2. W3CCSS
3.
w
SUPERGOD
w
SUPERGOD
Web/
E2E
Selenium2
CSSE2E
CSSE2E
Style Validator
Chrome
HTML/CSS
JSMQ
1. DOMstyle
DOM
2. document.styleSheetsDOM x
3.
4.
Selenium2
Media QueryBP
Reference
Chrome
2. Anonymous - DOM changed
1. Visit Top Page
3. Visit Movie List Page
Revision Timeline (max-width: 1600px), (max-width: 1400px)
2016.09.23 21:39:44
2016.09.23 21:55:42
2016.09.23 22:30:43
Screenshot Mode
Console Mode
2. Anonymous - DOM changed
1. Visit Top Page
Revision Timeline (max-width: 1600px), (max-width: 1400px)
2016.09.23 21:39:44
2016.09.23 21:55:42
Screenshot Mode
Console Mode
Selenium2
BackstopJS
Media QueryBP
BreakPoint
document.styleSheets[0].cssRules[0].media.mediaText
(max-width: 640px)
BP
Chrome
WIN / MAC
Android / iOS
Reference
BackstopJSUI
wallabyjs
NavigationTimingAPI
TrackJSJS
E2E
Chrome Web Store
Github
/ Contributor /