LoginSignup
3

More than 5 years have passed since last update.

SauceLabsのバッジを自作した

Last updated at Posted at 2015-05-27

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

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

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

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

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

動機

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

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

APIを使う

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

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

上記であれば、usersessionテストの最新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でパースする1
  • パースした内容を、SauceLabsAPIにrequestで問い合わせる2
  • テスト結果が無造作に流れてくるので、最新のものだけに抽出する3
  • cheerioでSVGをレンダリング。バッジを生成する4

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のバッジを生成できます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3