WebdriverIOでE2Eテストを行おう

こんにちは

こんにちは。人事労務freeeのアプリケーションエンジニアを担当しています、@futoase です。 今回の記事では、「WebdriverIOを利用し、E2Eテスト環境を整える」を目的に書き進めていきます。

WebdriverIO

f:id:syanbi:20170526150415p:plain

WebdriverIOは、Selenium WebDriverを利用したE2Eテストフレームワークです。Node.jsで作られています。Webアプリケーションだけではなく、mobileアプリケーションに対してもappium1を利用することでE2Eテストを実施することができます。

記事の記載内容について

$ ls

こちらの記載は、iTermやrxvtなどのターミナルにて入力したコマンドを指します。 この場合はlsとなります。$は、プロンプトの表示となります。

こちらの記事が公開された時点での情報のため、 閲覧日時によってはすでに古い情報の可能性があります。

ローカル環境でのセットアップ

WebdriverIOの動作を体験していただくため、 ローカル環境でのセットアップを始めましょう。

※ macOSが動作するハードウェアを前提に記事を書いています。

環境を構築するために必要なソフトウェアは以下です。

  • Git
  • Javaランタイム
  • Node.js
  • Chromeか、Firefoxなどのブラウザ、もしくはヘッドレスブラウザ

それぞれのソフトウェアインストールは割愛します。

WebdriverIOをnpmを利用してインストールします。

$ mkdir -p webdriverio-test
$ cd webdriverio-test
$ npm install webdriverio --save-dev

また、Selenium WebDriver2を使わなくてはいけません。 WebdriverIOと各種ブラウザをブリッジしてくれる便利なライブラリです。

npmパッケージに、Seleniumのセットアップ、起動を簡単に行えるようにするための ラッパー、selenium-standaloneがあります。合わせてインストールします。

github.com

$ npm install selenium-standalone@latest -g
$ selenium-standalone install

selenium-standaloneを利用し、Seleniumをstandalone modeで立ち上げます。

$ selenium-standalone start

これで、WebdriverIOを実行するための環境が揃いました。

WebdriverIO REPL Interface

WebdriverIO REPL Interfaceを利用し、ブラウザを操作することが可能です。 早速やっていきましょう。

$ ./node_modules/.bin/wdio repl chrome

コマンドを実行するとChromeが立ち上がります。

f:id:syanbi:20171010162202p:plain

ここまでで、

  • WebdriverIOのセットアップ
  • selenium-serverのセットアップ
  • Webdriver -> selenium-server -> Chromeのつなぎ込み

以上の確認が行えました。

WebdriverIOを利用し、ウェブアプリケーションの確認を行う

実際にWebdriverIOを利用し、ウェブアプリケーションに対しテストを行います。

サンプル・アプリケーションのセットアップ

テスト用のサービスアプリケーションを作成しました。

bitbucket.org

macOS用のバイナリを用意しています。macOSをご利用の方はこちらを利用すると便利です。

テストアプリ用バイナリ: sample-web-app_darwin_amd64

バイナリダウンロード後、実行権限を付けてください。

$ chmod +x sample-web-app_darwin_amd64

その他のプラットフォームをご利用の場合は、リポジトリのREADME.mdを参照し、ビルドしてください。

ビルド済みバイナリをダウンロードするか、ビルドした後、ターミナルから実行可能なバイナリを叩くことでアプリケーションの起動が行われます。

$ ./sample-web-app_darwin_amd64
starting server...

アプリケーションにアクセスしてみます。http://localhost:8080/にアクセスします。

f:id:syanbi:20171010162501p:plain

login画面が表示されれば、アプリケーションの起動成功です。

サンプルアプリケーションで確認したいこと

サンプルアプリケーションに対して、確認したいことをまとめます。

  • ログインできる。
  • 投稿できる。
  • ログアウトできる。

この3点をみなせば今回は :ok_hand: ということにします。

WebdriverIOでのシナリオを作成する

ターミナルにて、WebdriverIOのシナリオを作成するための ディレクトリを作成します。

$ midir -p ~/Sandbox/webdriver.io_sample

WebdriverIOのドキュメントにあるPage Object Patternを参考にして、テスト用のシナリオファイル(spec)を書いてみました。

bitbucket.org

selenium-standalone-server を立ち上げ、テストの準備を行います。

$ selenium-standalone start

selenium-standalone コマンドによりselenium standalone serverが立ち上がったことを確認後、 sample-web-app-specを使って簡単なテストシナリオを実行します。

テストシナリオでは、以下の動作を確認します。

  1. サービスにログインする
  2. コメントを書き込む
  3. ログアウトする

