UZABASE Tech Blog

株式会社ユーザベースの技術チームブログです。 主に週次の持ち回りLTやセミナー・イベント情報について書きます。

SREチームの2018年度を占う

初めまして、株式会社ユーザベースのSPEEDA Japan Company、Site Reliability Engineering (SRE) Teamでエンジニアをしています、川口・阿南です。

SREチームについて

私たち、SREチームは2017年7月に始動しましたが、どのような業務をしているのかをあまり発信できていませんでしたので、少しご説明します。
端的に言うと、以下2点が主な業務になります。

  • 企業・業界情報プラットフォーム「SPEEDA」のインフラ構築、ソフトウェア改善
  • ユーザベース全体の社内インフラの構築、運用

前者については「SREといえばこれ!」という業務ですが、後者の社内インフラについては、SREと別チームになっている会社も多いのではないでしょうか。
弊社では、社内ネットワークの構築、社内メンバーのPCセットアップ、ヘルプデスク等全てSREチームが担当しており、サービスだけでなく社内インフラの信頼性も向上しようと、日々業務に取り組んでいます。

SRE合宿

2018年度(2018年1月~12月)にSREチームが向かうべき方向を合わせるための合宿を行いましたので、ブログ記事として書き残したいと思います。今回の合宿のテーマは以下の2つです。

1日目:2018年度のSREチーム施策決定
2日目:Kubernetesのスキルを上げる

1日目は、2018年度に取り組むテーマについての議論を行いました。SREチームでは四半期ごとにこのような合宿を行っていますが、前回の合宿では予定より大幅に時間がかかってしまったという反省があります。そこで、今回は以下のような取り組みを行いました。

  • 2017年度の振り返りは事前に実施
  • チーム外からファシリテータを立てて、タイムマネジメントを依頼
  • 合宿運営委員で、スケジュールを詳しく検証

合宿会場は、駒場東大前のレンタルスペースです。前回のSRE合宿でも利用させていただきましたが、古民家風の大変おしゃれなスペースで、皆とても気に入っています。

f:id:uzabase:20180115230003j:plain

チームテーマ議論

合宿当日。集合時間の午前9時半には続々メンバーが集まり、いよいよSRE合宿がスタート。まずはチームリーダーの羽山より、2017年度のSPEEDAサービス状況の報告や、来年度のSPEEDA事業の体制等について説明がありました。 ここからバトンをファシリテータの田中氏に渡し、あらためて我々のミッションや今年度のおさらいなどをしてから、いよいよ2018年度のチームテーマについての議論に入ります。各自で付箋に「これだ!」と思うテーマを記し、それをホワイトボードに貼り付けていきます。

f:id:uzabase:20180115233331j:plain

約30枚のテーマから絞り込んでいった結果、来年度のチームテーマは

「Production Ready k8s」
「Data Driven Automation」

に決まりました。 一つ目の「Production Ready k8s」は、「Kubernetes」というコンテナ管理システムを本番サービスに本格導入するという意味です。「Kubernetes」について、詳しくは合宿2日目のレポートをご参照ください。二つ目の「Data Driven Automation」はチーム内で話して作ったテーマで、システムの自動化をただやみくもに行うのではなく、時間がかかっているオペレーションや、障害になりかねないような複雑なオペレーションなど、数値化したデータを元に自動化を進めていこうという意味が込められています。

プロジェクト選別

その後は、各メンバーから事前に提出されたプロジェクト案について、重要度や上記テーマとの一致度を精査し、SREチームとして我々が取り組みたいプロジェクトに絞っていきました。ここで、その一部を紹介します。

オペレーションタスクの自動化・システム化

会社やサービスの拡大に伴いオペレーションタスクが増え続ける中、今後アップサイドの改善を行っていくためには、手動で行っているオペレーションにかかる時間を減らし、ソフトウェア開発・導入に注力する必要があります。これまでも取り組んできましたが、2018年度に自動化プロジェクトを実施し、手動オペレーションの自動化・システム化を集中して行いたいと考えています。

ログ分析 / モニタリング基盤の強化

SREチームとして改善を行うために、ログを分析してボトルネックやエラーの原因を調査したり、サービスの稼働状況をモニタリングすることは非常に重要です。しかしながら、ログを可視化してもうまく活用できていなかったり、そもそも何のためにログを収集しているのか明確でない、といったことは意外と多いのではないでしょうか。弊社でも、現状ではビジュアライズ出来ていないログがあったり、Kubernetesを本格的に利用していくにあたってますますログやメトリクスの可視化が重要になりますので、今後の重点テーマとしたいと思っています。

