{ "componentChunkName": "component---src-templates-blog-post-jsx", "path": "/post/how-to-run-testcase-of-selenium-ide-in-cli/", "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"36f10bb5-3d2f-585a-83f7-7f8e83b98cb9","excerpt":"この記事は12/21 クローラー／Web スクレイピングの記事です。 最近、自社システムのシナリオテストの実施方法周りの調査をやっているのですが、 GUI からテストコードの原型を作成できる テストコードを編集しても GUI で編集できる可逆性が有る CI…","html":"

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

\n

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

\n\n

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

\n

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

\n\n

Selenium IDE

\n

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

\n

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

\n
\n

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

\n
\n

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

\n

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

\n

HTML ファイルとして保存

\n

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

\n

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

\n

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

\n

selenese-runner で実行する

\n

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

\n

selenese-runner とは

\n

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

\n

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

\n

selenese-runner をホストで動かす

\n

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

\n

\"selenese-runner\"

\n

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

\n

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

\n

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

\n
\n

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

\n
\n

動作させると、

\n

\"compose-selenese-runner\"

\n

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

\n

コンテナの構成

\n

![](https://g.gravizo.com/g?\n%20digraph%20G%20%7B%0A%20%20%20graph%20%5B%0A%20%20%20%20%20rankdir%20%3D%20LR%0A%20%20%20%5D%3B%0A%0A%20%20%20selenese%3B%0A%20%20%20hub%20%5Blabel%3D%22selenium%2Fhub%22%5D%3B%0A%20%20%20chrome%20%5Blabel%3D%22selenium%2Fnode-chrome%22%5D%3B%0A%20%20%20firefox%20%5Blabel%3D%22selenium%2Fnode-firefox%22%5D%3B%0A%0A%20%20%20selenese%20-%3E%20hub%20%5Blabel%3D%22%2Fwd%2Fhub%22%5D%3B%0A%20%20%20chrome%20-%3E%20hub%20%5Blabel%3D%22Connect%22%5D%3B%0A%20%20%20firefox%20-%3E%20hub%20%5Blabel%3D%22Connect%22%5D%3B%0A%20%20%20hub%20-%3E%20chrome%20%5Blabel%3D%22Execute%22%5D%3B%0A%20%20%20hub%20-%3E%20firefox%20%5Blabel%3D%22Execute%22%5D%3B%0A%20%7D%0A\n)

\n

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

\n

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

\n
\n

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

\n
\n

日本語サポート

\n

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

\n
\n

— Ubuntu の日本語環境 | Ubuntu Japanese Team

\n
\n

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

\n
\n

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

\n
\n

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

\n

まとめ

\n

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

","timeToRead":8,"frontmatter":{"title":"Selenium IDEで作ったテストをCLI環境で動かしてみる","tags":["CI","Selenium"],"date":"December 20, 2016","featuredImage":null}}},"pageContext":{"slug":"/how-to-run-testcase-of-selenium-ide-in-cli/","previous":{"fields":{"slug":"/use-chatwork-like-slack/"},"frontmatter":{"title":"ChatWorkだってSlackしたい！！","tags":["Advent Calendar","Chrome extension","JavaScript"]}},"next":{"fields":{"slug":"/should-use-delete-option-to-delete-git-branch-or-tag/"},"frontmatter":{"title":"リモートのタグを一括削除するときは–deleteを使おうと思った話","tags":["Git"]}}}}, "staticQueryHashes": ["2585454260","2954598359"]}