複数ブラウザを一斉操作する同期ツールで簡単検証 #WebSocket編

複数ブラウザを一斉操作する同期ツールで簡単検証 #WebSocket編

Seleniumのデメリットは「Webドライバ」ではないかと以前より考えていました。

「Webドライバ」はバージョン管理がかなりセンシティブ。ブラウザのバージョンがアップデートされるたびに、「Webドライバ」もアップデートしなければいけません。この「Webドライバ」はブラウザ開発と連動している訳でもなく、後から追っかけ開発方式となっています。つまり、ブラウザ開発とは別の部隊で開発されているという現実があり、このタイムラグによる不都合が問題視されていました。

テスト検証に優位な仕様

ショーケース・ティービーの製品運用部隊はお客様に納品する際、必ず「全ブラウザチェック」という作業を実施しています。
もちろん、これは各ブラウザにて想定する動作がされているかどうかをチェックするものです。
両手の指で数え切れないほどのブラウザ、そして各バージョンがある現在、この作業が単純に工数を圧迫しているのは言うまでもなく、現場でも中々の重労働であるという報告も受けています。

それこそSeleniumで自動検証を実施すれば済む話ではないかとお考えになられる方も多いかもしれませんが、納品する企業のWEBサイトによってはDOM構造も違いますし、それぞれ設定も挙動も異なります。
都度設定していては、設定自体に工数を取られてしまいますし、せっかく設定したものもほぼ再利用が不可能であるというデメリットもつきまといます。

どうにか一括での複数ブラウザをまたがった操作ができないものか……
そこで思いついたのが『WebSocket』の存在。
ということで、『WebSocket』を使って実現させてみることにしました。

現在、複数回にわたって実施している作業を1回で済ますことができれば、作業効率は複数回分の1になるという、極めて分かりやすい効率改善です。

Node.jsの環境準備

Node.jsは通常のWebサーバと環境設定が異なりますが、今回は以下の構成でローカル環境に設置します。

※公開サーバに設置する場合は、Centos移行を参考にしてください。

### 1. Dockerをインストール

まずはMacアプリで動作するようにDockerをインストールします。
https://docs.docker.com/docker-for-mac/install/
上記URLから「Docker.dmg」インストーラをダウンロードします。

インストールは、インストーラを起動して、アプリをコピーするだけ。

起動するとメニューバーに下図のようなアイコンが表示されます。

これをクリックすると、下の画像のようなパネルウィンドウが開きます。

ここで「About Docker」を選択すると、バージョンが確認できます。

参考ページ(英語です)
https://docs.docker.com/docker-for-mac/

### 2. OSのインストール

Dockerのインストールが終わったら、次は仮想OSのインストールです。
Docker ImageのCentosをサクッと入れてしまいましょう。
Macのターミナルを開いてインラインに上がっているDocker Imageの検索をしてみます。

笑っちゃうぐらいいっぱいありますね。
そしてSTARSが一番多い、リスト最上位のものをpullしちゃいます。

何事もなく完了してしまいました。
一応、取得しているイメージ一覧を確認してみましょう。

### 3. Nodejsモジュールのインストール

次の工程ではpullしたcentosを立ち上げ、モジュールをインストールしてから、消えないようにイメージを保存(commit)をしておこうと思います。

無事にイメージ保存することができました。
一度、立ち上がっているDocker Imageを閉じておきましょう。
※ちゃんとcommitできていないと、ここですべて消えてしまいます

nvmの各種使い方は下記リンクを参照してください。
<参照:Qiita『centos + node.js + npm + nvm インストール』>

ソースコード

再度Dockerに入り、今度はMacで使っているフォルダとDockerを共有しておきましょう。
そうすることでMacでテキストエディタを使ってコーディングすることができます。

「~/web」フォルダをDocker上の「/ver/www/html」にリンクします。
そして、リンクした場所に任意のフォルダを作ります。

さらに必要なライブラリ「socket.io」をインストールします。
※「まだインストールあるんかい!!」って思わないように!

サンプルコードで「socket.io」のインストールと起動を確認してみましょう。
ポート番号は8000番のみを使うので、80番を捨てて8000番に変えます。変えた後は一度Dockerを再起動させておきましょう。

### サンプルコード

### 実行

※正常にサンプルコードが起動できると、「Run…」という文字がターミナルに表示されます

### ブラウザでアクセス


上のような表示が出ていれば成功です。
これは8000番ポートがWebSocket経由でやり取りできていることを意味しています。

同期ツール作成

「同期ツール」と大層なことを言っていますが、実際には上記ソースコードにWebSocket関数を入れて、イベントのやり取りをするだけです。慣れれば簡単にソース改修ができると思います。

### ソースコード

この状態で複数のブラウザで以下URLにアクセスします。
http://localhost:8000/
サーバ側でブラウザアクセスがある度にログを出力しているので、確認できると思います。

確認ビデオ

MacOS Xの環境にはなりますが、4つのブラウザを同時に操作しています。
上から左がGoogleChromeで右がSafari、下は左がFirefox、右がOperaになっています。

【参考動画】

動画をご覧いただいてお気づきになられた方もいらっしゃるかとは思いますが、実はスクロールにも対応しているんですね。
ただし、ブラウザ毎に若干の値が異なってしまうので、必ずしもキレイに同期ができているとは言えません。

ちなみにこのサンプルページの送信ボタンは、いくらクリックしてもデータ送信はされません。
そして、送信ボタンのクリックは、同時操作機能を入れていません。この機能については今後の機能追加で実践していきたいと思います。

今後について

これができたのであれば、アイデア次第で色々なツールも作れるのではないでしょうか。
例えば……
「手持ちの端末とプロジェクタ表示用のブラウザを分けて、遠隔ブラウザ操作」
なんてどうでしょう。夢が膨らみますよね!

ちなみに、つい先日リリースしたばかりの弊社サービス『View Assist』は、ブラウザ間のデータ共有がウリのサービスなのですが、「1対1」での動作を行うツールとなっています。そのため、今回の仕様のような「1対複数」のブラウザに反映させるといった機能は盛り込んではいません。かえってプライバシー上の問題で不安を煽ってしまいますからね!

各種サービスやそのクオリティごとによって異なりますが、今回のように検証作業の軽減化を目的としたツール作成がカンタンに行えれば、会社のコスト削減に非常に貢献できることでしょう。
エンジニアはサービスそのものだけにとらわれるのではなく、こういった視点も意識しながら日々のコーディング作業を行うことが、何よりも重要なのではないでしょうか。

コメント