2014-04-06

CasperJSじゃなくてSeleniumWebDriverをRSpecであれこれできるようになる方が先だな！

元旦に「やるぞ」と言ったものの、ここ2ヶ月くらい何もできていないので、いいかげんヤバイなと思ってたところに背中を押されたので勉強再開したいと思います。

この間、身の回りでSeleniumがぐいぐい来てて、というかCasperJSだとブラウザごとの違いがわからないじゃないか、っていう「何をいまさら」っていうことに気づいてしまったので、SeleniumWebDriverがいいじゃないか！とね。

ちょうどお仕事でRSpecでSeleniumWebDriverであれこれやったら楽しそうだった(メンバーにやってもらうことにしたｗ)ので、便乗して自分も勉強しちゃおうかなと。

ということで気持ちだけは盛り上がってるところ。あと、他の人が書いたコードが自分の環境で動かないのを何とかしてるところ。

2014-02-12

"テストから見えてくるグーグルのソフトウェア開発"を読んだ時のメモ

ここしばらくプログラム勉強ができていないのは私のせいですスミマセン。

いかんせん体系的に勉強したことがないので、非常につまらないところで長時間止まってしまうところがありまして。で、思ったのが、ちょいと調べてわからないならわかる人に聞きまくるソリューションで行こうと思いました。分かる人、優しく教えて下さい。

今回の記事もプログラムの話ではなく、タイトルの本を読んだ時のメモです。数年前に http://www.publickey1.jp/blog/11/post_144.html の記事を読んだことがあったのですが、本として出ていることを去年末に知ったので買ってみました。ボリュームあって読むのが大変でした。。。

部分的になりすぎてこの本の魅力をほとんど伝えられない投稿になってしまいましたごめんなさい。ホントはもっとQAもコードで話をしていくとか、デベロッパーと同等の立場、給料で働いているよとか、ややもすると開発者よりも格下に見られることのある仕事ですが、GoogleでのQAの位置づけってスゴイ（当然それだけの能力が求められるけど、そういう体制、文化を浸透させてきたという点で)なーと思いました。しばらくしたらまた読んでみます。

グーグルの社員として認められるにはコンピューター科学の基礎とコーディング能力を持っていなければならない。

とか

SWE…Software Engineer デベロッパーのこと。
SET…Software Engineer in Test SWEが作った機能のテストを書く。設計やコードのレビュー
TE…Test Engineer 第一にユーザー、第二にデベロッパーのために(エンドツーエンド)テスト自動化を書く。多くのコードを書く人もいればほとんど書かない人もいる。

って書いてあって、それぞれの職種がどんなことをやっているかの記述もあったのですが、、、、なんというかよく理解できませんでした。。。＿|￣|○　色々書いてあるのですが「具体的にはなんだろう」って思っちゃったので。テストコード自体とか、テストフレームワークとかテストインフラを作ってる人がデベロッパーと同じ立場で仕事をしていて、自動でできるところは自動化するのが正義って感じだけど、人じゃなきゃできないところ(UIの美しさ、表示するとプライバシーの問題が起きるかどうか、などの人の判断を必要とする問題)だけを手動テストの領域に留める、と。

テストコードが役に立つのは、開発を加速するような形で実行できる場合であって、開発がスローダウンするのでは意味が無い。そこで、テスト開発は、開発の一部であって開発から切れたものにならないように開発プロセスに統合されていなければならない。

TDD、単体テストはデベロッパーが責任を負う、とした上で、この手法(体制？)ってどうやって成り立ってるのだろうか。グーグルくらい巨大な組織だからなのかなーとも思う。

テストプランは、テスト関連で最初に作られ、最初に無視されて死んだも同然になってしまう成果物だ
テストに直接結びつかないテストプランは無駄だ

