Skip to content

Selenium IDEの代替を目指すソフトウェアまとめ

Seleniumがこれだけ使われているのはSelenium IDEの存在がとても大きかったと言えます。普通にブラウザを操作するだけでコードが生成でき、それを編集することで様々に値を変更したテストが実現できます。

そんなSelenium IDEは最新版のFirefoxではAPIの互換性がなく、動かなくなっています。そんな中、幾つかのソフトウェアが代替を目指して開発されています。

SideeX (An Extended Version of Selenium IDE)

最も有力と思われる代替ソフトウェアです。Firefoxの他、Google Chromeでも動作します。複数のテストを一つのウィンドウの中でまとめて管理できるようになっています。現在はテストコードの出力機能がないなど、まだ足りない機能も多いですが、開発が活発に行われています。

SideeX (An Extended Version of Selenium IDE)

Selenium Code Builder

Seleniumのテストコード(Ruby/Python)を出力できるレコーダーです。表示値の検証もできます。If/Whileといった構文を入れることもできますが、再生機能はないようです。

arakawamoriyuki/selenium-code-builder: chrome extension

UI Recorder

Node.jsベースになっており、実行するとGoogle Chromeが立ち上がります。そして、操作を行って終了するとmochaベースのテストコードが生成されます。操作中にJavaScriptを実行できるなど、カスタマイズ性は高いです。

UI Recorder | UI Recorder is a UI test case recorder like Selenium IDE.

Kantu Browser Automation

Google Chrome用の機能拡張です。操作を記録して再生できます。テストコードの出力はできませんが、JSON/XMLによるエクスポートに対応しています。JSONからテストを自動生成するのであればKantu Browser Automationがベースにできそうです。

Kantu Browser Automation – Chrome ウェブストア

Selenium IDE

元祖のSelenium IDEです。最新版のFirefoxでは動作しませんが、Firefox ESR版を使えば2018年06月26日までサポートされることになります。それまでにSideeXがSelenium IDEレベルの機能を実装してくれるのがベストでしょう。

Selenium IDE :: Firefox 向けアドオン


Selenium IDEがなくなったことで、類似ソフトウェアが続々と出てきています。まだSelenium IDEをまるっと置き換えることはできませんが、幾つかのニーズには応えられるレベルかと思います。ぜひ試してみてください。

WebブラウザからBluetooth接続できるWeb Bluetoothを試す

HTML5の新しいAPIの中でも特に先進的なAPIがWeb Bluetoothです。Google Chrome60以降、Androidのブラウザでも56以降でしかサポートされていないAPIになります。しかしWebブラウザがBluetooth通信をサポートする各種デバイスと通信できることで様々な使い道が考えられます。

今回はそんなWeb Bluetoothの簡単な使い方を紹介します。

コードについて

Web Bluetoothを扱う場合にはPromise処理が連続して行われます。例えば今回はバッテリーレベルを取得します。

まずWeb Bluetoothをサポートしているかどうかは navigator.bluetooth の有無で判定します。

次にバッテリーサービス(battery_service)をサポートしているデバイスを探します。

この時点でGoogle ChromeにBluetoothデバイスを一覧するダイアログが表示されます。この中から接続したいデバイスを選択します。

接続がうまくいくとデバイス情報が返ってきますので、接続の認証処理を行います。

接続がうまくいったら、バッテリーサービスを取得します。

さらにバッテリーサービスからデータを読み書きするためのキャラクタリステックを取得します。

キャラクタリステックが取得できたら、そのデータを読み取ります。

最後に読み取ったデータを数値に変換して完了です。

そうするとログメッセージが表示されます。


エラーが出た場合にはcatchメソッドを用意しておけば、そこがコールされます。データの読み取りについてはとても簡単にできます。Bluetoothには提供するサービス(プロファイル)が多数あり、それによって実装方法も異なってきますので注意してください。

バッテリーサービスについてはWeb Bluetooth / Battery Level Sampleにて確認できます。また、AndroidアプリのBLE Peripheral Simulatorを使うことで可変できるバッテリー情報を送信できます。お試しください。

HTML5 Conference 2017にてLTをしました

9月23日、東京電機大学にてHTML5 Conference 2017が開催されました。1,600人以上の技術者が集まり、多くのセッションが開かれるHTML5に関する日本最大の開発者向けカンファレンスになります。

今回、その最後のスペシャルセッション(ライトニングトーク大会)にてhifive/Pitalium両方のお話をさせてもらいました。

5分でわかるVISUAL TESTING FOR HTML5

まずはhifive開発チームの石川よりPitaliumを含むビジュアルテスティングの話をしました。ビジュアルテスティングというのはその名の通り、見た目のテストになります。HTML5であれば特にWebブラウザに表示されている内容を比較する(以前を真として今回をテストする)ものになります。

ビジュアルテスティングを行うツールはPitaliumだけでなく、 Applitools Eyes/SI Toolkit for Web Testing/reg-suitなどがあります。それぞれ異なる特徴がありますので、ぜひお試しください。

エンプラ開発の辛みとその解決策

続いて、hifiveエヴァンジェリストの中津川よりhifiveの紹介とエンタープライズにおけるシステム開発の悩みを紹介しました。すでにサポートが終了したブラウザでさえ、現場では今なお現役として使われています。そうした中でもHTML5を使った高度なビジュアル化が求められています。

