Soumettre la recherche
Mettre en ligne
E2E CSS Testing at HTML5 Conference 2016
•
0 j'aime
•
1,531 vues
Takeharu Igari
Suivre
Introduction of CSS Validator with an Idea of a E2E Testing Automation Platform.
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 37
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Takeharu Igari
Recommandé
メンテナブルなJsってなんだろう
メンテナブルなJsってなんだろう
Daiki Matsumoto
今日から使える! HTML/CSS/JSの シンプルテクニック15選
今日から使える! HTML/CSS/JSの シンプルテクニック15選
Horiguchi Seito
ブラウザにやさしいHTML/CSS
ブラウザにやさしいHTML/CSS
Takeharu Igari
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
最近、実務に導入してみたフロントエンドの技術8つの良かった点と反省点
Horiguchi Seito
まだ DOM 操作で消耗してるの?
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Css Architecture for the future 未来を見据えるCSS設計
Css Architecture for the future 未来を見据えるCSS設計
Horiguchi Seito
[Japanese] Style validator-html5etcstudy20151125
[Japanese] Style validator-html5etcstudy20151125
Takeharu Igari
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
141115 making web site
141115 making web site
Himi Sato
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Style Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Youtube Policy Primer
Youtube Policy Primer
ESutton17
Corporate training - Mind Programming - Kushalta Academy
Corporate training - Mind Programming - Kushalta Academy
John Bhatt
Contenu connexe
Tendances
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
Hiroshi Urabe
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
Futomi Hatano
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
Shin Takeuchi
HTML5 & The Web Platform
HTML5 & The Web Platform
Masataka Yakura
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
Maboroshi.inc
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
Masataka Yakura
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
silvers ofsilvers
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
masaaki komori
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Maaya Ishida
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
Takuma Nishiyama
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
React+fluxを導入した話
React+fluxを導入した話
Yuki Ishikawa
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
Seiko Kuchida
141115 making web site
141115 making web site
Himi Sato
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
Style Guide活用のススメ
Style Guide活用のススメ
Shigeki Ohtsuki
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
Fuminori Mori
Tendances
(20)
使いやすいWordPressのためのCSSのつくりかた
使いやすいWordPressのためのCSSのつくりかた
HTML5マークアップの心得と作法
HTML5マークアップの心得と作法
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
現場で使える効果的なHTML&CSS構造設計(Effective HTML&CSS)
HTML5 & The Web Platform
HTML5 & The Web Platform
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSS Nite LP26 CodeKitで始める次世代Web制作
CSS Nite LP26 CodeKitで始める次世代Web制作
タスクランナー導入 〜とあるWordPress制作環境〜
タスクランナー導入 〜とあるWordPress制作環境〜
Web Platform -- Moving Forward!
Web Platform -- Moving Forward!
angular X designer - デザイナからみたAngularJS #ten1club
angular X designer - デザイナからみたAngularJS #ten1club
設計から実装まで、今すぐ始める高速化
設計から実装まで、今すぐ始める高速化
Javaな人が気を付けるべきJavaScriptコーディングスタイル
Javaな人が気を付けるべきJavaScriptコーディングスタイル
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
WordPressで作るポートフォリオサイト
WordPressで作るポートフォリオサイト
なぜ人は必死でjQueryを捨てようとしているのか
なぜ人は必死でjQueryを捨てようとしているのか
React+fluxを導入した話
React+fluxを導入した話
a-sap09「a-blog cmsとWordPress」
a-sap09「a-blog cmsとWordPress」
141115 making web site
141115 making web site
SIROK技術勉強会 #1 「Reactってなんだ?」
SIROK技術勉強会 #1 「Reactってなんだ?」
Style Guide活用のススメ
Style Guide活用のススメ
HTML5での制作、いつから始める?
HTML5での制作、いつから始める?
En vedette
Youtube Policy Primer
Youtube Policy Primer
ESutton17
Corporate training - Mind Programming - Kushalta Academy
Corporate training - Mind Programming - Kushalta Academy
John Bhatt
Jesuitslideshow
Jesuitslideshow
shoddyworksucks
05 framework for entrepreneurship education bahasa indonesia
05 framework for entrepreneurship education bahasa indonesia
imecommunity
Purdue Writing Lab
Purdue Writing Lab
cynthia9109
kansen en knelpunten boven 't Y winkelcentrum Amsterdam-Noord
kansen en knelpunten boven 't Y winkelcentrum Amsterdam-Noord
carlaschroder
Exploring Git in Visual Studio 2013
Exploring Git in Visual Studio 2013
Sunny Sharma
Steel
Steel
imecommunity
Word Clouds and Tag Cloud for Learning
Word Clouds and Tag Cloud for Learning
Damian T. Gordon
Connecting with students
Connecting with students
People's Trust Insurance Company
Cognitivism
Cognitivism
Damian T. Gordon
Constructivism
Constructivism
Damian T. Gordon
Ecosystems And Livelihoods Adaptation Network (Elan)
Ecosystems And Livelihoods Adaptation Network (Elan)
Edward Cameron
Own artist
Own artist
zenmariku
I like it
I like it
SeungHan LEE
Leveraging Feature Selection Within TreeNet
Leveraging Feature Selection Within TreeNet
agdavis
Ei inicio de la vida
Ei inicio de la vida
I.E, N° 113 Daniel Alomia Robles
SAFEGUARDS_MOSCOW_Consultation_With_CSOs_18_March_2013_Summary_ENG
SAFEGUARDS_MOSCOW_Consultation_With_CSOs_18_March_2013_Summary_ENG
Julia Polonskaya
SAFEGUARDS_MOSCOW_Consultation_With_Govt_18_March_2013_Summary_ENG
SAFEGUARDS_MOSCOW_Consultation_With_Govt_18_March_2013_Summary_ENG
Julia Polonskaya
SecurusVault Swiss Data Backup overview
SecurusVault Swiss Data Backup overview
securusvault
En vedette
(20)
Youtube Policy Primer
Youtube Policy Primer
Corporate training - Mind Programming - Kushalta Academy
Corporate training - Mind Programming - Kushalta Academy
Jesuitslideshow
Jesuitslideshow
05 framework for entrepreneurship education bahasa indonesia
05 framework for entrepreneurship education bahasa indonesia
Purdue Writing Lab
Purdue Writing Lab
kansen en knelpunten boven 't Y winkelcentrum Amsterdam-Noord
kansen en knelpunten boven 't Y winkelcentrum Amsterdam-Noord
Exploring Git in Visual Studio 2013
Exploring Git in Visual Studio 2013
Steel
Steel
Word Clouds and Tag Cloud for Learning
Word Clouds and Tag Cloud for Learning
Connecting with students
Connecting with students
Cognitivism
Cognitivism
Constructivism
Constructivism
Ecosystems And Livelihoods Adaptation Network (Elan)
Ecosystems And Livelihoods Adaptation Network (Elan)
Own artist
Own artist
I like it
I like it
Leveraging Feature Selection Within TreeNet
Leveraging Feature Selection Within TreeNet
Ei inicio de la vida
Ei inicio de la vida
SAFEGUARDS_MOSCOW_Consultation_With_CSOs_18_March_2013_Summary_ENG
SAFEGUARDS_MOSCOW_Consultation_With_CSOs_18_March_2013_Summary_ENG
SAFEGUARDS_MOSCOW_Consultation_With_Govt_18_March_2013_Summary_ENG
SAFEGUARDS_MOSCOW_Consultation_With_Govt_18_March_2013_Summary_ENG
SecurusVault Swiss Data Backup overview
SecurusVault Swiss Data Backup overview
Similaire à E2E CSS Testing at HTML5 Conference 2016
LightSwitchで遊んでみた
LightSwitchで遊んでみた
Yoshitaka Seo
クリーンアーキテクチャ学んでみた
クリーンアーキテクチャ学んでみた
Isao Ebisujima
コンソールゲームを世界展開してみた - JAWS DAYS 2015
コンソールゲームを世界展開してみた - JAWS DAYS 2015
Ryo Nakamaru
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
鹿駆動
鹿駆動
Shinichi Kozake
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
Naoki Kanazawa
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Visso株式会社
Electron を知る
Electron を知る
Tomoya Shibata
Core Graphics on watchOS 2
Core Graphics on watchOS 2
Shuichi Tsutsumi
Black friday in san francisco
Black friday in san francisco
Sho Otani
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
webcampusschoo
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
Makoto Mori
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Yukio Saito
プログラミングが(好き|嫌い)な方のためのKlisLT
プログラミングが(好き|嫌い)な方のためのKlisLT
Masaki Kobayashi
Cocoa勉強会#63-Xcode Server〜みんなで使ってみる
Cocoa勉強会#63-Xcode Server〜みんなで使ってみる
Masayuki Nii
EC-CUBE関西UG勉強会(EC-CUBE2系から3系へ移行にまつわるエトセトラ)
EC-CUBE関西UG勉強会(EC-CUBE2系から3系へ移行にまつわるエトセトラ)
Tsuyoshi Nagahashi
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
Shohei Oda
【Speee】ライブコーディング公開資料20140809
【Speee】ライブコーディング公開資料20140809
technica_speee
Visual studioonlineとwebサイトで始めるci/cdの第一歩
Visual studioonlineとwebサイトで始めるci/cdの第一歩
Kazunori Hamamoto
Similaire à E2E CSS Testing at HTML5 Conference 2016
(20)
LightSwitchで遊んでみた
LightSwitchで遊んでみた
クリーンアーキテクチャ学んでみた
クリーンアーキテクチャ学んでみた
コンソールゲームを世界展開してみた - JAWS DAYS 2015
コンソールゲームを世界展開してみた - JAWS DAYS 2015
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
鹿駆動
鹿駆動
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
20101127 Android Usability Seminar
20101127 Android Usability Seminar
Electron を知る
Electron を知る
Core Graphics on watchOS 2
Core Graphics on watchOS 2
Black friday in san francisco
Black friday in san francisco
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
カフェのWEBサイトを作って、WEBデザインの基礎と技術を学ぶ
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
Enpit bizapp_aiit_20130902_for_WindowsEnvironment
プログラミングが(好き|嫌い)な方のためのKlisLT
プログラミングが(好き|嫌い)な方のためのKlisLT
Cocoa勉強会#63-Xcode Server〜みんなで使ってみる
Cocoa勉強会#63-Xcode Server〜みんなで使ってみる
EC-CUBE関西UG勉強会(EC-CUBE2系から3系へ移行にまつわるエトセトラ)
EC-CUBE関西UG勉強会(EC-CUBE2系から3系へ移行にまつわるエトセトラ)
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
Visual Studio for Mac × Azureで簡単アプリ開発! 〜古くなったDocumentに立ち向かってみるテスト(´Д` )〜
【Speee】ライブコーディング公開資料20140809
【Speee】ライブコーディング公開資料20140809
Visual studioonlineとwebサイトで始めるci/cdの第一歩
Visual studioonlineとwebサイトで始めるci/cdの第一歩
E2E CSS Testing at HTML5 Conference 2016
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. フロントエンドエンジニア8年年⽣生 ※⾼高速化とか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.
ご清聴ありがとうございました
Télécharger maintenant