この記事は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を使ったブラウザテストのコードを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が発展しますように。
次の記事も僕です。つまらない記事ですいませんがおつきあいくださいませ！