です。

sample-web-app-specを、リポジトリよりgit cloneした後、

$ npm install

を実行し、必要なnpmパッケージをインストールしてください。 インストール後、

$ ./node_modules/.bin/wdio webio.conf.js

というコマンドを実行すると、selenium standalone server経由でchromeを立ち上げ、 アプリケーションに対してテストを実行します。

f:id:syanbi:20171010225356g:plain

テストシナリオは、Page Object patternを利用しており、WebdriverIOのtemplateを参考に書いています。

例)

import chai from 'chai';
import LoginPage from './../pageobjects/login.page';
var expect = chai.expect;
var date = new Date();

describe('login - comment - logout', function() {
  it('should allow access', function() {
    LoginPage.open();
    LoginPage.username.setValue('user');
    LoginPage.password.setValue('password');
    LoginPage.submit();

    expect(browser.getText('h1')).to.contain('Comments');
  });
});

WebdriverIOにはいくつか、BoilerTemplateが置かれており、 好みの設計で書かれているものを見つけて使うと楽です。

github.com

外部サービスを利用したE2Eテストについて

外部サービスを利用し、E2Eテストを行うことも可能です。 Sauce Labsのサービス上でテストシナリオを実行することができます。

webdriver.io

localhostのアプリケーションをSauce Labsでテストしたい場合は、 SC Proxy を利用することで可能となります。 SC Proxyの説明については本記事では割愛いたします。m(_ _)m

WebdriverIOの魅力

WebdriverIOでテストシナリオを書き、実行基盤を構築した経験から見えてきたものとして

  1. 豊富なドキュメンテーション
  2. SaaSとのつなぎ込み
  3. node.jsを採用

以上3つの魅力があげられると思います。

豊富なドキュメンテーション

WebdriverIOのサイトにありますが、何ができるのか、が明確化されているのでラーニングがしやすかったです。

SaaSとのつなぎ込み

Sauce Labs、Browser Stack, TestingBotなどE2E用SaaS企業からのサポートを受けており、つなぎ込みのためにはドライバを切り替えるだけで良いというのがあります。

Node.jsの採用

こちらは、Chrome DevToolsなどでrenderingされている要素をXPathで抜き出したり、ちょっとした処理をDevTools上でJavaScriptを使って処理した結果を移植する作業がしやすかったためです。

まだ運用は始まったばかりで本格的ではありませんが、E2Eテストでなければ解決できない課題(課金を行った後別サービスですでに課金状態になっているか...など)へのテスト基盤として利用できるよう知見を溜めていきます。

エンジニア採用

弊社 freee K.K. では、エンジニアを積極採用中です。

jobs.freee.co.jp

SET職についても募集をしています。

jobs.jobvite.com


  1. appiumを利用するためには、service pluginをインストールする必要があります。WebdriverIO - Appium Service

  2. Seleniumとして開発されていたものと、WebDriverとして開発されたものがmergeされ、SeleniumWebDriverとなりました。E2Eテストで利用されたり、integrationテストで利用されるframeworkで多数採用されています。

RubyKaigi 2017に参加しました

こんにちは、freeeで人事労務ソフトの開発をしているid:p__okaです。

freeeはRubyKaigi 2017にスポンサーしました

今回はじめてRubyKaigiにスポンサー参加させていただきました。 スポンサーブースでは、RubyKaigi限定のノベルティを配布しました。

f:id:p__oka:20170927133524j:plain

ブースでは主にfreeeのエンジニアの働き方についてお話させていただきました。 また、個人事業主として会計freeeを使っていただいている方にも多く来ていただきました。

ブースに来ていただいた方々、ありがとうございました!

f:id:p__oka:20170927133628j:plain

Drink Upを開催しました

Rubyistたちの親睦の場として、Drink Upを開催しました。 freee.connpass.com

普段お会いすることの少ない九州や沖縄の方にも参加していただき、Rubyの話、エンジニアのキャリアの話などで盛り上がりました。 参加してくださった方々、ありがとうございました! f:id:p__oka:20170926162611j:plain

次は仙台でお会いしましょう!

freeeは絶賛エンジニア採用中です!

今回、私たちfreeeのエンジニアは業務扱いでRubyKaigiに参加しました(参加費も会社補助が出ます)

freeeのビジネスに興味がある方、Rubyを活用したソフトウェア開発に興味がある方はぜひfreeeに遊びにきてください!

jobs.freee.co.jp

www.wantedly.com

人事労務freeeが緑色になるまで

