SauceLabsのバッジを自作した

使用できるURLは2パターンあります。

http://soysauce.berabou.me/u/user.svg

ユーザー名。userが行った最新のテスト結果を取得して、バッジを生成します。

http://soysauce.berabou.me/u/user/session.svg

セッション名。userが行ったsessionの最新のテスト結果を取得して、バッジを生成します。

動機

前回の記事で、SauceLabs公式が配布しているバッジは、__１アカウントごとに１つだけ作れる__ことに触れました。つまり、無料アカウントであれば、１プロジェクトのみバッジを生成できます。

しかし、バンバンテスト書いて、バンバンZuulでブラウザ互換性をチェックして、バンバン公開したい場合、このアカウントごと、という制約が面倒になります。

APIを使う

SauceLabsAPIが公開されており、以下のURLで、バッジ生成の手がかりになるjsonを取得できます。

$ curl "https://saucelabs.com/rest/v1/user/jobs?name=session&full=true&limit=1"

上記であれば、userのsessionテストの最新1件が返ります。

[
  {
    "browser_short_version": "5.1",
    "video_url": "https://saucelabs.com/jobs/8154b870a05b49e1a94f80828111ba7d/video.flv",
    "creation_time": 1431806251,
    "custom-data": null,
    "browser_version": "5.1.",
    "owner": "user",
    "id": "8154b870a05b49e1a94f80828111ba7d",
    "record_screenshots": true,
    "record_video": true,
    "build": null,
    "passed": true,
    "public": "public",
    "assigned_tunnel_id": null,
    "status": "complete",
    "log_url": "https://saucelabs.com/jobs/8154b870a05b49e1a94f80828111ba7d/selenium-server.log",
    "start_time": 1431806251,
    "proxied": false,
    "modification_time": 1431806317,
    "tags": [],
    "commands_not_successful": 2,
    "name": "session",
    "end_time": 1431806317,
    "error": null,
    "os": "Linux",
    "breakpointed": null,
    "browser": "android"
  }
]

前述のuserが"owner"に、sessoinが"name"に入ります。"passed"はtrueまたはfalse、テスト中か、異常終了した場合はnullになります。つまり、緑か赤、あるいは灰色です。

Express + request + cheerio

SauceLabs バッジの自作には Node.js を使用しました。大まかな流れは

• GETをExpressでパースする¹
• パースした内容を、SauceLabsAPIにrequestで問い合わせる²
• テスト結果が無造作に流れてくるので、最新のものだけに抽出する³
• cheerioでSVGをレンダリング。バッジを生成する⁴

SVGのタグリファレンスは、DEFGHI1977氏のsvg要素の基本的な使い方まとめがたいへん参考になりました。

自作バッジはsoysauceという名前で公開していますが、これはExpressのmiddlewareとして使用できます。

$ npm install coffee-script --global
$ npm install express soysauce
$ coffee app.coffee

app.coffee

express= require 'express'
soysauce= require 'soysauce'

app= express()
app.use soysauce.middleware()
app.listen 8080

htpp://localhost:8080/user.svgにアクセスすると、userのバッジを生成できます。

1. https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L20-L35 ↩

2. https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L37-L56 ↩

3. https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L57-L72 ↩

4. https://github.com/59naga/soysauce/blob/efa794fe3161c239847616f971a659087e5e7934/src/middleware.coffee#L91 ↩