---
# System prepended metadata

title: <div class="center"> Robot Framewrok 自定義關鍵字

---

<style>
.center{
    text-align:center;
}
</style>
 # <div class="center"> Robot Framewrok 自定義關鍵字
 </div>
 #### <span style="color:red;font-size:25px;"> WebDemo——登入驗證範例</span>
 
 ### 1.先建立簡單的主要登入頁面：

![](https://i.imgur.com/TZhDM92.png)
    
 - 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>&nbsp;</td>
            <td><input id="login_button" type="submit" value="登入"></td>
          </tr>
        </table>
      </form>
  </div>
</body>
</html>
```
### 2.建立登入成功畫面

![](https://i.imgur.com/LSld0gy.png)


- 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.建立登入失敗的畫面

![](https://i.imgur.com/WVQS4dV.png)

- 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>
- 將各個檔案分類在文件夾下：
![](https://i.imgur.com/if91KkT.png)
- 打開專案後，會出現不同的驗證CASE：
![](https://i.imgur.com/TmKRb5g.png)
- 可查看對應的函數是否在對應的位置
![](https://i.imgur.com/4bqPdZh.png)
- <span style="color:red"> [編寫方法](https://www.itread01.com/content/1549666275.html)(參考自CSDN) </span>
![](https://i.imgur.com/tWqskq4.png)
![](https://i.imgur.com/o1pIOcT.png)

### <span style="color:red"> 開始測試 </span>

- 在按下開始測試，keyword會跑剛才所自定義的變數:

![](https://i.imgur.com/dybaVgO.png)

- 程式會自動開始各個case，並且會自動key入賬號與密碼來驗證。

![](https://i.imgur.com/jxAhhgX.png)
- 成功跳轉 登入成功
![](https://i.imgur.com/HCNoJ81.png)

![](https://imgur.com/lNpddHt)

- 當第一個Case完成之後，將測試下一個測試案例，並且會顯示Pass

![](https://i.imgur.com/2d9dgV5.png)

- 繼續測試(錯誤登入)

![](https://i.imgur.com/pwCTwjK.png)

- 當錯誤的賬號和密碼登入後，會跳出錯誤頁面。

![](https://i.imgur.com/al8IdEY.png)

- 測試都結束後，程式會自動停止，並顯示結果。

![](https://i.imgur.com/OmkIKCV.png)


## <span style="color:red"> 關於系統記錄區出現亂碼的問題解決</span>

![](https://i.imgur.com/ZiBOBHa.png)

![](https://i.imgur.com/R1qc3w3.png)

<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

![](https://i.imgur.com/4roUwYY.png)

<div style="font-size:19px;"> 將原本的 ['system'] 改為OUTPUT。</div>
 <br>
 
關掉Ride介面，重新打開：
這樣就可以更好的查看系統記錄：

![](https://i.imgur.com/nVGQCnQ.png)

<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自定義關鍵字 中文 