[14] Robot Framework 結合 Playwright 進行 Web 自動化測試 - 實際範例展示 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2024 iThome 鐵人賽

DAY 14

DevOps

建立應用程式 UI 自動化測試 - 以 Robot Framework 為例系列第 14 篇

[14] Robot Framework 結合 Playwright 進行 Web 自動化測試 - 實際範例展示

16th鐵人賽自動化測試軟體測試

Max

2024-09-23 00:06:17

717 瀏覽

分享至

在經過前面幾個章節的介紹後，相信大家對於如何透過 robotframework-browser 執行自動化測試有了深刻的理解，接下來在這個章節我們將跟大家分享，該如何透過 robotframework-browser 進行頁面上的操作。

robotframework-browser 常見操作舉例

robotframework-browser 提供了許多已經包裝好的 keyword 讓我們在撰寫自動化測試時可以非常快速的引用，像是點擊、輸入、拖曳等功能，並且也提供了許多的斷言 (Assertion) 讓我們能夠做驗證，下面我們舉例些平常常用的一些操作：

Fill - 填寫輸入框

Fill 關鍵字用於在輸入文字。這在表單測試中非常常見，或是在登入輸入帳號時也是相當常見，有趣的是，當今天我們輸入密碼時會選擇使用 Fill Secret 這個 keyword 而不是透過 Fill，原因是這樣可以避免將密碼顯示在 Robot Framework 的測試報告上，防止測試報告外洩造成密碼一起外洩的問題。

Fill Text    //input[@name="username"]    value=uesu_name

Click - 點擊元件

Click 是另一個非常常見的操作，當我們需要對元件進行點擊時都會透過 Click 來執行，用於模擬用戶點擊按鈕、連結或其他可點擊的元素。

Click    //button[@id="submit"]

Hover - 懸停於元素上

Hover 關鍵字用於將滑鼠懸停在指定的元素上，這對於測試懸停觸發的行為非常有用，例如下拉菜單或是 Hover 到元件上顯示提示文字。

Hover    selector=//div[@class="dropdown"]

Scroll To Element - 滑動至頁面出現元件

這個關鍵字用於滑動頁面，當今天我們的網頁較長需要展示下方的元件時，便可以透過此元件，像是滑至 footer 這類型的

Select Option    //button[@id="footer"]

Press Keys - 在找到的元件上執行輸入的鍵盤觸發事件

這個比較常用在可以透過鍵盤操作的行為上，像是輸入帳密後，在輸入框按下 Enter 後可以登入。

Press Keys    //button[@id="submit"]    Enter

上方介紹的是幾個常見的 keyword，關於完整的 keyword 可以參考這個網站：https://marketsquare.github.io/robotframework-browser/Browser.html

範例展示

上面介紹了幾個常用的 keyword 後，下面我們就透過 https://todomvc.com/examples/react/dist/ 這個網站來實作些自動化測試吧！

測試案例一：新增一個 ToDo item 並且驗證新增後 ToDo 總數為 1

接著我們根據每個區塊來解說一下各自的行為：

*** Settings ***：在 Settings 區塊我們匯入了 Browser 的 Library，接著設定 Suite Setup，而 Suite Setup 來自下方的 Suite Setup ，在 Setup 我們做了設定 Browser 及 Context，接著是在每個測試開始時 New Page 到被測試的頁面，並且透過 Wait For Load State 等待頁面載入完成，以及設定測試的 Timeout 為 30s。
*** Test Cases ***：在這邊我們撰寫我們的測試案例，我們使用了於 *** Keywords *** 包裝的一個 keyword (Input Text Into ToDo) 用來執行新增文字到 ToDo list 裡，接著透過 Verify Element Text Should Display Correctly 驗證是否新增成功
*** Keywords ***：在這邊我們新增兩個 keyword 讓我們在測試中可以重複使用
- Input Text Into ToDo：將文字帶入的文字輸入到輸入框中，接著透過 Press Keys 按下 Enter 鍵
- Verify Element Text Should Display Correctly：這邊我們包了一個 keyword 來作為我們的斷言，這個斷言在驗證的是元件上的文字是否跟我預期的文字相同，這邊透過 Get Text 這個 keyword 來做，在這邊沒有透過 Robot Framework BuiltIn 的 Should 開頭的 keyword 作為斷言的原因是因為 robotframework-browser 的 Get Text 直接提供透過 == 來作為驗證文字是否相同