んー、確かにテストプランは作ったはいいけど使われない、って思われますね。でもこれはWebの世界では同意しますが、メーカー(デジカメ)にいた時はきちんと効力を発揮していました。リリース判断の材料としてここで定義された「テスト」が完了していることが必須だったし、それに則ってプロジェクトが進行していたし。ただ、この本もテストプランは不要とは言ってなくて、最終的な成果物は(プロダクト)コードであり、コードのアップデートに合わせてテストプランも更新され、テスト中に役に立つ物じゃなければならない、ってことなのですが、それが大変なのよね。例えばあとから入った人がプロジェクトやテストの全体像、今の状況がすぐに分かるものである、とかね。

あと、BITE(Browser Integrated Testing Environment)についての記事が非常に興味深かったです。「バグの報告」を「テスターの時間や精神的エネルギー」を浪費する行為として位置づけ、もっとバグに警戒すべきときに集中力や創造力が失われてしまう、ということから開発されたらしい。

で、これは何かというと、Chromeのエクステンションとして存在し、Chrome上でバグがあった部分をクリックするだけでハイライトされ、自動でバグとして登録できるというすぐれもの。URL、ページ上の要素/テキスト、スクリーンショットの添付はもちろん、テスターがそのページでしていたことがリプレイできるJavaScriptが生成されるという・・・なにこれスゴイ。(もちろん手入力もできるフィールドも用意されている)ついでに、同じ要素に対して他の人がすでにバグ登録してないかとかも出ちゃったりして、二重登録とかも防げるって、ものすごくない？

だけど、https://code.google.com/p/bite-project/ に行ったら「I apologize but there is no one left to maintain this project.」ってことなので開発は終わっちゃってるんですね。。。画期的だと思うんだけどな。(Chrome以外のブラウザはどうすんだ、って話もあるけど)

他にもいーっぱい線を引いたところはあるのですが、まぁなんというか、今私が行っている「ブラックボックス中心のテスト」はそれはそれとして絶対に必要なのですが、もっとスマートにテストできるような仕組みにしなければと思うわけです。それには技術を駆使する必要があるわけで、勉強しようっていうモチベーションが上がってきました。

今はE2Eテストを自動化してみる、っていうのが目下の目標ですが、結局そのテストが「的を得ているか」は人が考えるわけで、行き着くところは人のアイディアだと思うのです。どれだけ意味のあるテスト項目を考えられて、効率よく実施できるかかってのがQAエンジニアの真価なんだろうなと思います。

2014-01-18

第1回日本Seleniumユーザーコミュニティ勉強会　感想

告知はこんなんでした。
http://kokucheese.com/event/index/117476/

(発表資料は公開されたらここにも追記します)

記念すべき第1回は、米Sauce Labs社CTOでSeleniumの生みの親でもあるJason Hugginsさんをお迎えして、最新のSeleniumについて勉強します。

ってことですよ。ナイスガイでした。

まず感想を。

これまで自分たちで出来る範囲でしか活用できておらず、いやいや、もっといろんな活用方法があるよ、ってのを垣間見ました。参加者の半分くらい(根拠無し)は開発者だった気がしますが、初心者向けの話から深い話まで聞けた気がします。非開発者の私でもいい刺激を受けました。

特に「これは！」と思ったネタランキング。

第一位：Jenkinsと連動

質疑で出た話。

Q：Selenium WebDriverでDailyテストしています。それをJenkinsと連携してレポートしたい。気をつけることは？
A：SeleniumのテストをJenkinsに出すにわたって、テスト結果をxUnit形式でXMLで出力できる。それをJenkinsに取り込む。

くらいしかメモれなかったのですが、その後のLTされて他人もJenkinsつかってあれこれやってますよって話。ちなみに私はJenkinsは開発者が使っているのを見たことしかないです。

Jenkins側にSeleniumのプラグインが用意されてるみたい。

■SeleniumIDEを使ってる時

seleniumhq plugin
IDEで作ったHTMLのテストケースを自動実行！
seleniumhtmlreport　plugin
なにするか忘れた。

■WebDriverを使ってる時はプラグイン不要
xUnit形式のテスト結果を生成すればいい xUnit形式でだすと、どのコミットで問題が起きたかわかる

SeleniumGridを使うと複数マシンで並列テストできる。

SeleniumPlugin
中心のマシンとノード(どのブラウザか)
jenkinsで一回設定すると、各マシンをノードとして扱える

