Selenium IDEで作ったテストをCLI環境で動かしてみる

LINEで送る
Pocket

この記事は12/21 クローラー/Webスクレイピングの記事です。

最近、自社システムのシナリオテストの実施方法周りの調査をやっているのですが、

  • GUIからテストコードの原型を作成できる
  • テストコードを編集してもGUIで編集できる可逆性が有る
  • CIのためにヘッドレスで実行できる
  • 環境構築が簡単

な手法を調べており、selenese-runnerというツールとSeleniumが提供しているSelenium Hubというツールを利用したらいいんじゃないか、という結論になりました。
この方法なら専門的な技能がなるべく少なくて済むんじゃないか。

と思っている方法を紹介します。

目次

  1. Selenium IDEというFirefox拡張を利用してブラウザを操作しマクロを記録
  2. IDE上でアサーションを書き加える
  3. HTMLファイルとして保存
  4. このリポジトリのようにCLIでテストスイートを実行する
    • selenese-runner とは
    • selenese-runnerをホストで動かす
    • ヘッドレス環境でselenese-runnerを動作させる
    • コンテナの構成
    • 日本語サポート

という手順でいけます。
各手順を軽く説明しつつ、リポジトリの中身の説明を重点的にこの記事で紹介しようと思います。

Selenium IDE

Firefoxのアドオンとして配布されています。
ブラウザでの操作をマクロとして記録する機能があります。
また、IDE上で記録したマクロを編集したりアサーションを追記したりできます。
補完とドキュメントが付いているので、Seleniumの機能を熟知していなくても、補完で命名を補いってドキュメントで知識を補いながら書けます。
IDEからステップ実行もできるので、1手順ずつ動作確認していくことも可能です。

Selenium IDEの詳しい使い方については色んな方が記事書いてくださっていますので割愛します。

5分でわかるSelenium IDEの使い方 – Qiita
これだけはおさえておきたい!Selenium IDEのコマンド – Qiita
Selenium IDEでWebページのテストを自動化しよう!|社員ブログ|株式会社Qript

IDE上でアサーションを書き加える

アサーションを書くのはややプログラマ的な視点が必要になるかもしれませんが、
CSSセレクタとHTMLタグが分かればある程度のテストなら書けるので、
フロントのマークアッパーとかも十分戦力として計上可能な範囲の専門性だと思います。

HTMLファイルとして保存

エクスポート機能を使わずにファイルとして保存すると、HTMLファイル(seleneseという形式らしい)が吐き出されます。
seleneseという形式は結構冗長なHTMLです。かなしい。
ただし、ここで重要なのが 可逆性があること です。
seleneseの形式を崩さなければ、 テキストエディタ等で編集した後でも再度Selenium IDEで開き直すことが可能 です。

エクスポート機能を利用すると、様々な形式のコードへエクスポートが可能です。
ただし、seleneseという形式以外にエクスポートすると、Selenium IDEで開けなくなります。非可逆です。
で、seleneseという形式は結構冗長なHTMLです。かなしい。

可逆性を失うと「エディタが扱えてselenese形式のHTMLが理解できる」エンジニアが必要になってしまうと思います。
でないとメンテナンスできなくなっちゃうので、できればIDEで何度でも編集できる形にしておきたい。
ということでエクスポートはselenese形式一択だと現状考えています。

selenese-runnerで実行する

お待ちかねのCLI化+ヘッドレス化です。

selenese-runner とは

selenese-runner自体の使い方についてはご本人が公開されているスライドが参考になると思います。

この便利ツールを使用して、selenese形式のHTMLをコマンドラインから実行できます。

selenese-runnerをホストで動かす

selenese-runner単体をホスト側実行するとブラウザが起動し、HTMLの内容が実行されます。

selenese-runner

どうでしょう。いい感じです。

ヘッドレス環境でselenese-runnerを動作させる

cron等で定期実行したり、CIを回したりするには、GUIのないLinuxサーバで実行する必要があると思います。
ということで、その動作環境も作ってみました。

GitHub – Leko/example-selenese-runner-with-hub: Example of scenario testing used by selenese-runner with Selenium Hub

動作させると、

compose-selenese-runner

こんな感じです。いかがでしょうか。
これならGUI不要なので、cronでもCIでもexecでもいい感じにもらえばいいと思います。

コンテナの構成

こんな感じです。
設定ファイルの中でseleneseコンテナはドライバをremoteremote-urlにhubコンテナのURLを指定してあります。
その指定をするとselenese-runner側がSelenium hubにテスト実行依頼を投げます。
依頼を受け取ったhubは、接続済みのchromeかfirefoxを起動しテストを実行します。

Selenium hub使ったことなかったので理解するまでが難しかったですが、実際に動かしてみたら簡単に理解できました。
Selenium hub自体については公式リポジトリとこちらの記事が参考になりました。

GitHub – SeleniumHQ/docker-selenium: Docker images for Selenium Standalone Server
» Selenium Gridで複数の実機ブラウザで自動テスト TECHSCORE BLOG

日本語サポート

Seleniumはデフォルトでは日本語などのマルチバイト文字をサポートしていません。
なのでスクショを撮る時に□□□みたいな感じに化けるのですが、せっかくスクショ撮るようにしたなら日本語対応したいな、ということでしておきました。
selenium/hub側に日本語対応入れるのかと思っていましたが、node-chromenode-firefoxコンテナの方に入れる必要がありました。
詳しくはUbuntuのドキュメントと公開したリポジトリのDockerfileを御覧ください。

Ubuntuの日本語環境 | Ubuntu Japanese Team

ちなみに、中国語のタグのPRに対して、

however not sure if those containers could accept such locale support for general cases

と回答しているので公式のタグとしては登場しなさそうです。

まとめ

これをベースに自分たちなりのアレンジで運用してもらえれば、
スクレイピングもシナリオテストもいい感じに回っていくかな、と思います。

LINEで送る
Pocket