Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.

1. E2E CSS Testing
〜～「お・も・て・な・し」をフロントエンドエンジニアにも〜～
Igari Takeharu
Lightning Talk Session of HTML5 Conference
at 東京電機⼤大学

2. Igari
Takeharu
Front End Architect
works for Lei Hauʼ’oli Co., Ltd.
フロントエンドエンジニア８年年⽣生
※⾼高速化とかUIが好き

3. Contributing

4. Slide

5. CSS⾟辛いですか？

6. ですよね∼。。

7. CSSが⾟辛い理理由
1. スコープがない
→常に把握できないほど多くの範囲に影響する
2. バリデータ意味ない
→現場じゃW3CのCSSバリデータも意味ない
3. ブラウザ毎に挙動違うから⽬目視テストしかない
→⽬目が、、⽬目がぁあああああ、疲れるし無理理。

8. CSSが⾟辛い理理由
1. スコープがない
→常に把握できないほど多くの範囲に影響する
2. バリデータ意味ない
→現場じゃW3CのCSSバリデータも意味ない
3. ブラウザ毎に挙動違うから⽬目視テストしかない
→全デバイス、全パターンのテストなんて無理理

9. 今どう解決しているか
• テストしない
→ ダメw
• 良良いコードを書く感じで頑張る
→ ふわっとしてる・・・
• テスト会社とか⼈人海戦術的にお⾦金金で解決しようと頑張る
→ 結局コストも時間もめちゃかかる
• SUPERフロントエンドエンジニアGODを雇う
→ そんな⼈人あんまりいないし、属⼈人化はさけたい

10. 今どう解決しているか
• テストしない
→ 良良くはないw
• 良良いコードを書く感じで頑張る
→ ふわっとしてる・・・
• テスト会社とか⼈人海戦術的にお⾦金金で解決しようと頑張る
→ 結局コストも時間もめちゃかかる
• SUPERフロントエンドエンジニアGODを雇う
→ そんな⼈人あんまりいないし、属⼈人化はさけたい

11. うん全然解決してない

12. これからのWebアプリ/サイト
は、システムによって品質管理理
していく時代

13. そこで巷で噂のE2Eテスト
• Selenium2というブラウザを外部から操作する仕
組みで可能になる
• ページ表⽰示はもちろん、アコーディオン開くとか、
操作⼿手順を、テストコードで設定できる
• できれば、リアルブラウザが良良い

14. CSSのE2Eテストする
ツールをつくった

15. CSSのE2Eテストする
ツールをつくり中

16. Style Validator
• 今はChrome拡張のみ
• 描画後のHTML/CSSを検証
• バリデートルールをカスタマ
イズできる
• JSやMQによる変更更も追跡して
検証

17. 仕組み
1. DOMのstyleプロパティを調
べる（DOM数）
2. document.styleSheetsを調
べる（DOM数 x セレクタ数）
3. 最終適⽤用スタイルを算出
4. それを基に、ルールファイル
を⽤用いてバリデート

18. コンソール

19. ルール編集ページ

20. ロードマップ
• 結果ページのリッチ化、ビジュアライズ化
• シナリオファイルによる⾃自動テスト（Selenium2）
• Media Queryを検出して、全てのBP毎に⾃自動テスト
• Referenceキャプチャとの差分画像⽣生成機能実装
• Chrome以外のブラウザ達にも対応
• テスト結果やセレクタの影響範囲をエディタ側で理理解できるプ
ラグイン

21. 結果ページのリッチ化、
ビジュアライズ化

22. 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

23. 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

24. シナリオファイルによる
⾃自動テスト（Selenium2）

25. ※BackstopJSの
シナリオファイル

26. Media Queryを検出して、
全てのBP毎に⾃自動テスト

27. それぞれのBreakPoint毎にテスト
document.styleSheets[0].cssRules[0].media.mediaText
ここに(max-‐‑‒width: 640px)とかが⼊入ってくるから、
予めあらって、BP毎に⾃自動テストできるようにする

28. Chrome以外の
ブラウザ達にも対応

29. WIN / MAC
Android / iOS

30. Referenceキャプチャと
の差分画像⽣生成機能実装

31. BackstopJSみたいにしたい
差分画像のレポートUI

32. テスト結果や
セレクタの影響範囲を
エディタ側で
理理解できるプラグイン

33. wallabyjsみたいにしたい
ソースコード上のインラインメッセージと
コンソールメッセージ

34. もっと先の⽬目標
• パフォーマンス品質管理理との統合
（たぶんNavigationTimingAPIもつかう）
• TrackJSのようなJSエラー検知ツールとの統合
• ブラウザベンダとの連携？
• ⼀一部有償化

35. 最終的には
簡単に導⼊入できるE2Eテスト
プラットフォームを作りたい

36. 応援お願いします⭐
• Chrome Web Storeで⭐⭐⭐⭐⭐ポチ
• Githubで⭐ポチ
• プルリク歓迎 / Contributor募集 / 仲間募集

37. ご清聴ありがとうございました