そうした時に使えるのがhifiveです。特に企業では5〜10年システムが動き続けるのが当たり前であり、そうした環境下においても安心して使ってもらえるようになっています。こちらもぜひお試しください。


HTML5 CoferenceはWeb技術が多数集まり、枯れたものから最新のテクノロジーまで様々な技術が紹介されます。Webの進化はとても早いので、こういった場でキャッチアップするのが大切です。皆さんもぜひ参加してください。

HTML5 Conference

イベントを動的に追加、削除する

Webシステムの開発時においてイベント通知はよく使われます。例えばjQueryでボタンを押した時のイベントは次のように設定されます。

こうした通知機能を任意のオブジェクトに追加できるのがhifiveのイベント通知機能になります。今回はイベントの動的な追加および削除の方法について紹介します。

サンプルコード

まずは基本的な処理について紹介します。

次にイベント処理を定義します。これを関数にしておくのがコツです。

そしてこの関数をイベント通知に追加します。

逆に削除する時にも関数を指定します。そのため処理を無名関数ではなく、関数化しておく必要があります。


addEventListenerを使ってイベントを購読し、removeEventListenerを使ってイベントの購読を解除します。その際、関数を指定する必要がありますので購読に使った関数をオブジェクトとして指定できる状態になっていなければなりません。無名関数では難しいのでご注意ください。

今回のコードはJSFiddleにアップロードされていますので実装時に参照してください。

イベント:非DOM要素(JavaScriptオブジェクト)でのイベントの使用 – hifive

Pitaliumの画像比較で一部を除外する

Pitaliumではスクリーンショットを撮影して、二つの画像を比較することで更新された部分があるかどうかをチェックします。しかし画像だけでの比較の場合、バナーであったりソーシャル系の情報は利用したユーザやタイミングによって情報が異なるために毎回差分が出てしまいます。

そこで使いたいのがチェック対象外にする設定です。この手の仕組みとして良く行われるのが除外領域を黒く塗りつぶすといった方法なのですが、Pitaliumでは除外したい部分の透明度を変更すればOKです。

準備するもの

必要なライブラリは以下の通りです。

これらのライブラリが必要です。すべて同じディレクトリに配置するものとします。

テストコード

テストコードは次のようになります。

注意点としては比較時のオプションです。 CompareOptionType.IGNORE_CLEAR_PIXELS を使います。

コンパイル

コンパイル時には pitalium-*.jar がクラスパスに追加されている必要があります。

実行

実行時には slf4j をクラスパスに追加して実行する必要があります。

今回のファイルは以下の二つです。

二つ目の画像の右側のアイコンだけ透明度を変更しています。

実行すると一瞬GUIアプリケーションが立ち上がった後、差分ファイルが書き出されます。右の部分は色が明らかに違いますが、差分から除外されているのが分かるかと思います。


このようにして二つの画像から一部を除いた比較も簡単にできます。ぜひ皆さんの開発に役立ててください。

Pitalium(hifiveリグレッションテストライブラリ) – hifive

Pitaliumの画像比較機能を使う

PitaliumはWebブラウザを自動操作し、撮影したスクリーンショットを使って前回撮影した時と差分がないかチェックするテストツールです。DOM比較などに比べて手軽に使え、デザイン崩れもチェックできます。

そんなPitaliumの画像比較処理だけを取り出す方法を紹介します。

準備するもの

必要なライブラリは以下の通りです。

これらのライブラリが必要です。すべて同じディレクトリに配置するものとします。

コードについて

参考のコードは次のようになります。二つの画像をCLIの引数として受け取り、差分があった場合はPNGとして差分を出力します。このファイルを diff.java とします。

コンパイル

コンパイル時には pitalium-*.jar がクラスパスに追加されている必要があります。

実行

実行時には slf4j をクラスパスに追加して実行する必要があります。

今回のファイルは以下の二つです。

実行すると一瞬GUIアプリケーションが立ち上がった後、差分ファイルが書き出されます。


このようにしてPitalium独自の画像出力機能だけを利用できます。スクリーンショット以外の用途でも使えると思いますので、皆さんの開発に役立ててください。

Pitalium(hifiveリグレッションテストライブラリ) – hifive

hifiveのクラスモジュール紹介(その7)「親クラスの取得」

JavaScript(ECMAScript5)ではクラスを作成することができません。ECMAScript2015になって、ようやくクラスを使えるようになりました。しかしレガシーなブラウザでは実装されていないため、Babelのようなライブラリを使ってコードを変換するのが一般的です。

JavaScriptではprototypeやdefinePropertyなどを使ってクラス(的なもの)を実装しますが、hifiveではそういった面倒な仕組みを意識することなくクラスを実装できるモジュールを開発しました。この機能は1.3.1以降で利用できます。

今回は親クラスの取得方法について紹介します。

クラスの構造について

クラスや親クラスとしてAnimalClass、それらを継承するDogClassがあることとします。

DogClassの親クラスを取得するには getParentClass メソッドを実行します。

この返却されるクラスはAnimalClassと同じものになります。


今回のコードはJSFiddleにアップロードしてあります。実装時の参考にしてください。

継承している中で親クラスが何であるかを指定するケースはよくあります。そうした時には getParentClass メソッドを活用してください。

クラスの作成と使用 – hifive