アラート発生時のエスカレーション自動化

サーバやネットワーク等の障害発生時、アラートを早くかつ確実に検知し、速やかに対応に入ることが重要です。その強化策として、自動エスカレーションシステムの導入を行います。

なお、プロジェクト選別の途中でランチ休憩を挟みましたが、前回はお店を探すだけで結構時間がかかってしまったので、今回は事前にお弁当を注文して会場まで配達していただきました。意外とおしゃれな弁当で、合宿会場に合った感じで良かったと思います。

f:id:uzabase:20180115231015j:plain

OKR策定

後半では、2018年度1Q(第1四半期)のOKR策定を行いました。OKRとは「Objectives and Key Results」の略で、業務の目標と成果を管理する手法です。当社のSPEEDA国内事業では2016年度からOKRについての取り組みを開始し、現在ではOKRベースでの活動が当たり前になっています。

まずは、前半で決めた2018年度テーマの中から、1Q・2Qで取り組むプロジェクトを選びます。選び方はボトムアップで、各自がコミットしたいプロジェクトを1つずつ出してもらい、その希望を元にプロジェクトごとのオーナーを決めて、メンバーアサインを調整していきました。

前述の通り、SREチームでは社内全体や「SPEEDA」のインフラ構築・運用も担当していますので、自分たちの希望するプロジェクトだけでなく、会社やSPEEDA事業全体に関わる業務も実施する必要があります。2018年には弊社オフィスの移転も計画されており、SREチームとしても様々な作業が必要になるため、オフィス移転自体も必須プロジェクトの一つとして上がりました。

f:id:uzabase:20180115232130j:plain

このようにして決定したプロジェクトごとに集まって、1QのOKRを策定しました。具体的には、プロジェクトの目標である「Objective」と計測可能な達成内容である「Key Results」を決めます。これがプロジェクトの活動のベースであり、進捗評価基準となるものですので、どのプロジェクトも真剣に議論していました。

最後に、各プロジェクトのOKRを発表して、合宿の1日目はお開きとなりました。

合宿1日目を終えて

この記事の最初の方で記述したような施策を常に意識した結果、またファシリテータの田中氏の手腕も大きかったと思われますが、非常にスムーズにスケジュールを進めることが出来ました。今回の合宿同様、2018年度の各プロジェクトも順調に進みそうです。

2日目の「Kubernetes合宿」については、各グループごとの取り組み内容をブログ記事として紹介したいと思いますので、どうぞご期待ください。

お知らせ

SREチームでは「No Challenge, No SRE, No SPEEDA」を掲げ、ユーザベースグループのミッションである「経済情報で、世界をかえる」の実現に向けて、日々業務に取り組んでいます。 興味を持ってくださった方はこちらをご確認ください。

Chrome hackingと称しブラウザのレイアウトバグをみんなで調べてみました

はじめまして。プロダクト開発チームの小野寺 (ryoqun)です。

Google Chrome (以下、Chrome)にて、HTMLのレンダリングの回帰バグが紛れ込み、その影響でSPEEDAの一部分のレイアウトが崩れてしまう問題が発生しました。そこで、「Chrome hacking」と称し、数名の希望者を社内で募り、みんなでこのバグを調査、あわよくば解決しChromeのコミットログに@uzabase.comのドメインを刻もうと奮い立ちました。

しかし結論として、別の案件が入り、作業を中断している間に先を越され、名を刻むことはできませんでした。つまりは現在このバグは別の開発者によって修正が完了しています。しかし、結果的にはOSSのソースコードレベルでの調査の実例としては非常に好例となりました。

その活動記録として、SPEEDA上での問題の発覚からChromeのバグであるという原因の特定や調査から収束に至るまでの一連の出来事を共有したいと思います。

前提として、本当にChromeのレイアウトバグでした

最初はChromeのバグだと断言できませんでした。

そのため、本当にChromeがCSS 2.1のレイアウト回帰バグを混入させてしまったことが原因だと分かった時は驚きでした。

当然として、SPEEDAでのレイアウトバグの発覚直後は、SPEEDAのCSSの問題だと考えていました。 というのもCSSは呆れるくらいに枯れたバグの入る余地のないWebの基礎技術だからです。

