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 /