この記事はselenium_and_appiumアドベントカレンダー2016の19日目の記事です。

はじめに

初投稿です！TEISHISEIです！語弊を恐れず書きます!お手柔らかにー

僕の会社はいろいろなサービスがたくさんあり、その分だけテスターがいます。
永遠と、リンク切れがないか調べたり、全ページをなめまわしてスクショ撮ったり、確率で起こるイベントが出るまでマラソンしたりです。
Seleniumはそういうテストを自動化してくれますね。
掘り返せば掘り返すほど、自動化が必要な案件はでてきます。
今度は僕が永遠とSeleniumのコードを書く必要が出てきます。
僕は、それも自動化が必要だと思いました。
プログラマーでなくてもみんながテストを構築出来る方法がないかと模索しました。
必要な要件をまとめたのが以下です。

第一に使用者はプログラマーではない、前提知識をなるべく少なく
ブラウザの操作を記録出来る事
編集はGUIである事
ifやloop系の処理も書きたい
クロスブラウザ

Selenium IDEやSelenium Builder、imacrosや他の様々なソリューションをあさりました。
どれも一長一短を持っていて、何かしら一つは壁がありました。
ゲーム系だと、マラソンでloopが必要、スタミナの回復だったり要望が積み重なってifが必須で、最終的にはif文の使い方教えたりする必要があったり。
出力の際に対応してないステップだとエラーが出て、削るべきステップがあってうんざりしたり、
クロスブラウザではなかったり、細かいのだと、ステップの一括削除ができないとか削除ボタン押すために3回もクリックが必要だったりとか。外部APIにリクエストを飛ばしたいとか。
要望が増えていきました。

なので作る事にしました。
その名も Selenium Code Builder
そう、車輪の再開発を行いました。
再開発どころか、拡張内で実行する方法はありません。その名の通りCodeをbuildします。
テストコードを作成し、それをRubyやPythonで実行します。(windowsはpython環境の方が構築しやすいのでpythonでも出力出来るようにしています。)

もちろん他のツールに勝っているなどと思っていませんが、要望を素早くキャッチアップし、更新出来るメリットがありました。使い勝手やifやloop処理を組み込めるようにはなったので満足しています。
この度、opensource化する事になったので、少しでもSeleniumを触れる人が増えればと思い、共有します。

概要

Selenium Code Builder GitHub

Seleniumを使ったブラウザテストのコードをGUIで組み立て、出力するChromeエクステンションです。
出力したテストコードは下記の言語とブラウザに対応しています。

言語

Ruby
Python

実行できるブラウザ

Chrome
Firefox
Android Chrome
Android Browser

インストール方法

すいません、まだ公開されているエクステンションではないので、手動でbuildする必要があります。

git clone https://github.com/arakawamoriyuki/selenium-code-builder.git
nodejsを入れる
buildツールgulpとフロントエンドライブラリ管理ツールbowerをinstall

$ npm install -g bower gulp
$ npm install
$ bower install
$ gulp build

Chromeを開く
メニュー
設定
拡張機能
デベロッパーモードにチェック
パッケージ化されていない拡張機能を読み込む
selenium-code-builderフォルダを指定
Chromeのツールバーから拡張を起動

何が出来るの？

ブラウザの操作を記録

ブラウザの操作を記録する事ができます。記録出来る操作は下記です。

URLの移動
クリック
ダブルクリック
入力 (input[type=text,textarea])
チェック (input[type=checkbox,radio])
選択 (select)

ファイルの保存と読み込み(json)、RubyやPythonに変換

ファイルの保存と読み込み(json)、RubyやPythonに変換を行えます。
変換する際、Chromeやfirefox、Androidの各versionとブラウザを選択する事ができます。

定義出来るステップ

URL関連

指定ページに移動
指定ページにbasic認証をして移動
ブラウザの戻る、進む、リロード
現在のurlを取得

DOM エレメント関連

実際に要素をクリックする事でcss selectorを取得し、要素を判定します。

要素をクリック
要素をダブルクリック
input要素のクリア
input要素に入力
keyイベント送信
チェックボックスに入力
ファイルアップロード
要素のドラッグ
要素へマウスオーバー(メニューを出すなど)
範囲選択(WYSIWYGエディタで記事書く自動化とかしました)
要素オブジェクトの取得
要素のテキスト取得
要素の値取得
CSS値取得

ブラウザ関連

javascriptの実行
スクリーンショットの取得
指定pxスクロール
ブラウザのwindowサイズ変更
表示中のjsonデータ取得
window.alertのOKを押す
window.alertのキャンセルを押す
window.promptのに入力する
window.alertの文字を取得する

RubyやPython関連

コード実行
スリープ
変数定義
配列定義
ハッシュ定義
計算
条件分岐(if)
配列のループ(for)
条件ループ(while)
指定回数ループ
プリント
時間取得
外部ファイルを呼び出す(.rbとか.py)
関数定義
関数実行
APIリクエスト
コメントの挿入

テスト関連

値の検証
値の正規表現検証
現在のページに指定テキストがあるか検証

その他機能

指定selectorがページ内にいくつあるか調べる検索ツール
複数ファイルに分割して一つのwebdriverを動かす仕組み
chromedriverで全体スクショを取る

さいごに

使用者はプログラマーではない事を踏まえて敷居をできるだけ低くしようとしましたが、やはり拭えないものもありました。
Seleniumという選択肢があるという事が周知でき、テストという枠じゃない使用方法があったり、なんだかんだ工数も削減できて、良かったと思っています。
今後もE2Eが発展しますように。

次の記事も僕です。つまらない記事ですいませんがおつきあいくださいませ！

Seleniumを使ったテストをもっと身近に