*** Settings ***
Library    Browser
Library    String
Suite Setup    Suite Setup 
Test Setup    Test Setup
Test Teardown    Close Context
Suite Teardown    Close Browser
Task Timeout    30s

*** Test Cases ***
Add One ToDos And Check Items
    Input Text Into ToDo    Todo-1
    Verify Element Text Should Display Correctly    .todo-count    1 item left!

*** Keywords ***
Suite Setup 
    New Browser    browser=chromium    headless=False

Test Setup
    New Context    viewport={'width': 1920, 'height': 1080}
    New Page    https://todomvc.com/examples/react/dist/
    Wait For Load State    domcontentloaded    20s

Input Text Into ToDo
    [Arguments]    ${text}
    Fill Text   .new-todo    ${text}
    Press Keys    .new-todo    Enter

Verify Element Text Should Display Correctly
    [Documentation]    Verify element text should display expect
    [Arguments]    ${element}    ${text}
    Get Text    ${element}    ==    ${text}

測試案例二：新增一個 ToDo item 後 Mark 掉這個 Item

我們在 *** Test Cases *** 中新增一條新的 Case，一樣先透過 Input Text Into ToDo 新增一個 Item，接著我們要點擊 toggle 來 mark 掉這個 item，這邊我們可以看到一個有趣的用法，我們是先透過 xpath 找到 Todo-1 的 label 元件，再往上找一層後再往下找該層的 input，這樣的作法比起透過絕對路徑來說更有彈性，只要在這個層級不變的前提下，頁面變動都不會影響到測試的進行。

Add ToDo And Mark Same ToDo
    Input Text Into ToDo    Todo-1
    Click    //label[text()='Todo-1']/..//input
    Verify Element Text Should Display Correctly    .todo-count    0 items left!

完整的程式碼：

綜合上面兩個測試案例，我們將他們整合到同一個 .robot 的檔案中

*** Settings ***
Library    Browser
Library    String
Suite Setup    Suite Setup 
Test Setup    Test Setup
Test Teardown    Close Context
Suite Teardown    Close Browser
Task Timeout    30s

*** Test Cases ***
Add One ToDos And Check Items
    Input Text Into ToDo    Todo-1
    Verify Element Text Should Display Correctly    .todo-count    1 item left!

Add ToDo And Mark Same ToDo
    Input Text Into ToDo    Todo-1
    Click    //label[text()='Todo-1']/..//input
    Verify Element Text Should Display Correctly    .todo-count    0 items left!

*** Keywords ***
Suite Setup 
    New Browser    browser=chromium    headless=False

Test Setup
    New Context    viewport={'width': 1920, 'height': 1080}
    New Page    https://todomvc.com/examples/react/dist/
    Wait For Load State    domcontentloaded    20s

Input Text Into ToDo
    [Arguments]    ${text}
    Fill Text   .new-todo    ${text}
    Press Keys    .new-todo    Enter

Verify Element Text Should Display Correctly
    [Documentation]    Verify element text should display expect
    [Arguments]    ${element}    ${text}
    Get Text    ${element}    ==    ${text}

執行上方測試案例的影片：https://www.youtube.com/watch?v=ITse0UDWyfM

結語

透過上面的例子，相信大家對於如何撰寫自動化測試已經有些心得了，剩下的就是根據這套邏輯，然後搭配 robotframework-browser 的文件來開始撰寫測試囉！

延續上面的範例，當今天我們的測試需要拆成多個 .robot 檔案來寫，也就是多個 Test Suite 時，這時假設每個檔案都會需要 Input Text Into ToDo 這個 keyword ，但是如果我在每個 .robot 中都寫一個的話，日後需要修改這個 keyword 時會發現維護成本會相當的大，因此下一篇我們將介紹該如何規劃一個好的測試框架，讓測試的維護性可以更高。