Robot Frameworkを利用したUIテスト - くらしのマーケット開発ブログ

こんにちは、新卒エンジニアのツヅキです。
今回はRobot Frameworkを使ったSPページのUIテストのお話です。
そもそもRobot Frameworkを使った”SPページのUIテスト”（以後、テスト）とはなんでしょうか？

スマートフォンのブラウザからあるサイトにアクセスし、特定の動作に対して機械的にテストをすること

ここでいくつかの疑問が生まれます。

なぜ、わざわざ機械的にテストするの？
なぜ、SPページでテストするの？
そもそもテストする必要ある？

などなど、では一つずつ考えていきましょう。
なぜ、わざわざ機械的にテストするの？
何度も同じテストを人が一回一回テストすると、とても時間がかかります。しかし、機械的にテストをすることによりテスト時間を大幅に短縮することができるので機械的にテストします。
なぜ、SPページでテストするの？
パソコンのブラウザより、スマートフォンのブラウザの方が多くの人に利用されているので、SPページでテストします。
そもそもテストする必要ある？
テストをすることによってテストケース内の動作は正常に動作できることは保障されるからです。

では、本題のRobot Frameworkのお話です。
Robot Frameworkは何かについて少しだけ説明させていただきます。

受け入れテストやテスト駆動開発 (ATDD) のための、オープンソースの汎用テスト自動化フレームワークです。簡単に扱えるテーブル形式のテストデータ記述方法を備えていて、キーワード駆動型のテストアプローチに便利です。テスト機能は Python や Java でテストライブラリを書いて拡張できます。ユーザは既存のキーワードを使って新しい高水準キーワードを定義でき、それを使ってテストケースを書けます。[1]

どうやら、無料で簡単にテストを作ることができて、いい感じにカスタマイズできる素晴らしいシステムのようです。
今回のSPページのテストに利用するスマートフォンの種類としてiPhoneのシミュレーターを利用します。
大まかに必要なものを説明します。

必要なもの

Appium
Xcode
Python
iPhoneシミュレーター
失敗してもめげない心

特に、一番下の失敗してもめげない心はとても重要です。MacがあればiPhoneシミュレータもAppiumもXcodeも簡単にインストールできますが、テスト環境を作ったりRobot Frameworkでテストを書いているとたまに心が折れそうになるのでしっかりと心の準備を整えてから挑んでください！

では早速インストールの話ですが、”brewでAppiumとMacAppStoreなどからXcodeをインストールし、XcodeでiPhoneシミュレーターを設定後、pipでRobot Frameworkをインストールしてみてください。”[2]ここで書くとこのブログを読んでくださる方も書いている私も心が折れそうなので割愛します。
（私がRobot Frameworkが正常に動作するようになる頃には、心のHPが85%くらい削られていました）

2018-08-23 20 32 38

まず最初に、Robot FrameworkからAppiumに対してどのようなものを使うかの設定を行います

Robot Frameworkの設定

*** Keywords ***
Initialize
    ${caps}=  create dictionary  browserName=Safari  platformName=iOS  platformVersion=11.4
    ...                          deviceName=iPhone 8  automationName=XCUITest  useNewWDA=true
    create webdriver  Remote  command_executor=localhost:3000  desired_capabilities=${caps}

こんな感じです。簡単に説明すると、

iPhone 8 のシミュレータを使います。
iOS11.4を使います
localhost:3000から操作を行います。

と書いてあります。（Robot Frameworkに合わせてAppiumの設定を行う必要があります）

では次にRobot FrameworkでGoogleにアクセスして見ましょう

Webページへのアクセス

go to  https://www.google.com/

ここでのポイントは、go toの間のスペースは１つ~ to http://example.comtoとURLの間のスペースは２つというところです。

次は、特定の要素をクリックするという操作です。

要素の選択

click element  ＜XPATH＞

この操作は特定のXPATHをもつ要素をクリックするという操作です。ここでも、click elementの間のスペースは１つ、element ＜XPATH＞の間はスペース２つです。＜XPATH＞の部分には特定の要素を示すXPATHを示してあげてください。

次は、特定の要素に対して入力するという操作です。この操作のおかげで、ボックスなどに対して文字を入力することができます。

文字の入力

input text  ＜XPATH＞  ＜入力したい文字列＞

この操作は特定のXPATHに対して文字列を入力するという操作です。input textの間のスペースは１つ、text ＜XPATH＞＜入力したい文字列＞の間はスペース２つです。＜XPATH＞の部分には特定の要素を示すXPATH、＜入力したい文字列＞の部分には入力したいテキストをそのまま入力してください。

次は、特定の要素が見つかるまで待つという操作です。この操作があるおかげで、読込みが早い時も、遅い時も、普通の時も要素のクリックや入力が正常にできるまで待ってくれます。

待機

wait until element is enabled  ＜XPATH＞

この操作は特定のXPATHを読み込むまで待つという操作です。

2018-08-23 20 27 22

いかがでしたか？
今回は基本的な部分だけでしたが、他にもifやforといった条件分岐や繰り返しを行うことができるので興味がある方は調べて見てください！一緒に働いてみたいといった方もぜひお待ちしてます！

参考

[1] https://robotframework-ja.readthedocs.io/ja/latest/quickstart/QuickStart.html
[2] http://thinkami.hatenablog.com/entry/2017/09/15/222958