Jenkinsおじさんに「定期的に、自動で実行して、テストに失敗したらアナウンスしてくれる」ようにしてもらおう！

第二位：Appium

できることはSeleniumと同じ。それのモバイル版。1年前にOSS化したようです。

URL: appium.io
日本語サイトもあったわ。http://appium.io/jp/index.html
Source: github.com/appium/appium

スマホ上にあるブラウザ
iPhone、Androidのネイティブアプリ
2に組み込まれているブラウザのテストが可能だそうです。

スマホのテスト、時間かかるもんねー。これは効率化したい。
1つのテストを書くとiOSとAndroidのどっちでも動くらしいです。ステキ過ぎる。

第三位：記録ツールはIDEだけじゃない

記録再生ツールには * SeleniumIDE * SeleniumBuilder　←なにこれ

SeleniumBuilderってのがあるらしい。
SeleniumIDEとSeleniumBuilderの比較サイトがありました。
http://blog.trident-qa.com/2013/12/selenium-builder-vs-ide-1/
このサイトの○×△を見る限り、IDEで十分じゃないかなーとおもった。

Builderで可能で、IDEで不可能なこと

記録・再生開始時のCookie消去
ブラウザ上で要素を選んで、操作対象を変更

1,2も使う可能性はあるけど、今のところIDEのほうが使い勝手がいいのかなー？ (Builderを使ってみればいいのだがｗ)

小ネタ

誰かが言ってたネタ。
「スクリーンショットをGIFアニメで取得する！？」
アクション毎にスクリーンショットをとったら、どんな操作したのか動画でわかりそう。これ、おもしろい。

Selenium3が去年のクリスマスにリリースされるって話だったのにまだ出てないようです。
3ではPCブラウザにもモバイルにも対応、みたいのがウリだそうです。

あと、SeleniumWebDriverはW3Cのdraftになっているみたい。
ブラウザのベンダーがselenium対応をやってくれるようにする(W3Cで標準にすることで)のを狙ってるっぽい。
なにこれ、すごい。

ッて感じの勉強会でした。
運営の皆さん、Jason Hugginsさん、ありがとうございました。とっても刺激になりました、

2014-01-16

TDDとテスト自動化

今回はプログラムじゃない話を。

アクセルを踏むためのテストとブレーキを踏むためのテストの記事を教えてもらったの読んだ感想を。

私もTDDは「開発」手法であって「品質保証」の手法ではないと思います。(品質保証が何なのか、品質保証と品質管理はどう違うのか、という話はありますが)

ですので、TDDのテストがすべてグリーンだからといって、ユーザーの手元で不具合が起こらない、とは言えないと思っていますし、そこまでTDDで求めてしまうと上記の記事にあるようにTDDで行うテストとしては重すぎるし開発スピードも落ちるんだろうなと。特にWebの世界じゃスピードってものすごく大事。時には品質より大事。

デベロップメントテストは開発者がアクセルを踏むためのテストで、品質管理のテストは開発者に適切にブレーキを踏ませるためのテストなんだから。

はいい表現だなと思いました。

私が「技術を使ったQA」として最初に目指している状態は「E2Eテストの自動化ができること」です。

これは「自動テスト」ではありますが、私がイメージしているのは「現在人間がやってるテストで、機械に置き換えられる部分を置き換えていく」ことです。目的はリグレッションテストとして、その後の追加改修の際にデグレがないことを手動で確認する手間を省く。

機械に置き換えられない部分もあるわけです。今読んでる(去年からまだ読んでる)テストから見えてくるグーグルのソフトウェア開発にも出てくるのですが、いくら自動化が進んでも「知的な探索テスト」は人間がやったほうがいい。

これは自動化するときのポイントである「操作、判定、報告」でいうところの、「判定」の部分において、人間ならではの曖昧さ(曖昧であっても困らない部分)をどこまで許容できるか、てところにも関わってきてると思います。

ということで、「開発者なら当たり前にTDDやってるよね」という風潮が広がっている気がしますが「QAなら当たり前にE2Eテストの自動化やってるよね」という流れに乗って行きたいです。(あ。自動化のプロと探索テストのプロが同じ人かどうかは考えてないです)