CSS 2.1として2011年6月にW3C Recommendationとなり、それから5年以上が経過しています。それまでの歩みは決して容易いものではなかったため、CSSは鉄壁の仕様となっています(1990年代の血みどろのブラウザ競争の中で産み落とされたCSS 1.0がのたうちまわり、当時のWebエンジニアたちをInteroperatabilityの名の下苦悩させ、戦禍の反省とでもいうかのごとく「複数レンダリングエンジン上で実装済み」という大義名分の元、W3CによってひねりだされたCSS 2.0が2000年代を通し、これでもかというくらいに精緻に策定され、晴れてCSS 2.1は生み出されました)。

培われた仕様の厳密性、テストケースの網羅性はもはや芸術レベルで、1つの仕様に対しての手厚さとしては数有る仕様の中でもトップクラスにCSSは位置すると思います(特に個人的には9 Visual formatting model10 Visual formatting model detailsあたりは傑作だと思います)。

ということで、2017年の今日において、枯れたCSSに対し、IE 6やガラケーと戯れて涙を飲みながらレイアウトバグの回避を模索していた苦悩の2000年代を彷彿とさせる事象に再び直面し、非常に印象的でした。 どんなに枯れていようが常にソフトウェアにはバグがつきものであり、バグに直面した時、時には自分たちのコードだけでなくミドルウェアも疑う必要性を痛感しました。 また、CSSを正しく実装することがいかに難しいことであるかの証左なのかもしれません。

バグの発覚と内容

今回のバグは、SPEEDAの本番環境にて、デスクトップ向けのChromeのStableチャンネルに59が出始めてからようやく気づきました。

バグの内容は、サイト検索フォームの下に表示されるサジェスト候補の一覧が異様に高くなってしまうというものでした。SPEEDAは一般公開されているサービスではないので見せられるスクリーンショットがかなり限定的でわかりにくいのですが、正しいレンダリング時の画像はこのようになります:

f:id:ryoqun:20170901011237p:plain

逆に、正しくないレンダリング時の画像は、このようにかなり縦長な感じになってしまいます:

f:id:ryoqun:20170901011251p:plain

これだけだとイメージがつきにくいのですが、サジェスト候補が画面表示領域に対してかなりの占有率になってしまい、ユーザーにも違和感を与えるレベルになってしまいました。

とりあえず応急処置