こんにちは、id:ymrl です。最近は昼間はfreeeでエンジニアを、夜はクマサン商会で漁業をしています。

先日、これまで「給与計算freee」だった製品をリニューアルし、「人事労務freee」としてリリースしました。リニューアルに伴っていくつか機能を追加したのでそちらの紹介もしたいのですが、今回は製品のロゴやUIの色も大きく変更した話をします。

f:id:ymrl:20170802192806p:plain
人事労務freeeのロゴ

広い視野で人事労務の業務をサポートできるサービスへ

人事労務freeeの前身である給与計算freeeは、元々freeeがクラウド会計ソフトで創業した会社だったこともあって、給与額や、そこから控除される税金や保険料など、お金の計算をメインとしてスタートしました。スモールビジネスの現場で人事労務を担当する方々にとって、どんな業務が大変で、何をするとより効率的に業務をしていけるようになるかを調べたり考えたりするうちに、お金の計算にこだわらずもっと広い視野で人事労務の業務をサポートできる機能を作っていくべきだという考えに至りました。

そこでサービスの名称を「人事労務freee」に変更することになりました。

給与計算freeeのベータ版をリリースしたのは3年前の5月ですが、このときは先行するサービスである会計freeeにあったものを「給与計算」に書き換えてそのまま使っていたような感じでした。それから3年のあいだに数多くの進化を遂げてきましたが、「会計freeeと同じようなロゴとUI」という状態はずっとそのままでした。

リニューアル以前の給与計算freee

おかげさまで給与計算freeeは、この3年間で当初では想像できないほど多くの事業所に導入していただくことができました。しかしそれでも、会計freeeの知名度には遠く及ばず、なかなか「freeeは会計だけでなく、給与計算もやっている」と認識していただくことができていませんでした。そこで、今回のリニューアルを機に、会計freeeではないfreeeのもう一つのサービスとして人事労務freeeを知っていただくために、製品のロゴやUIの色合いも変更することにしました。

ロゴの色を決める

f:id:ymrl:20170803123453p:plain
検討の場にあった色たち

リニューアルにあたって、リリースに先行して3月に名称とコンセプトの発表を行う予定であったために、最初はとにかくロゴの色を優先的に決める作業が必要となりました。緑に限らずさまざまな色を検討したのですが、「会計freeeのロゴと並べたときに違和感がない ようにしつつ 会計freeeとの違いがハッキリとわかる」という条件から最終的に 緑色 が選ばれました。

f:id:ymrl:20170802195304p:plain
人事労務freeeと会計freeeのロゴ

4月には77歳の新入社員!?加藤一二三 人事労務への挑戦というサイトを公開したのですが、ここでも新しいロゴと色が使われています。

www.freee.co.jp

人事労務freeeが緑色になることから、このリニューアル作業は「緑化」と呼ばれるようになりました。

UIも緑に

サービスのUIについても、新しいロゴにあわせて違和感のないようにしたかったため、UI全体の色合いを変更しました。ロゴの緑色と調和しつつも、これまでのUIに親しんできたユーザーの方々や、会計freeeを使っていた人がこれから人事労務freeeも使い始めるという時に、使い方の面で戸惑ったりすることのないようにしなければなりません。これまでの給与計算freeeとも、freeeの他のサービスとも、地続きになっているUIデザインにする必要がありました。

リニューアル後の人事労務freee

ここでは、ロゴの色である #006939 に加えて #10B56C という少し明るい緑色も使い、それらの色を既存のUIのおもに青系の色が使用されている場所にあてはめていきました。

これらの多くは社内でサービスを横断して使用しているスタイルシートに使用されているため、ひとまずこれらを上書きする形で実現しました。freeeのサービスではほぼすべてのスタイルシートにSCSSを使用しているため、「共通のスタイルシートを @import した上で色を変えるスタイルを指定する」というやり方をとっています。