2014-01-13

PhantomJS+CasperJSを使ってみる

(今回からMarkdown記法にしてみましたが読みにくい。うまいtipsがあったら教えて下さい)

久しく時間が空いてしまいましたが、この期間は Quickstart を見ながらCasperJSを使ってみようとしていました。

しかしながら私の基礎知識が足りないのでサンプルコードを見ながら一行進んでは調べて、、、を繰り返していました。(Casper以前に)わからなかったのは

Linuxの基本操作、permission設定。
そもそもエディタが使えない。ひとまず素のvi。syntaxの色分けとかできてない。vimrcをなんとかするらしいがうまくいかないのであとで調べる。★
vimとかemacsとかよくわかんないので Sublime text が非開発者にはフレンドリーっぽかったので使ってみようと思ったのですがWindowsからSSHで仮想環境のCentOSにつなぐ方法がわからなかったのであとで調べる。★
CSSでのセレクタ、プロパティ、値。

基礎知識って大事。そこで役になったのがドットインストール。コンパクトに基礎を理解するにはとても参考になりました。CSSとDOM操作あたりを見ました。

■やったこと

1 http://docs.casperjs.org/en/latest/installation.html にしたがってPhantomJS、CasperJSをCentOSにインストールします。

2 http://docs.casperjs.org/en/latest/quickstart.html#a-minimal-scraping-script にある"A minimal scraping script"を丸写しして実行。URLを変更してみたりして実行。

ここまでは大丈夫。何をやってるのかも書いてあるので大丈夫。そして、より本格的な(?)ブラウザ操作のサンプルコードに入ります。

http://docs.casperjs.org/en/latest/quickstart.html#now-let-s-scrape-google のサンプルコードを下記に転記します。

var links = [];
var casper = require('casper').create();

function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href');
    });
}

casper.start('http://google.fr/', function() {
    // search for 'casperjs' from google form
    this.fill('form[action="/search"]', { q: 'casperjs' }, true);
});

casper.then(function() {
    // aggregate results for the 'casperjs' search
    links = this.evaluate(getLinks);
    // now search for 'phantomjs' by filling the form again
    this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
});

casper.then(function() {
    // aggregate results for the 'phantomjs' search
    links = links.concat(this.evaluate(getLinks));
});

casper.run(function() {
    // echo results in some pretty fashion
    this.echo(links.length + ' links found:');
    this.echo(' - ' + links.join('\n - ')).exit();
});

やってることは

1 http://google.fr/ にアクセスして検索ワードに'casperjs'を指定して検索を実行

2 検索結果をlinks配列に格納

3 続いて'phantomjs'を検索ワードに指定して検索実行

4 検索結果をlinks配列に追加

5 linksの中身を出力

だと思います。サンプルコードなのでこのまま実行すれば動くのですが、私的にわからなかったところを１つずつ調べてみました。上から順番にいきます。

var links = [];
var casper = require('casper').create();

links配列を宣言して、casperjs始めるよってこと、、、だと思う。(インスタンスを作る？)

function getLinks() {
    var links = document.querySelectorAll('h3.r a');
    return Array.prototype.map.call(links, function(e) {
        return e.getAttribute('href');
    });
}

さっそく出てきた querySelectorAll って何？

document.querySelectorAll('h3.r a');

調べたところ、

javascriptの getElementByXxxx に替わる記法。
セレクタ APIは「CSS セレクタにマッチした要素を取得するためのメソッド」
CSS セレクタをキーにマッチした全てのノードをNodeListで取得
'h3.r a' の意味は、「h3要素」で「rクラス」のものの子孫にある「a要素」を指定する
該当したものをまるっと配列で返してくれる

とのこと。実際の検索結果画面のHTMLが下記のようになっています。

<h3 class="r">
  <a href="/url?xxxxxxxxxx">

CSSでのセレクタについては http://dotinstall.com/lessons/basic_css/116 を参考にして理解しました。

