[Robot Framework] Webのテスト自動化を構築からスクリプティングまでやってみる Windows環境

# はじめに

WEBアプリケーションをテスト自動化するとき、よく使うフレームワークとしてSeleniumがある。
ただ、Selenium + Pythonといったプログラミング言語を用いると、初めての人にとってハードルが高い。
そこで、ある程度簡単に実装できるようにした、キーワード駆動の Robot Frameworkがある。
Robot Frameworkはテストケースを自然言語に近いキーワードを用いて記述するもので、非エンジニアにとっても読みやすく、保守しやすいものになっています。

今回、windows 環境に robot frameworkの環境構築から、WEBサイトのログイン処理の作成、実行までを初心者でもできるようにドキュメント化した

# セットアップ

## Python

Pythonサイトから、Stable Releasesのバージョンをダウンロードする

https://www.python.org/downloads/windows/


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/74029cae-e438-dc81-6aba-e0ace7a7a990.png)

「Add python.exe to PATH」のチェックを入れて、どこからでも実行できるようにする。
その後、「Install Now」をクリックし、インストールを完了させる。

任意の場所でコマンドプロンプトを開き、以下コマンドを実施し、動作確認をする

```
python --version
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/3c7bbc6c-e38a-cb10-96a2-1a12de425574.png)


## robot framework

robotframeworkでWEBアプリケーションのテストを行うライブラリをインストールする

```
pip install robotframework
```

次に、robotコマンドを実行する

```
robot
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/e2c03f89-926c-b0f0-32a8-794e088f7b1e.png)


※なお、環境やログインユーザーによって、上記 robotのPATHが正しく通ってなく、動かない可能性がある。
その場合、 pipでインストールしたライブラリが、個人のpython folderにインストールされているからです。
その場合、そのfolderもPATHに追加する必要がある

その時、環境変数のpathに追加するfolderは以下のとおりである。

```
%UserProfile%\AppData\Roaming\Python\Python312\Scripts
```

まず、exploreで対象folderが存在することを確認する。
その後、exploreで開いたパスを環境変数のpathに追加設定する
追加後に、改めてコマンドプロンプトを開き、実行できるかを確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/fdec04c9-eb67-ce42-036b-16d780fe79da.png)


## robotframework selenium library

次に、WEBのテストを行うライブラリ selenium libraryをインストールする

```
pip install robotframework-seleniumlibrary
```

# テスト対象

テスト自動化練習サイトを用いる。
こちらで、以下ユーザーでログインできることを確認するテストを作成する

| 項目 | 値 |
|:-----------|:------------|
| メールアドレス       | ichiro@example.com        | 
| パスワード       | password       | 
| 名前 | 山田一郎 |


上記ユーザーでログインする

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/a5813040-5f53-faba-73e9-4c36f1ad7708.png)

ログインしたら、氏名がログインしたユーザー名であることを確認する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/468b5e9f-151a-852a-b177-59c5452f3025.png)


https://hotel.testplanisphere.dev/ja/index.html



# テストコード実装

スクリプトを記述するに用いるキーワードはこちらになります。

https://robotframework.org/SeleniumLibrary/SeleniumLibrary.html

尚、WEBの要素のXPathを取得する方法に関しては、こちら参考にしてください。

https://qiita.com/emurin/items/f65c2a74ad34c4e4e69f

以下が、今回のテストコードになります（コピーしてそのまま実行できると思います）

```
*** Settings ***
Library  SeleniumLibrary


*** Variables ***
${BROWSER}  chrome
${TIME_FOR_STABLE}  3s
${EMAIL}  ichiro@example.com
${PASSWORD}  password
${USERNAME}  山田一郎


*** Keywords ***
Access WebSite
	[Arguments]  ${url}
	Log to Console  open ${BROWSER} and access ${url}
	Open Browser  ${url}  ${BROWSER}
	Maximize Browser Window
	Sleep  ${TIME_FOR_STABLE}

Login
	[Arguments]  ${id}  ${password}
	Click Element  xpath=//*[@id="login-holder"]/a
	Input Text  xpath=//*[@id="email"]  ${id}  clear=True
	Input Text  xpath=//*[@id="password"]  ${password}  clear=True
	Click Element  xpath=//*[@id="login-button"]
	
Validate User
	[Arguments]  ${email}  ${username}
	${_email} =  Get Text  xpath=//*[@id="email"]
	Log to Console  actual email ${_email}
	Element Text Should Be  xpath=//*[@id="email"]  ${email}
	${_username} =  Get Text  xpath=//*[@id="username"]
	Log to Console  actual username ${_username}
	Element Text Should Be  xpath=//*[@id="username"]  ${username}

Capture ScreenShot
	[Arguments]  ${filename}
	Capture Page Screenshot  ${filename}


*** Test Cases ***

Open Browser and Access site
	Access WebSite  https://hotel.testplanisphere.dev/ja/index.html

Login Membership
	Login  ${EMAIL}  ${PASSWORD}

Validate In MyPage
	Validate User  ${EMAIL}  ${USERNAME}

ScreenShot
	Capture ScreenShot  screen.png


```


尚、robot frameworkの記述ルールは次のようになっています

| エリア | 内容 |
|:-----------|:------------|
| Settings       | 使用するライブラリを定義します        | 
| Variables       | 変数を定義します        | 
| Keywords       | 独自関数（キーワード）を定義します        | 
| Test Cases       | 実行するテストケースを定義します        | 


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/8f03c111-33f5-3991-5963-8a6e38a1ae5b.png)




# 実行

```
robot  xxx.robot    <- 実行するrobotのファイル名
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/54cb1b66-e00f-000c-45d0-4bb5e9ae243d.png)


実行結果がhtmlで生成されます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/267085/6fbe44c4-23ce-e400-0a54-dd06055d11c0.png)