kawasima
イマドキのExcelスクショの撮り方
2014/10/10 Fri.
第１回 Clojure夜会

過去こういう発表を
してきました、
正真正銘のSIerです

このスライドを世界中の恵まれない
「スクショをExcelに貼るおしごと」
をしているSE各位に捧げます

Excelスクショとは何か?

ご丁寧に、
全てのテストを手作業で実行し、
手作業でブラウザのスクショを取得し、
それを掻き集めて、手作業でExcelに貼る

そんな世間のイメージらしい…そんな世間のイメージらしい…

んなこたぁーない
今日はホンモノのSIerの
Excelスクショの撮り方を
お見せしたいと思います！

スクショを撮る

teslogger
http://github.com/kawasima/teslogger
●
スクショと自動仕分け機能をもったブラウザ
●
起動画面からIE、Firefox、Chromeを選択す
ると各ブラウザが起動します。

カメラボタンを押すだけ

ケース毎に保管される

tesloggerの実装
起動時にSeleniumのWebDriverを立ち上げ、
GUIを通じて、
インタラクティブに
WebDriverメソッドを
実行する

Clj-webdriver Taxi API
Selenium1くらいの手軽さ
https://github.com/semperos/clj-webdriver/

こんな機能のテストは、スクリプト書いてテスト
し、そうでないものは打鍵のテストで…
なんていう使い方でも、
Tesloggerだけで対応できます。

データベースの中身を撮る

データベースの中身もスクショとる
更新前、更新後で設計通りかを確認する。

teslogger-db-inspection
●
任意のタイミング間での監視対象のテーブル
のデータの差分を可視化するWebアプリ
●
オートモードの場合、テスト対象アプリを操
作するだけで、自動的にデータの変更を取得
し、スクショを保存する。

データの更新を可視化します
INSERT
UPDATE
データの更新前・後が一目でわかるDELETE

teslogger-db-inspectionの実装
●
comparator-ds
●
ulon-colon
●
om

データの差分を取得する
Original
Table
Clone
Table
(Ver. 1)
Clone
Table
(Ver.2)
https://github.com/kawasima/comparator-ds/
データセットのSnapshotを作り…

データの差分を取得する
相互にMINUSをとり差分を抽出する

データの差分を自動取得する
Webapp
Auto-snapshoterBrowser
Push message (WebSocket)
Send a screenshot
Take a screenshot.
(html2canvas.js)
更新
イベント通知
スナップショット取得
差分抽出

om
●
ClojureScript界のKiller app.
●
Facebook react.jsのラッパー的位置づけ
●
Stateを更新すると自動的に必要な部分だけDOM
を書き換えてくれる。
●
ビューコンポーネント間は疎結合で、core.async
でメッセージパッシングのやりとりする。

こんなにスッキリ！
正直、取っつきにくさはあまたの
Javascriptフレームワークの中でも
ピカイチです。
しかし、一旦仕組みが分かってしまえ
ば、他のヤツにはもう戻れないほどに
シンプルに見えるようになります。

ulon-colon
ConsumerPublisher
WebSocket Connection
(start-producer)
(produce msg)
(make-consumer “ws://xxx”)
(consume consumer
#(println %))
異なるプロセス間でメッセージ転送する仕組み
http://github.com/kawasima/ulon-colon/

スクショを集める

スクショを集める
スクショを簡単に撮るだけなら、既にSIer各社
いろんなツールを駆使している。
しかし、それを紛失・改ざんの隙を与えずに瞬
時にサーバに集めることも重要なのである。

teslogger-Server
●
スクショを撮ったら瞬時にサーバにプッシュし、ローカルからは消
える。
●
サーバではテストケース毎にエビデンスギャラリーを表示する。
https://github.com/kawasima/teslogger-server/

teslogger-serverの実装
teslogger-server teslogger
起動通知Multicast
WebSocket接続
スクショ送信
ulon-colon

スクショに注釈を付ける

スクショだけじゃエビデンスにはならない世界
新規作成ボタンを押下
撮ったスクショに説明書きを付け加える、おもてなしの心

teslogger-serverで注釈つける
キーワードを入力する
ひーーーっ(汗
ブラウザだけで可能です
※ 本機能は鋭意開発中です

スクショをExcelに貼る

Excel方眼紙に出力する
撮ったスクショはExcel方眼紙に貼り付けて、
納品するのが慣例のようです。

teslogger-serverから出力できまぁす
※ コツは要りません
ケースを選択してボタンを押下

マス目ピッタリにスクショの
貼られた方眼紙が手に入ります

axebomber-clj
https://github.com/kawasima/axebomber-clj.git
Hiccupフォーマットで書いたHTML-likeなコー
ドからExcel方眼紙を出力するライブラリ
Excel方眼紙をHTMLライクに作ってみる - Qiita
http://qiita.com/kawasima/items/60197799a7990c578263

画像出力のコード
たったコレだけで、方眼紙が手に入る！

まとめ

SIerの闇と言われる
Excelスクショ作業も
Clojureがあれば楽しいよ！