<style>
.center{
text-align:center;
}
</style>
# <div class="center"> Robot Framewrok 自定義關鍵字
</div>
#### <span style="color:red;font-size:25px;"> WebDemo——登入驗證範例</span>
### 1.先建立簡單的主要登入頁面：
- index.html
```htmlembedded=
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Login Page</title>
<link href="demo.css" media="all" rel="stylesheet" type="text/css">
<script type="text/javascript">
function login(username, password) {
if (username == "demo" && password == "mode") {
window.location = "welcome.html";
} else {
window.location = "error.html";
}
}
</script>
</head>
<body>
<div id="container">
<h1>登入頁面</h1>
<p>請輸入你的使用者名稱和密碼，按送出按鈕以登入。</p>
<form name="login_form" onsubmit="login(this.username_field.value, this.password_field.value); return false;">
<table>
<tr>
<td><label for="username_field">賬號：</label></td>
<td><input id="username_field" size="30" type="text"></td>
</tr>
<tr>
<td><label for="password_field">密碼：</label></td>
<td><input id="password_field" size="30" type="password"></td>
</tr>
<tr>
<td> </td>
<td><input id="login_button" type="submit" value="登入"></td>
</tr>
</table>
</form>
</div>
</body>
</html>
```
### 2.建立登入成功畫面
- welcome.html
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<title>Welcome Page</title>
<!--<link href="demo.css" media="all" rel="stylesheet" type="text/css">-->
</head>
<body>
<div id='container'>
<h1>Welcome Page</h1>
<p>Login succeeded. Now you can <a href=".">logout</a>.</p>
</div>
</body>
</html>
```
### 3.建立登入失敗的畫面
- error.html
```htmlembedded=
<!DOCTYPE html>
<html>
<head>
<title>Error Page</title>
<!-- <link href="demo.css" media="all" rel="stylesheet" type="text/css">-->
</head>
<body>
<div id="container">
<h1>Error Page</h1>
<p>Login failed. Invalid user name and/or password.</p>
</div>
</body>
</html>
```
### 4. 建立 服務器架設
- server.py 這裡預設端口為7272
```python=
from __future__ import print_function
from os import chdir
from os.path import abspath, dirname, join
try:
from SocketServer import ThreadingMixIn
from BaseHTTPServer import HTTPServer
from SimpleHTTPServer import SimpleHTTPRequestHandler
except ImportError:
from socketserver import ThreadingMixIn
from http.server import SimpleHTTPRequestHandler, HTTPServer
ROOT = join(dirname(abspath(__file__)), 'html')
PORT = 7272
class DemoServer(ThreadingMixIn, HTTPServer):
allow_reuse_address = True
def __init__(self, port=PORT):
HTTPServer.__init__(self, ('localhost', int(port)),
SimpleHTTPRequestHandler)
def serve(self, directory=ROOT):
chdir(directory)
print('Demo server starting on port %d.' % self.server_address[1])
try:
server.serve_forever()
except KeyboardInterrupt:
server.server_close()
print('Demo server stopped.')
if __name__ == '__main__':
import sys
try:
server = DemoServer(*sys.argv[1:])
except (TypeError, ValueError):
print(__doc__)
else:
server.serve()
```
### 5.建立自定義關鍵字
- resource.robot
```csharp=
*** Settings *** //導入庫
Library Selenium2Library
*** Variables *** //設定需要的變數
${SERVER} localhost:7272 //端口號對應py檔
${BROWSER} chrome //瀏覽器設定 其他：firefox、ie
${DELAY} 1 //設定程式執行延遲時間
${VALID USER} demo //使用者名稱
${VALID PASSWORD} mode //密碼
${LOGIN URL} http://${SERVER}/
${WELCOME URL} http://${SERVER}/welcome.html
${ERROR URL} http://${SERVER}/error.html
*** Keywords *** //建立自定義關鍵字
打開瀏覽器並連到登入頁
Open Browser ${LOGIN URL} ${BROWSER}
Maximize Browser Window
Set Selenium Speed ${DELAY}
顯示登入標題
到登入頁面
Go To ${LOGIN URL}
顯示登入標題
顯示登入標題
Title Should Be Login Page
輸入賬號
[Arguments] ${username}
Input Text username_field ${username}
輸入密碼
[Arguments] ${password}
Input Text password_field ${password}
按下登入按鈕
Click Button login_button
顯示 Welcome 頁
Location Should Be ${WELCOME URL} //驗證網頁的地址
Title Should Be Welcome Page //驗證網頁title的正確性
```
### 6. 建立 驗證成功登入 的檔案
- valid_login.robot
```csharp=
***Setting***
Resource resource.robot //import自定義關鍵字檔進來
***Test Cases***
驗證登入功能
打開瀏覽器並連到登入頁 //這裡呼叫剛才在resource建立的關鍵字
輸入賬號 demo
輸入密碼 mode
按下登入按鈕
顯示Welcome 頁
[Teardown] Close Browser //這裡本身RF有自帶一些變數可以使用
```
### 7.建立 驗證失敗 的檔案
- invalid_login.robot
```csharp=
*** Settings ***
Suite Setup 打開瀏覽器並連到登入頁 //預先載入
Suite Teardown Close Browser
Test Setup 到登入頁面 //轉到登入頁面 index.html
Test Template 使用無效的登錄 顯示失敗網頁
Resource resource.robot
*** Test Cases *** USER NAME PASSWORD
輸入錯誤 使用者名稱 invalid ${VALID PASSWORD}
輸入錯誤 密碼 ${VALID USER} invalid
輸入錯誤 使用者名稱 與 密碼 invalid whatever
輸入空的使用者名稱 ${EMPTY} ${VALID PASSWORD}
輸入空的密碼 ${VALID USER} ${EMPTY}
輸入空使用者名稱 與 密碼 ${EMPTY} ${EMPTY}
// 以上使用不同的case來驗證 都會跳到驗證錯誤的頁面 (error.html)
*** Keywords ***
使用無效的登錄 顯示失敗網頁
[Arguments] ${username} ${password}
輸入賬號 ${username}
輸入密碼 ${password}
按下登入按鈕
登入失敗
登入失敗
Location Should Be ${ERROR URL} //驗證網頁的地址
Title Should Be Error Page //驗證網頁title的正確性
```
## <span style="color:red"> 以上程式部分完成了！</span>
<span style="font-size:20px;">使用Ride 介面開啟 WebDemo專案 </span>
- 將各個檔案分類在文件夾下：
- 打開專案後，會出現不同的驗證CASE：
- 可查看對應的函數是否在對應的位置
- <span style="color:red"> [編寫方法](https://www.itread01.com/content/1549666275.html)(參考自CSDN) </span>
### <span style="color:red"> 開始測試 </span>
- 在按下開始測試，keyword會跑剛才所自定義的變數:
- 程式會自動開始各個case，並且會自動key入賬號與密碼來驗證。
- 成功跳轉 登入成功
- 當第一個Case完成之後，將測試下一個測試案例，並且會顯示Pass
- 繼續測試(錯誤登入)
- 當錯誤的賬號和密碼登入後，會跳出錯誤頁面。
- 測試都結束後，程式會自動停止，並顯示結果。
## <span style="color:red"> 關於系統記錄區出現亂碼的問題解決</span>
<div style="font-size:19px;"> 進入 RobotFramework 的安裝路徑：</div>
<div style="color:red">
X:python\Lib\site-packages\robotide\contrib\testrunner\testrunnerplugin.py
</div>
<div style="font-size:19px;"> 或是安裝在Anaconda中： </div>
<div style="color:red">
X:\user\Anaconda3\Lib\site-packages\robotide\contrib\testrunner\testrunnerplugin.py
</div>
- 開啟 testrunnerplugin.py
<div style="font-size:19px;"> 將原本的 ['system'] 改為OUTPUT。</div>
<br>
關掉Ride介面，重新打開：
這樣就可以更好的查看系統記錄：
<br>
<br>
<br>
## 參考文獻
> https://www.itread01.com/content/1549666275.html 兩小時入門RF
> https://github.com/robotframework/WebDemo#downloading-demo-package <br> Web testing with RF
> https://blog.csdn.net/qq_40555976/article/details/105381217 RF中文亂碼問題
>https://robotframework.org/Selenium2Library/Selenium2Library.html<br> Selenium2Library 程式庫
>https://robotframework.org/ RF官方網站
>https://www.qa-knowhow.com/ RF自定義關鍵字 中文
Sign in with Wallet
Connect another wallet