/* button.scss */
@import 'common_components/button'; /* サービス共通のスタイルが指定されているファイル。青い。*/
.button { /* 上記のファイルの内容を上書きして緑にする */
  background: #006939;
  border-color: #006939;
}
.button:hover {
  background: lighten(#006939, 10%);
  border-color: lighten(#006939, 10%);
}

SCSSファイルの構造を工夫すれば、スタイルの上書きをすることなく、CSSのビルド時に指定したカラーパレットを使うようにすることもできそうな気もしますが、今回は開発スピードを重視してこの方法をとっています。

ドッグフーディングする

これまでの長い間、「freeeのサービスは青っぽい画面」というのが常識だと思って開発をしてきたわけですが、そのおかげで大きく色を変えるのは開発者としては勇気が必要でした。ある日突然UIの色が変わって、そのことで使用感に大きな影響がでてしまうのは避けたい気持ちがありました。

また、製品のヘルプページに掲載しているスクリーンショットを変更する準備をしたり、セールス活動やマーケティング活動に使用する資料を作るためにも、社内にリニューアル後の状態のプレビューを展開しておいたほうが良いだろう、と考えました。

そこで、せっかく自社の給与計算もfreeeのサービスでドッグフーディングしていることを利用して、社内の全従業員の目を使ってあたらしいUIに問題がないかを確認してもらうことにしました。

f:id:ymrl:20170802201547p:plain
人事労務freeeの給与明細画面。freeeの従業員は毎月ここで給与明細を確認できます。

確認も普段の操作と同じやり方でできるよう、社内の従業員がログインしたときだけ新しいUIが表示されるようにしていました。普通ならば別のURLを用意してそちらにアクセスしてくださいとお願いをしたりするところだとは思うのですが、確認のために身構える必要があるよりも、普段と同じように気軽に見てもらえるほうが社内の協力を得やすいだろうというのが理由です。

せっかくならこのプレビューの公開を楽しいイベントにしてしまおうということで、社内プレビュー公開の目標日を 給料日の前日 として、新しくリニューアルした画面で給与明細を確認してみよう というキャンペーンにしてみました。当日はメールやSlackで呼びかけて、とにかく新しいUIに触れてみましょうというアピールをしました。

f:id:ymrl:20170802192538p:plain
Slackで宣伝する様子

おおきく色が変わったこと対してブーイングがないか心配でしたが、やってみた結果としてはとても好評で、社内で最も多く寄せられた意見は「目に優しそう」でした。

おわりに

そういうわけで、今回のリニューアルでいろいろなところの色を変えた話をご紹介しました。これまで青系の色で作るものだと思いこんでいたサービスのUIを、いきなり別の色にしてしまうというのは新しい試みで、先述したSCSSファイルの構造以外にも、webpackのcss-loaderによるスタイルシート入りの共通コンポーネントではどうするべきなのかなど、いろいろな課題が残っています。これらの課題も少しずつ解決していこうと思っています。

freeeでは色彩やCSSやSplatoonに造詣の深いエンジニア・デザイナーを募集しています。興味のある方はよろしくお願いします。

jobs.freee.co.jp

新卒プロダクトマネージャーが苦労した3つのポイント

こんにちは、タケノコプロダクトマネージャー*1のktaroです。

先日、「freeeのPMチームと語る、本当に泥臭い現場でのプロダクトマネジメント談話会」というイベントを開催しました。私を含む弊社の3名のプロダクトマネージャー(以下「PM」)(執行役員PM、エンジニア兼務PM、若手PM)が、PMのリアルな苦悩とその乗り越え方について共有させて頂きました。今回は、その中で若手PMの私がお話しした、非常にチャレンジングな体験についてご紹介させて頂きます。

突然ですが、下記の自己紹介スライド*2にてびっくりされるような事実が1点ありますが、お気づきでしょうか?

f:id:noraemon10:20170726173910p:plain

正解は、入社1.5ヶ月目の新卒*3がPMに就任していることです。PMというロールは、その担当するプロダクトにおいて最大の責任を持つロールであり、PMの実力がプロダクトの生死を左右すると言っても過言ではありません。そんなロールに新卒を就かせるという決断を、よく弊社はしたなと自分でも思いますが、実際にチャレンジングながらも非常に有益な体験をすることができました。

丸裸でエベレストを登るようなもの

まず、なぜチャレンジングであったかというと、下記3つの能力についてゼロスタートであったからと言えます:

  • ベーススキル:会議ファシリテーション力、資料作成力、プレゼンテーション力、プロジェクトマネジメント力等
  • ドメイン理解:プロダクトが解決する課題の分野に関する深い理解。弊社の場合は中小企業のバックオフィス業務
  • PMスキル:ビジョンや戦略を作る力や、人を動かす力等

この状態でPM業をやるということは、登山初心者が丸裸でエベレストを登るようなものです。この人が当然ながら最速でエベレストを登ることができないように、ベストなプロダクト戦略を導き出すことは非常に困難です。

突然訪れた機会

そして、なぜこのような機会を得たかというと、下記3つの条件が偶然にも重なったためです:

  • 前任の方が起業し、freeeを卒業したため、空きポストができた
  • プロダクトがまだインキュベーションフェーズにあり、事業としての価値は限定的であった
  • 弊社内にプロダクトマネージャーはまだ少なく、今後増員するにあたり、育成の知見を溜める必要があった

以前からPM職に強い興味があった私にとっては、この上ないチャンスでした。

四半期開発プラン作りで四苦八苦

実際に、どれだけチャレンジングであったかを具体的なタスクを例に、上述のゼロスタート3点セットに沿って(赤裸々に)ご説明します。それは、次の四半期の開発プランを作るというタスクです。つまり、今どういったユーザーさんのどの課題を解くべきかを決め、社内の意思決定者が納得できるストーリーを作り上げ、それに沿って具体的に開発する機能と順序を3ヶ月分決めるというタスクです。

まず、このタスクを遂行する上で、ベーススキルがゼロであったために下記の様な単純な失敗をしました:

  • 関数の対象セルがズレていて開発工数の計算を間違う
  • 資料がごちゃごちゃしていて見にくい
  • 議論のファシリテーションが出来なく、真剣に心配される
  • 大人数を呼んだミーティングでグダグダしてリソースを無駄にする
  • スケジュールやタスク管理ができておらず、締め切りを過ぎてしまう

次に、ドメインの理解がゼロであったために、下記の様なことが分からず苦労しました:

  • 労務管理(給与計算freeeが対象とする分野)って何!?何が大変なの!?
  • みんな労務管理をどうやってるの?給与計算freeeを使うと何が違うの?
  • 複数の給与締日支払日設定って何で必要なの?
  • 今、給与計算freeeでは何ができて、何ができないの?
  • 労務手続きってどんなのがあるの?

そして最後に、PMスキルがゼロであったために、下記の様なことが分からず苦労しました:

  • 皆が納得するストーリーってどうやって作るの?
  • 優先度ってどうやって決めるの?AとBの機能で、どっちの方が優先度高いの?
  • 事業的にインパクトが大きいのはどのストーリー?
  • 市場は今どんな状況なの?競合の動向は?

結果として、四苦八苦しながら、いろいろの方に助けられながら、何とか開発プランを作ることができました。そして、一度この課題を乗り越えたからこそ、今の自分であれば、より短期間でより優れたものを作れる自信があります。その理由は次にご説明します。

ロールモデル登場

6ヶ月間エベレストを登り続けた後、担当プロダクトの事業的な重要性が急速にあがりました(参考プレスリリース:freee がHR事業の軸となる新サービス「人事労務 freee」を発表。人事労務に関する業務をクラウド上一気通貫で対応しHRtechを推進)。そういったこともあり、よりシニアなPMがアサインされ、私はそのPMと一緒に働くことになりました。

実は、一緒に働き始めた最初の3ヶ月間が、自分自身が最も成長できた期間であったと思います。なぜなら、そのPMは、自分が四苦八苦していたPM業の理想的な熟し方を体現していたからです。自分にとっては答え合わせのように、そのPMと自分とのギャップを目の当たりにし、自分が目指すべき姿を理解することができました。すなわち、エベレストを登頂できる人が一体どの様な人なのかを理解していないまま登るのと、具体的なイメージを持って登るのとでは、圧倒的に成長スピードが違うということではないでしょうか。一度頂上を見ずに、最初からアシスタントとして働いていたら、同じような成長は遂げられなかったと思います。

最後に

非常にチャレンジングな機会を頂いた中で、目指すべき姿を正確に理解できたことが一番の収穫であったと言えます。やはり新卒はずっと下から見上げることが多いので、中々頂上のイメージが付きづらいです。そのため、新卒には少しの間でも頂上を体験させ、合わせてロールモデルを見せてあげることで、圧倒的に早く成長するのではないでしょうか。PMに限らず、新卒を育成する機会がある方は、ぜひ試してみてください。

freeeでは大きな山にチャレンジするPMを募集しています。若手からベテランの方まで、幅広く仲間を探しておりますので、ご興味あればぜひご連絡ください(こちらより)。

*1:タケノコプロダクトマネージャー:プロダクトマネージャー(以下「PM」)の下で修行を行う者。一般的には、アシスタントPMやアソシエイトPMとも呼ぶ。筍のように早く、強く、しなやかに成長する期待の意味が込められている。

*2:イベントで使用したスライド資料は、かなり攻めた内容や表現になっておりますので(”泥臭さ”を重視したため)、公開は控えさせていただきます。

*3:実は正確には出戻り第二新卒です。freeeでインターンを経験した後、新卒で外資システム系企業に入社し、半年でfreeeに戻ってきた経緯があります。ただし、PMとはかけ離れた仕事内容でした。