他のブラウザや以前のバージョンのChromeでは問題が起きなかったことから、どう考えてもChromeのバグらしいというのが判明してきました。そうなってくるとChromeはすぐには修正されないのでまずは応急処置です。 レンダリングエンジンがどう動いているかを想像しつつ、クロスブラウザで無害で等価なCSSを色々と試行錯誤した結果、結局は以下の変更だけで直ってしまいました。

 .g-search-suggest li .suggestItem {
-  display: block;
+  display: inline-block;
   padding-left: 90px;
   color: #555;

CSS的にはほとんど等価なはずなので、やはりどう考えてもChromeのバグのようでした(ちなみに、こういうレイアウトバグの回避策なんてものは、すっかり失われし技術となってしまいました)。

この応急処置をSPEEDAに反映し、次にChromeを直そうということになりました。

ミニマルテストケースの作成

ともかくも最初はミニマルテストケースを作りました。そうすることによって社内に公開しても大丈夫でGoogleにもバグレポートを送れるようになります。 作ったミニマルテストケースは↓の通りです。

<!DOCTYPE html>
<html>
<head>
<style>
.suggestItemOk1 {
  display: inline;
}
.suggestItemOk2 {
  display: inline-block;
}
.suggestItemNg {
  display: block;
}
.item {
  overflow: hidden;
  display: inline-block;
}
</style>
</head>
<body>
<ul>
<li><span class="suggestItemOk1"><span class="item">AAA</span></span></li>
<li><span class="suggestItemOk1"><span class="item">BBB</span></span></li>
<li><span class="suggestItemOk1"><span class="item">CCC</span></span></li>
<li><span class="suggestItemOk2"><span class="item">AAA</span></span></li>
<li><span class="suggestItemOk2"><span class="item">BBB</span></span></li>
<li><span class="suggestItemOk2"><span class="item">CCC</span></span></li>
<li><span class="suggestItemNg"><span class="item">AAA</span></span></li>
<li><span class="suggestItemNg"><span class="item">BBB</span></span></li>
<li><span class="suggestItemNg"><span class="item">CCC</span></span></li>
</ul>
</body>
</html>

ミニマルテストケースの正しいレンダリング時の画像はこうなります:

f:id:ryoqun:20170901013353p:plain

逆に、正しくないレンダリング時の画像はこうなります:

f:id:ryoqun:20170901013155p:plain

SPEEDA上でのレイアウトバグとなんとなく似ているのは想像できるかと思います。

このミニマルテストケースから分かることは、display: list-itemoverflow: hidden,display: blockが組み合わさるとどうやらまずいということです。その情報を元にChromiumのバグを検索してみましたが、同様のバグが見当たらなかったため、自分たちで直してみようということになりました(ちなみに、今現在はこのキーワードで検索すると、今回の回帰バグのレポートを見つけることができます)。

Chromiumのビルド

Chromeは、オープンソースであるChromiumから作られています。そこでオープンソースの真価を発揮ということで、手元のマシンでビルドしてみました。Chromiumは相当な数のサードパーティーライブラリに依存していますが、独自ツール(gyp)を使って比較的簡単にビルド環境を構築できます。ただストレージ容量は結構必要で、例えば私の場合は50GBは必要でした。

また、今回は回帰バグなのでChromium 58とChromium 59のどちらも並行させてビルドし、比較調査しやすいようにしました。

実際にHackして怪しい箇所を見つける

ChromeのDeveloper Toolsから得られる情報だけではレイアウトバグの状況が分からなかったので、ブラウザの真骨頂であるレンダリングの中のレイアウト(Reflow)コードを読む必要があります。大抵の大規模ソフトウェアは開発目的で色々な内部状態をダンプする機能があり、Chromiumも例外ではありません。ですが、今回の参加メンバーはChromeにはそれほど詳しくないため、当初はそのやり方が分からず、ソースコードとWebと変更履歴をつっつきまわり、最終的にはデバッグ情報を出力させることができました。

具体的には下のように、デバッグ関数をよく通るであろうコードパスから呼び出してみました。

diff --git a/third_party/WebKit/Source/core/layout/LayoutListItem.cpp b/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
index 92af305..946e7c9 100644
--- a/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
@@ -466,6 +466,10 @@ void LayoutListItem::PositionListMarker() {
 
 void LayoutListItem::Paint(const PaintInfo& paint_info,
                            const LayoutPoint& paint_offset) const {
+  this->ShowTreeForThis();
+  this->ShowLayoutTreeForThis();
+  this->ShowLineTreeForThis();
+  //this->ShowDebugData();
   ListItemPainter(*this).Paint(paint_info, paint_offset);
 }

そして、レイアウトバグの有無によって、↓のような違う2つのレイアウトツリーが生成されていることが分かりました。

正しいレイアウトツリー:

LayoutListItem 0x19a65d2243d0   LI
  LayoutListMarker (anonymous) 0x19a65d218df0
  LayoutBlockFlow 0x19a65d218f18        SPAN class="suggestItemOk2"
    LayoutBlockFlow 0x19a65d219040      SPAN class="item"
      LayoutText 0x19a65d2415f0 #text "CCC"
LayoutListItem 0x19a65d224290   LI
  LayoutBlockFlow 0x19a65d218828        SPAN class="suggestItemNg"
    LayoutListMarker (anonymous) 0x19a65d2184b0
    LayoutBlockFlow 0x19a65d218cc8      SPAN class="item"
      LayoutText 0x19a65d241528 #text "AAA"  

正しくないレイアウトツリー(suggestItemNgLayoutListMarkerが外出しされてしまっている):

LayoutListItem 0x19a65d224650   LI
  LayoutListMarker (anonymous) 0x19a65d219168
  LayoutBlockFlow 0x19a65d219290        SPAN class="suggestItemOk2"
    LayoutBlockFlow 0x19a65d2193b8      SPAN class="item"
      LayoutText 0x19a65d240ee8 #text "CCC"
LayoutListItem 0x19a65d224790   LI
  LayoutBlockFlow (anonymous) 0x19a65d218a78
    LayoutListMarker (anonymous) 0x19a65d219608
  LayoutBlockFlow 0x19a65d219e20        SPAN class="suggestItemNg"
    LayoutBlockFlow 0x19a65d219cf8      SPAN class="item"
      LayoutText 0x19a65d241910 #text "AAA"

正しくないレイアウトツリー中で、アドレスが0x19a65d218a78LayoutBlockFlowが余計に生成されています。これによって余計な論理的な行が追加され、意図せず高さがおかしくなってしまうというからくりのようでした。

ここまでくればもう峠を越していて、あとはこの差異をとことん調べ込んでいけばよくなります。

今まではまったくの五里霧中で、どこにバグがあるのか分からず怪しそうなところをとにかく広く浅く探す必要がありました。胸をなでおろせた瞬間でした。

コミットの特定

<li>関連の実装が肝になっているようだったので、LayoutListItemのソースコードを入念に見ました。調べた結果、回帰バグを混入させたコミットを特定することができ、それをgit revertしてビルドし直したらバグが発生しなくなりました! いろいろな切り口で調べたのですが、結果的にはgit annotateが決め手でした。比較的浅い回帰バグにはgit annotateは有効です。

変更内容としては非常に小さいです。ちなみにこの変更を見てみると、もともとはまた別のレイアウトのバグを直そうとしていたようです。

diff --git a/third_party/WebKit/Source/core/layout/LayoutListItem.cpp b/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
index 6c98974..4dbf2a7 100644
--- a/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
@@ -257,6 +257,11 @@ static LayoutObject* getParentOfFirstLineBox(LayoutBlockFlow* curr,
     if (currChild == marker)
       continue;

+    // Shouldn't add marker into Overflow box, instead, add marker
+    // into listitem
+    if (currChild->hasOverflowClip())
+      break;
+
     if (currChild->isInline() &&
         (!currChild->isLayoutInline() ||
          curr->generatesLineBoxesForInlineChild(currChild)))

いざ修正!(は叶わず…)

直そう!と思って一旦保留していたら、先を越され、その間にupstreamで修正されてしまいました。非常に残念です。

修正に必要なコードはたったの一行でした。もともとが2行を追加しただけで回帰バグが発生したのですから、その2行のどちらかを直せば回帰バグは直るというわけです。

diff --git a/third_party/WebKit/Source/core/layout/LayoutListItem.cpp b/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
index 18e98a78..893ee6e 100644
--- a/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
+++ b/third_party/WebKit/Source/core/layout/LayoutListItem.cpp
@@ -259,7 +259,7 @@ static LayoutObject* GetParentOfFirstLineBox(LayoutBlockFlow* curr,
 
     // Shouldn't add marker into Overflow box, instead, add marker
     // into listitem
-    if (curr_child->HasOverflowClip())
+    if (curr->HasOverflowClip())
       break;
 
     if (curr_child->IsInline() &&

コードリーディング

今回の一連の修正で問題なのは、ListMarkerをLayout Treeに配置する場所です。 回帰バグの発生前後に関わらず、大前提としてLayoutBlockFlow(class=suggeestItemNg)の子としてListMarkerを追加する必要があります。しかし、その前提が1つ目の修正で崩れてしまいました。回帰バグによりLayoutListItem(<li>)の子として追加するように意図せず実装が変わってしまいました。

その原因を少し説明します。

まず、1つ目の修正で本当に直したかったことは、<li>overflow: hiddenな子要素があるとき、その子としてListMarkerを追加するとclipされ、表示されないという問題でした。

その場合はListItemの子としてListMarkerを入れる必要があります。なので1つ目の修正ではそういうロジックをGetParentOfFirstLineBox()に新規に追加しました。

具体的には、特定条件時にGetParentOfFirstLineBox()からはbreak経由でnullptrを返し、呼び元であるUpdateMarkerLocation()ListItemの子としてListMarkerを追加するというものです。しかし、その判定条件が正しくなく回帰バグが発生してしまいました。

ちなみに、この処理の副作用として改行が必然的に発生します(これがCSS的に正しいかは微妙です)。これは1つ目の修正としては許容するようですが、我々のミニマルテストケースでは許容されません。ミニマルテストケースの正しいレイアウトの挙動はLayoutBlockFlow(class=suggeestItemNg)の子としてListMarkerを追加することです。

追加した判定条件中でHasOverflowClip()が判定すべき対象はcurr(つまりはLayoutBlockFlow(class=suggeestItemNg))でありcurr_childではありません。まさに2つ目の修正ではそうなっています。 というのも、curr_childをどうこうというよりもまずはcurrHasOverflowClip()でないならば、currListMarkerの親として適切なので、currListMarkerを追加すべきだからです。

上のミニマルテストケースは<span class="suggeestItemNg">の子として<span class="item">がいます。正しくない条件では、overflow: hidden<span class="item"><span class="suggeestItemNg">の子要素となっているために、判定結果が誤って真になり、ListMarkerListItemの子として追加されてしまいました。繰り返しますが、本来はoverflow: hiddenでないLayoutBlockFlow(class=suggeestItemNg)の子として追加すべきです。

結果、不要なLayoutBlockFlowができたことで論理改行が発生し、最終的には高さが意図せず高くなってしまうというレイアウト崩れが発生しました。

感想

参加したメンバーの感想です。

小野寺: 複数人でレイアウトロジックの動きを追うのは難しかったです。当社のSPEEDA開発グループではペアプロを積極採用しているのでペアプロの応用実践として何かいい解決案を考えてみたいと思いました。

北内: レンダリングエンジンのソースコードを追うのは骨の折れる作業でしたが、複数人で協力しながら作業したおかげで根気よく進めることができました。また、Appleと共同で開発していたWebKitからフォークしてBlinkに移行したことにともない、メンバ関数の名前をlower-camelcaseからupper-camelcaseに変更するといった変更履歴を見ることができたのも興味深かったです。

鈴木: Chromeがマルチプロセスで動いているからかデバッガでうまくプロセスにattachできなかったため、git grepとデバッグプリントを利用した最終的かつ原始的な手法でバグを調査しましたが、結果的に、これは思いの外有効な策となりました。また、複数人でバグ調査を行う場合、様々な視点・観点を得られ、またメンタル的にもメリットがあるので、機会があればおすすめしたいです。

久保: SREチームでインフラエンジニアとして普段業務をしているため、Chromeのバグ改修は自分には非常にハードルが高く、先輩方についていくだけで必死でしたが、Chromeのような超大なソースのバグの原因を特定する際に、どのようにあたりをつけていくのかについて少し掴めたように思います。今後のSREチームとしての業務に活かせると思いました(Uzabaseのinfraチームは今年の7月よりinfraチームからSREチームに変わり、4Q(10月)以降本格的にSREチームとしてサービス改善にコミットし、バグの改修やレスポンス改善などこれまでのインフラレイヤーにとどまらない業務範囲になります)。

まとめ

今回はソースコードレベルまでの調査を業務で行いました。当社では今後もOSSにも積極的に取り組んでいきたいと思います。Chrome内のソースコードが原因の修正までは特定できたのはよかったのですが、別件の案件が入り、Chrome hackingを一旦保留にしていたら、upstreamでその間に修正されてしまい惜しかったです(本来は自分たちでバグレポートを立てて、テストケース込みでパッチを提出しようとしていたのですが……)。

長くなりましたが、最後にまとめでこの記事を終わりたいと思います。

  • 天下のGoogleのしかもChromeでさえも回帰バグが紛れ込んでしまうことがある。
  • オープンソースだと簡単なバグは自分たちで調査&修正はやろうと思えばできて、みんなでOSSに貢献できる。
  • 弊社では、時にはミドルウェアへのソースコード調査&解決も厭わない情熱あふれる問題解決大好きエンジニアを募集しています。

www.wantedly.com

www.wantedly.com

www.wantedly.com

Gauge Test Automation Toolとアジャイル開発

こんにちはSPEEDAのQAチームの工藤です。
最近ではテスト自動化周りのツールが数多く存在していますが、英語でのみ提供されていて日本で多くの人に知られていないサービスも多いと思います。
そんな中、Gaugeという自動化のツールがイケてるという情報を発見したので実際に調べてみました。

はじめに

GaugeとはThoughtWorks社が開発しているオープンソースのテスト自動化ツールです(2017年7月現在でベータ版)。
もっと具体的に言うと様々なロールのメンバーが自動テストのスクリプトを理解できるようにするためのspecificationツール(恐らく立ち位置的にはCucumber/Gherkinの代替)になります。
ざっくりGaugeの良いところを挙げると下記になります。

  • Selenium Webdriverと一緒に使える
  • マークダウン形式で記述できる
  • ビジネス言語でテスト仕様を記述できる(実行可能な仕様書の概念をサポート)
  • 多言語、マルチプラットフォームをサポート
  • 外部データソースからテストデータを読み込める
  • 拡張可能(自分でpluginを開発できる)
  • IDEのサポートが充実している

Gaugeで使う用語

下記がGaugeで使用する基本的な用語(概念)です。
使い始めるのに最低限必要そうなものをピックアップしているので、当然他にもあります。

  • Specifications(spec)
  • Scenarios
  • Steps
  • Tags

もう少し詳しく説明していきます。

Specification(spec)

テスト対象アプリケーションの特定の機能の仕様を説明しています。

Scenarios

各Scenarioは、特定の仕様の1つのフローを表しています。仕様には少なくとも1つのScenarioが含まれている必要があります。

Steps

仕様を実行可能なコンポーネントに分けたものがStepになります。マークダウン形式のunordered list items(bulleted points)として記述されます。
(大きくContext Steps、Tear Down Steps、Scenarioやconcepts内のStepsに分けられますが、今回はそこらへんの説明は割愛します)。

Tags

TagはspecやScenarioを関連付けするために使用します。タグを用いてspecやScenarioをフィルタリングすることができ、後々便利になります。

Gaugeのインストール

下記ページからダウンロードできます。インストール方法も簡単で、下記ページに書いてある通りに進めていけば5分もかからずにGauge自体はインストールできます。
https://getgauge.io/get-started.html

サンプルコードを見てみる

下記ページから自分の好みの言語のSampleコードのGithubリンクへ飛ぶことができます。
https://docs.getgauge.io/examples.html

私はWeb app using SeleniumのJavaのSampleコードを選択しました。
https://github.com/getgauge/gauge-example-java

下記がSpecificationのファイルになります。
上記で説明した用語はこんな形で使われます。

user.spec(自然言語でテストケースを記述していくファイル)

Signup   //Specification
======

Register a customer  //Scenario
-------------------
tags: user, signup, high, final, smoke  //Tags

* Sign up a new customer                  //Step1
* On the customer page                    //Step2
* Just registered customer is listed      //Step3

上記のSpecファイルはIDEでタブ切り替えでHTML Previewを閲覧できます。Specファイルがそのまま仕様書として使えます。 (自分の場合はIntelliJを使いました。IDE側でプラグインをインストールしてやる必要があります)   f:id:kudogen:20170718122930p:plain

下記がSeleniumのテストコードになります。 各Stepに対してのテストコードが@Stepという形で実装されているのが分かります。
UserSpec.java

public class UserSpec {
    private final WebDriver driver;

    public UserSpec() {
        this.driver = DriverFactory.getDriver();
    }

    public String localPart() {
        // Creating a random local part of an email address also used as username
        return UUID.randomUUID().toString();
    }

    @Step("On signup page")    //Stepsの実装部分
    public void navigateToSignUpPage() {
        driver.get(SignUpPage.SignUpUrl);
    }

レポート機能

プラグインをインストールしてやるだけで、テスト流す度にHTMLのテストレポートを吐き出してくれます(下記画像参照)
実行したテストをSpecificationやTagで検索できて、Spec毎、Scenario毎、Step毎にどれくらい実行時間がかかったかも簡単にわかります。
f:id:kudogen:20170718123453p:plain

今回カバーしていない機能

これまでに紹介したのはあくまでも超基本的なTerminologyです。 他にも下記のようなものがあるのですが、今回は触れられていません。

  • Concepts
  • Parameters
  • Stepの種類(Contexts, Tear Down Steps)

またかなり役立ちそうな下記機能もありますが、今回はカバーしていません。

  • Data driven execution
  • Parallel Execution

まとめ

弊社ではテストケース=仕様書という考え方から、ほぼすべてのプロジェクトでUATを書いています。
元々上記のような取り組みをしていたのですが、もっといいやり方がないか探していたところに見つけたのがGaugeでした。
Gaugeは実行可能なドキュメントという概念("the concept of executable documentation")をサポートしています。
また自動テストのケースを誰でも読めるようにするという考え方も弊社の開発チームが今まで取り組んできていたことですが、Gaugeを使えばよりスマートに実現できそうです。
今後は様々なプロジェクトでGaugeを導入していこうと考えています。

次回は今回カバーできなかったGaugeのAdvancedな機能を中心に取り上げたブログ記事を執筆予定です。


株式会社ユーザベースでは、より良い開発プロセスを共に作り上げていきたいエンジニアを大募集中です!