複数ブラウザを一斉操作する同期ツールで簡単検証 #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/

【週刊bitWave】(メルマガ)始めました!

登録はこちらからメールアドレスを入力してお申込みください。

ご登録いただいたメールアドレスは 【週刊bitWave】の更新情報の配信にのみ使用します。

個人情報の取扱いに関しては、「プライバシーポリシー」をご確認ください。解除はいつでこちらから行うことが可能です。

あなたにおすすめ

仮想環境で『Ansible』を使ってサーバ構築... 最近、サーバ構築を実施する必要がありました。 まずは仮想環境を作り、サーバ構築を……と思ったのですが、私はインフラ周りの経験が浅く、色々困ったことが頻出してしまいました。 今回の記事では、私と同じような “サーバ構築ビギナー” ...
「Puppeteer」+「LINE Notify」でサイトの更新時のみ通知を受け取ってみる... 前回の記事では閲覧数向上が期待できそうなキーワードの「Puppeteer」と「LINE Notify」のそれぞれの解説、およびサイトのサムネイルを通知してみるといった試みを実施してみました。 <bitWave関連記事『「Puppeteer...
Vue.jsで社用登録データフォームを作ってみた... 今回は社内用データ登録フォームを作ろうと思い、初めて「Vue.js」を試してみることにしました。 「Vue.js」は使い方、書き方も簡単で、初心者もすぐ活用できるjsだと思いましたので、この場を借りて共有させていただきます。 なお、...
「Puppeteer」+「LINE Notify」でサイトのサムネイルを通知してみる... 今回は記事閲覧数が期待できそうなキーワードを用いて、ブログを書いてみようかと思います。 そのキーワードとは…… 「Puppeteer」と「LINE Notify」。 「Puppeteer」って何? 「LINE Notify」って...