/* セレクタを並べた時の意味 */
a, b /* aもbも */
a b  /* aの子孫要素のb */
a>b  /* aの子要素のb */
ab   /* a要素のうちbのもの */

ってことなので、サンプルコードの場合 'h3.r a' のrとaの間に半角スペースがあるので、h3の「子孫要素」にあたる a ってことですね。

return Array.prototype.map.call(links, function(e) {
    return e.getAttribute('href');
});

function(e)のeって何？
- わかんなかった。あとで調べる。★
prototype属性って何？
- http://www.dab.hi-ho.ne.jp/sasa/biboroku/javascript/prototype.html
- javascriptの属性。既に生成したインスタンスを含めて、そのクラスの属性。メソッドを追加できるって。
- ここに深入りすると戻ってこれなくなりそうだったのでこれくらいの認識で進めます。
mapメソッドって何？
- http://keicode.com/jsref/array.map.php
- Array の各要素を引数で指定したファンクションに渡し、その結果を要素とする新しい Array を返します。
- links配列を渡すと、要素のそれぞれに対して function(e) を実行して、その結果を配列で返してくれるのね。
callメソッドって何？
- http://taiju.hatenablog.com/entry/20100515/1273903873
- この説明にある「主体と客体が逆になっている」あたりがこんがらがったけどわかった気がする
- この場合、mapメソッドを所有しているのが Array.prototype で、mapメソッドを実行したい主体が links ってことね。(第二引数はmapに渡したい引数)
- "document.getElementsByTagName('hoge')のように、DOMの要素リストを受け取った時に、見た目はArrayっぽいのにArrayのメソッドを持っていないという困った問題があります。こういう時、callメソッドが使えます。"とのこと。
getAttribute() って何？
- 指定の要素について名前付けされた属性の値を返します。名前付けされた属性が存在しなければ、返される値は null もしくは ""(空文字列)となります
- この場合は href="xxx" のxxxを返す

casper.start('http://google.fr/', function() {
    // search for 'casperjs' from google form
    this.fill('form[action="/search"]', { q: 'casperjs' }, true);
});

fillメソッドって何？
- http://docs.casperjs.org/en/latest/modules/casper.html#fill
- casperjsのメソッド
- 第一引数：セレクタ
- 第二引数：オブジェクトと入力したい値。ここのqは入力欄のname <input id="gbqfq" class="gbqfif" name="q" type="text"...
- 第三引数：submitするかしないか

casper.then(function() {
    // aggregate results for the 'casperjs' search
    links = this.evaluate(getLinks);
    // now search for 'phantomjs' by filling the form again
    this.fill('form[action="/search"]', { q: 'phantomjs' }, true);
});

evaluateメソッドって何？
- http://docs.casperjs.org/en/latest/modules/casper.html#evaluate
- casperjsのメソッド
- evaluateメソッドは「引数であるfunctionを、その時表示されているHTML(DOM)に挿入して実行し、その結果を取得する」という解釈でいいのかな？
- 日本語でこのメソッドを解説しているページが見つからず、公式を見てみましたが、私の読解力ではこんな理解度、、、
- (aggregate=集める、evaluate=評価する、査定するって意味なのねｗ)

casper.then(function() {
    // aggregate results for the 'phantomjs' search
    links = links.concat(this.evaluate(getLinks));
});

concatメソッドって何？
- http://javascriptist.net/ref/Array.concat.html
- javascriptのメソッド
- Array.concat(arrya1,array2...) - 配列を連結した値を得る
- サンプルでは 'casperjs' についての検索結果が links[] に入っているので、それに 'phantomjs' での検索結果を連結してくれる

casper.run(function() {
    // echo results in some pretty fashion
    this.echo(links.length + ' links found:');
    this.echo(' - ' + links.join('\n - ')).exit();
});

echoで出力する

...とここまで。
「使えるようになった」にはまだほど遠いですが、何をやっているのかはわかった気がする。
あとは自分でシナリオ作って、その通りに操作するプログラムをすればいいわけね。
http://docs.casperjs.org/en/latest/quickstart.html#a-minimal-testing-script にはtesting frameworkとしての使い方が書かれているので次回はここから試してみます。